TypeScript/JavaScript Examples

npm install axios

import axios from 'axios';

// Create an API client with default configuration
const api = axios.create({
  baseURL: 'https://api.magicslides.app/public/api',
  headers: {
    'Content-Type': 'application/json'
  }
});

// Add response interceptor for error handling
api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 429) {
      const resetTime = error.response.headers['x-ratelimit-reset'];
      console.error(`Rate limit exceeded. Try again after ${resetTime}`);
    }
    return Promise.reject(error);
  }
);

async function generateFromTopic() {
  try {
    const response = await api.post('/ppt-from-text', {
      apiKey: 'ms-api-your-api-key-here',
      topic: 'Introduction to Quantum Computing: Understanding quantum mechanics, qubits, superposition, and quantum algorithms.',
      template: 'bullet-point1',
      slideCount: 10,
      language: 'en',
      imageForEachSlide: true
    });

    console.log('Presentation URL:', response.data.url);
    console.log('PPT ID:', response.data.pptId);
    return response.data;
  } catch (error) {
    console.error('Error generating presentation:', error);
    throw error;
  }
}

async function generateFromYouTube() {
  try {
    const response = await api.post('/ppt-from-text', {
      apiKey: 'ms-api-your-api-key-here',
      youtubeURL: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      template: 'bullet-point1',
      slideCount: 15,
      language: 'en',
      imageForEachSlide: true
    });

    console.log('Presentation URL:', response.data.url);
    console.log('Input Type:', response.data.inputType);
    return response.data;
  } catch (error) {
    console.error('Error generating presentation:', error);
    throw error;
  }
}

async function generateFromTopic() {
  try {
    const response = await api.post('/ppt_from_topic', {
      topic: 'Artificial Intelligence in Healthcare',
      extraInfoSource: 'Focus on recent developments',
      email: 'your-email@example.com',
      accessId: 'your-access-id',
      slideCount: 12
    });

    console.log('Presentation URL:', response.data.url);
    return response.data;
  } catch (error) {
    console.error('Error generating presentation:', error);
    throw error;
  }
}

async function generateFromSummary() {
  try {
    const response = await api.post('/ppt-from-text', {
      apiKey: 'ms-api-your-api-key-here',
      summary: 'Climate change is one of the most pressing issues of our time. Rising global temperatures, melting ice caps, and extreme weather events are causing significant environmental and economic impacts.',
      template: 'bullet-point1',
      slideCount: 10,
      language: 'en',
      imageForEachSlide: true
    });

    console.log('Presentation URL:', response.data.url);
    return response.data;
  } catch (error) {
    console.error('Error generating presentation:', error);
    throw error;
  }
}

async function generateFromWebsite() {
  try {
    const response = await api.post('/ppt-from-text', {
      apiKey: 'ms-api-your-api-key-here',
      websiteURL: 'https://www.wikipedia.org/wiki/Artificial_intelligence',
      template: 'custom1',
      slideCount: 12,
      language: 'en',
      presentationCategory: {
        category: 'Technology',
        subCategory: 'AI',
        tone: 'Professional'
      }
    });

    console.log('Presentation URL:', response.data.url);
    return response.data;
  } catch (error) {
    console.error('Error generating presentation:', error);
    throw error;
  }
}

interface ApiError {
  success: false;
  error: string;
  code: string;
  details?: Record<string, any>;
}

async function handleApiRequest() {
  try {
    const response = await api.post('/ppt_from_topic', {
      topic: 'AI in Healthcare',
      email: 'your-email@example.com',
      accessId: 'your-access-id'
    });
    
    return response.data;
  } catch (error) {
    if (axios.isAxiosError(error) && error.response) {
      const apiError = error.response.data as ApiError;
      
      switch (apiError.code) {
        case 'AUTH_ERROR':
          console.error('Authentication failed:', apiError.error);
          break;
          
        case 'RATE_LIMIT_ERROR':
          console.error('Rate limit exceeded:', apiError.error);
          break;
          
        case 'INVALID_PARAMS':
          console.error('Invalid parameters:', apiError.details);
          break;
          
        default:
          console.error('API error:', apiError.error);
      }
    }
    throw error;
  }
}

import { useState } from 'react';

export function PresentationGenerator() {
  const [loading, setLoading] = useState(false);
  const [url, setUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const response = await api.post('/ppt-from-text', {
        apiKey: 'ms-api-your-api-key-here',
        topic: 'Machine Learning',
        slideCount: 10
      });
      
      setUrl(response.data.url);
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Failed to generate presentation');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <button 
        onClick={handleSubmit}
        disabled={loading}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        {loading ? 'Generating...' : 'Generate Presentation'}
      </button>

      {url && (
        <a 
          href={url} 
          target="_blank" 
          rel="noopener noreferrer"
          className="text-blue-500 hover:underline"
        >
          Download Presentation
        </a>
      )}

      {error && <div className="text-red-500">{error}</div>}
    </div>
  );
}