Exporting Slides to PPTX

Enable users to download generated slides as PPTX files

C1 provides a dedicated API endpoint to convert any generated slide into a downloadable PPTX file. This guide covers the end-to-end process, which involves creating an API route on your backend and connecting it to the C1 frontend components.

How it Works

The PPTX export process involves two main steps and is designed to keep your API keys secure:

1. Frontend Trigger: The user initiates the export from the UI. The <C1Component> provides a exportParams string to a callback function in your code.
2. Backend Endpoint: Your frontend sends these exportParams to a dedicated endpoint on your own backend. Your backend then securely calls the C1 PPTX Export API with your API key and streams the resulting PPTX file back to the user’s browser for download.

You must create a backend endpoint. The C1 PPTX Export API should not be called directly from the frontend as it would expose your secret API key.

Implement the Backend Endpoint

Your backend needs an API route that will receive the request from your frontend, call the C1 API, and forward the PPTX response.

PPTX Export API Endpoint: POST /v1/artifact/pptx/export

app/api/export-pptx/route.ts (Next.js App Router)

TypeScript

import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const { exportParams } = await req.json();

  try {
    const pptxResponse = await fetch('https://api.thesys.dev/v1/artifact/pptx/export', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.THESYS_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ exportParams }),
    });

    if (!pptxResponse.ok) {
      throw new Error(`Failed to export PPTX: ${pptxResponse.statusText}`);
    }

    // Stream the PPTX back to the client
    return new NextResponse(pptxResponse.body, {
      headers: {
        'Content-Type': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        'Content-Disposition': 'attachment; filename="slide.pptx"',
      },
    });

  } catch (error) {
    const message = error instanceof Error ? error.message : 'An unknown error occurred';
    return NextResponse.json({ error: message }, { status: 500 });
  }
}

Implement the Frontend Handler

The <C1Component> provides an exportAsPPTX prop, which accepts a function. This function is called when the user clicks the export button in the artifact’s UI. It receives the exportParams and a suggested title for the file.

Your implementation should call your backend endpoint and use the response to trigger a file download in the browser.

import { C1Component, ThemeProvider } from "@thesysai/genui-sdk";

function ArtifactWithExport({ c1Response }: { c1Response: string }) {
  return (
    <ThemeProvider>
      <C1Component
        c1Response={c1Response}
        exportAsPPTX={handlePptxExport}
      />
    </ThemeProvider>
  );
}

const handlePptxExport = async ({ exportParams, title }: { exportParams: string, title: string }) => {
    try {
      // 1. Call your backend endpoint with the exportParams
      const response = await fetch("/api/export-pptx", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ exportParams }),
      });

      if (!response.ok) {
        throw new Error("Failed to download PPTX.");
      }

      // 2. Get the PPTX data as a blob
      const blob = await response.blob();

      // 3. Create a temporary URL and trigger the download
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      const filename = (title || 'artifact').replace(/\.pptx$/i, '');
      a.download = `${filename}.pptx`;
      document.body.appendChild(a);
      a.click();
      
      // 4. Clean up the temporary URL
      window.URL.revokeObjectURL(url);
      a.remove();

    } catch (error) {
      console.error("Export failed:", error);
      // Handle error, e.g., show a notification to the user
    }
  };

Usage with <C1Chat>

You can also enable PPTX export in a conversational context. The exportAsPPTX function can be passed via the customizeC1 prop to either <C1Chat> or the useThreadManager hook.

<C1Chat
  apiUrl="/api/chat"
  customizeC1={{
    exportAsPPTX: handlePptxExport, // Use the same handler function
  }}
/>