TypeScript/JavaScript Examples

Installation

First, install Axios to make HTTP requests:

npm install axios

API Client Setup

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);
  }
);

Generate from Topic

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;
  }
}

Generate from Summary

async function generateFromSummary() {
  try {
    const response = await api.post('/ppt_from_summery', {
      msSummaryText: 'Your detailed summary text here...',
      email: 'your-email@example.com',
      accessId: 'your-access-id',
      slideCount: 8
    });

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

Generate from YouTube

async function generateFromYouTube() {
  try {
    const response = await api.post('/ppt_from_youtube', {
      youtubeURL: 'https://www.youtube.com/watch?v=example',
      email: 'your-email@example.com',
      accessId: 'your-access-id',
      slideCount: 15
    });

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

Error Handling

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;
  }
}

React Integration

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_topic', {
        topic: 'Machine Learning',
        email: 'your-email@example.com',
        accessId: 'your-access-id',
        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>
  );
}