What you will build

By the end of this tutorial, your SaaS will have a simple “Generate presentation” feature with this flow:

1. A user enters a presentation brief in your app.
2. Your frontend sends the brief to your own backend.
3. Your backend authenticates with Presenton and starts an asynchronous generation job.
4. Your backend checks the task status until it is completed or error.
5. Your UI displays the finished download and editing links.

This architecture protects your secret key, avoids tying up a browser request while slides are being created, and gives you a clean place to add usage limits, billing, retries, logging, and moderation.

Why add a presentation API to your SaaS?

Presentation generation is valuable when your product already contains information that users repeatedly turn into decks. A CRM can create personalized sales proposals. An analytics product can turn dashboard data into an executive report. A learning platform can create lesson slides. A research tool can transform a brief and approved sources into a reviewable presentation.

Presenton provides the presentation-specific production layer: outline generation, layout selection, text and visual generation, templates, and export. Its Cloud API supports synchronous and asynchronous generation, editable output, templates, themes, uploaded source files, web search, and structured JSON workflows. The Presenton API Playground is useful for testing prompts and copying a working request before writing application code.

Recommended architecture

User browser
    │  POST /api/presentations
    ▼
Your SaaS backend ── Bearer API key ──► Presenton Cloud API
    │                                      │
    │  job ID                              │ creates deck
    ▼                                      ▼
Your database / queue ◄── status + result URLs
    │
    └──► Frontend shows progress, download, and edit links

Do not call Presenton directly from browser JavaScript. Any key shipped to the browser can be copied and abused. Your backend should be the only component that sends the Authorization: Bearer ... header.

Prerequisites

• A Presenton Cloud account and API key
• Node.js 18 or newer, which includes the global fetch API
• A small Express application or an equivalent server-side endpoint
• A frontend where users can submit a brief and see job status

You can also self-host Presenton when you need infrastructure control, custom model providers, or local processing. The code below targets Presenton Cloud because it is the fastest route for a SaaS integration.

Define the product contract before writing code

Decide what your user supplies and what your application controls. A good first version asks for only the information that meaningfully changes the deck:

• Brief: topic, source facts, and desired outcome
• Audience: investors, customers, leadership, students, or another group
• Slide count: apply a sensible product-level range
• Output: PPTX for editing, PDF for fixed sharing, or PNG for images
• Style: template, tone, verbosity, and visual direction

Keep branding, template IDs, default language, and safety rules on the server. This produces consistent results and prevents users from sending unsupported or expensive parameters.

Create and protect your Presenton API key

Create an API key from your Presenton account, then store it as a secret in your deployment platform. A key normally begins with sk-presenton-.

# .env — never commit this file
PRESENTON_API_KEY=sk-presenton-replace_me
PRESENTON_API_BASE_URL=https://api.presenton.ai

Add .env to .gitignore. In production, use the secret manager provided by your hosting platform. Rotate keys periodically and immediately replace a key if it appears in a log, screenshot, frontend bundle, or public repository.

Run one synchronous smoke test

Before adding queues or UI state, verify your credentials and request body with one small synchronous call:

curl -X POST https://api.presenton.ai/api/v3/presentation/generate   -H "Authorization: Bearer $PRESENTON_API_KEY"   -H "Content-Type: application/json"   -d '{
    "content": "Create a customer-facing product overview for a B2B analytics SaaS. Explain the problem, workflow, three benefits, proof points, and next step.",
    "n_slides": 7,
    "instructions": "Use one clear takeaway per slide and concise executive language.",
    "tone": "professional",
    "verbosity": "concise",
    "image_type": "stock",
    "language": "English",
    "standard_template": "general",
    "generation_mode": "standard",
    "include_title_slide": true,
    "include_table_of_contents": false,
    "export_as": "pptx"
  }'

A successful synchronous response includes a presentation_id, a downloadable path, an edit_path for the Presenton editor, and credit usage information. Synchronous generation is convenient for testing, scripts, and small internal workflows. For a customer-facing SaaS, use the asynchronous flow because generation can take roughly one to two minutes depending on slide count and complexity.

Create a secure asynchronous generation endpoint

Install Express and dotenv:

npm install express dotenv

Create server.js:

require("dotenv").config();
const express = require("express");

const app = express();
app.use(express.json({ limit: "1mb" }));

const PRESENTON_BASE_URL =
  process.env.PRESENTON_API_BASE_URL || "https://api.presenton.ai";
const PRESENTON_API_KEY = process.env.PRESENTON_API_KEY;

if (!PRESENTON_API_KEY) {
  throw new Error("PRESENTON_API_KEY is not configured");
}

app.post("/api/presentations", async (req, res) => {
  const prompt = String(req.body.prompt || "").trim();
  const requestedSlides = Number(req.body.slides || 8);
  const slides = Math.min(Math.max(requestedSlides, 3), 20);

  if (prompt.length < 20) {
    return res.status(422).json({
      error: "Please provide a more detailed presentation brief."
    });
  }

  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 15000);

  try {
    const response = await fetch(
      PRESENTON_BASE_URL + "/api/v3/presentation/generate/async",
      {
        method: "POST",
        headers: {
          "Authorization": "Bearer " + PRESENTON_API_KEY,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          content: prompt,
          n_slides: slides,
          instructions:
            "Create a coherent, customer-ready deck with one main idea per slide.",
          tone: "professional",
          verbosity: "concise",
          web_search: false,
          image_type: "stock",
          language: "English",
          standard_template: "general",
          generation_mode: "standard",
          include_table_of_contents: false,
          include_title_slide: true,
          export_as: "pptx",
          trigger_webhook: false
        }),
        signal: controller.signal
      }
    );

    const result = await response.json();

    if (!response.ok) {
      console.error("Presenton generation failed", response.status);
      return res.status(502).json({
        error: "Presentation generation could not be started."
      });
    }

    // Save result.id against the authenticated user in your database.
    return res.status(202).json({
      jobId: result.id,
      status: result.status || "pending"
    });
  } catch (error) {
    console.error("Presenton request error", error.name);
    return res.status(502).json({
      error: "The presentation service is temporarily unavailable."
    });
  } finally {
    clearTimeout(timeout);
  }
});

The 15-second timeout covers only the request that creates the background task; it does not limit presentation generation. Also notice that raw upstream error bodies are not sent to the browser. They can contain implementation details that should remain in server logs.

Add a backend status endpoint

Presenton returns a task ID immediately. Your backend can check it with GET /api/v3/async-task/status/{id}. Add this route below the generation endpoint:

app.get("/api/presentations/:jobId", async (req, res) => {
  const jobId = String(req.params.jobId || "");

  // In production, verify that this job belongs to the signed-in user.
  if (!/^[a-zA-Z0-9_-]+$/.test(jobId)) {
    return res.status(400).json({ error: "Invalid job ID." });
  }

  try {
    const response = await fetch(
      PRESENTON_BASE_URL +
        "/api/v3/async-task/status/" + encodeURIComponent(jobId),
      {
        headers: {
          "Authorization": "Bearer " + PRESENTON_API_KEY
        }
      }
    );

    const result = await response.json();

    if (!response.ok) {
      return res.status(502).json({ error: "Could not read job status." });
    }

    return res.json({
      status: result.status,
      data: result.status === "completed" ? result.data : null,
      error: result.status === "error" ? "Generation failed." : null
    });
  } catch (error) {
    return res.status(502).json({ error: "Status service unavailable." });
  }
});

app.listen(3000, () => {
  console.log("SaaS API listening on http://localhost:3000");
});

The documented task states are pending, completed, and error. When the job completes, the response’s data object contains the presentation result. Store the job ID, user ID, timestamps, status, and resulting presentation ID in your own database so users can safely return later.

Connect a React user interface

The frontend should talk only to your endpoints. This compact component submits a brief and polls every three seconds while the job is pending:

import { useEffect, useState } from "react";

export default function PresentationGenerator() {
  const [prompt, setPrompt] = useState("");
  const [jobId, setJobId] = useState(null);
  const [job, setJob] = useState(null);
  const [loading, setLoading] = useState(false);

  async function generate(event) {
    event.preventDefault();
    setLoading(true);
    setJob(null);

    const response = await fetch("/api/presentations", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt, slides: 8 })
    });

    const result = await response.json();
    setLoading(false);

    if (!response.ok) {
      setJob({ status: "error", error: result.error });
      return;
    }

    setJobId(result.jobId);
    setJob({ status: result.status });
  }

  useEffect(() => {
    if (!jobId || job?.status !== "pending") return;

    const timer = setInterval(async () => {
      const response = await fetch(
        "/api/presentations/" + encodeURIComponent(jobId)
      );
      const result = await response.json();
      setJob(result);

      if (result.status === "completed" || result.status === "error") {
        clearInterval(timer);
      }
    }, 3000);

    return () => clearInterval(timer);
  }, [jobId, job?.status]);

  return (
    <section>
      <form onSubmit={generate}>
        <label htmlFor="brief">Presentation brief</label>
        <textarea
          id="brief"
          value={prompt}
          onChange={(event) => setPrompt(event.target.value)}
          placeholder="Audience, goal, source facts, and desired next step"
          minLength={20}
          required
        />
        <button disabled={loading}>
          {loading ? "Starting…" : "Generate presentation"}
        </button>
      </form>

      {job?.status === "pending" && <p>Building your deck…</p>}
      {job?.status === "error" && <p role="alert">{job.error}</p>}
      {job?.status === "completed" && (
        <div>
          <a href={job.data.path}>Download presentation</a>
          {job.data.edit_path && (
            <a href={job.data.edit_path}>Edit in Presenton</a>
          )}
        </div>
      )}
    </section>
  );
}

For production, stop polling when the page is hidden, use increasing intervals, and resume from the saved job when the user returns. Presenton also supports webhook-triggered workflows, which are a better fit at higher volume.

Test the complete journey

Test the integration as a user, not just as an API client:

1. Submit a clear brief and confirm that your endpoint returns HTTP 202.
2. Verify that the job remains linked to the correct tenant and signed-in user.
3. Confirm that pending UI survives a refresh or navigation.
4. Open the completed PPTX in PowerPoint and edit real text and objects.
5. Open edit_path and verify that the presentation loads in the Presenton editor.
6. Force an invalid key, timeout, and failed generation to test error handling.
7. Check usage metering before enabling the feature for every customer.

Choose the right Presenton API mode

Start with async Standard generation for the first SaaS release. Move to structured JSON when you need repeatable report layouts, and evaluate Smart Design when brand fidelity depends on an existing presentation system.

Production hardening checklist

• Authentication: Require a signed-in user for both create and status routes.
• Tenant isolation: Never let one customer query another customer’s job ID.
• Rate limits: Limit requests per user, workspace, and plan.
• Usage accounting: Reserve quota before starting a job, then reconcile after completion.
• Idempotency: Give each user action a request ID so retries do not create duplicate decks.
• Retries: Retry transient network failures with exponential backoff and jitter, but do not blindly retry validation errors.
• Observability: Log your request ID, Presenton task ID, latency, status, and result—not secret keys or sensitive source content.
• Content controls: Define allowed sources, file types, maximum input size, and web-search policy.
• URL handling: Treat result URLs as user-specific data and avoid exposing them in analytics or public logs.
• Review: Remind users to check claims, numbers, branding, and layout before sharing an AI-generated deck.

Cloud v3 and self-hosted v1: do not mix the routes

One common integration mistake is copying a self-hosted example into a Cloud project. Presenton Cloud currently uses routes such as:

POST https://api.presenton.ai/api/v3/presentation/generate
POST https://api.presenton.ai/api/v3/presentation/generate/async
GET  https://api.presenton.ai/api/v3/async-task/status/{id}

The open-source self-hosted API uses /api/v1/ppt/... endpoints on your own Presenton base URL. Request fields are also slightly different: for example, Cloud generation uses standard_template, while self-hosted examples use template. Choose one deployment mode, follow its matching reference pages, and put the base URL in configuration rather than scattering it through your code.

Common integration problems

Ideas for SaaS products

• CRM: Create account plans, proposals, and quarterly business reviews from approved customer data.
• Analytics: Turn scheduled metrics into editable leadership reports.
• Education: Generate lesson decks, review slides, and student-specific learning materials.
• Research: Convert an evidence brief into a structured presentation with source boundaries.
• Marketing: Produce campaign briefs, launch plans, and content-performance recaps.
• Agencies: Generate repeatable client deliverables through branded templates.

Build the smallest useful version first

A reliable presentation feature is more than a “prompt to PowerPoint” button. The product needs a clear input contract, protected credentials, a background-job model, ownership checks, durable status, useful errors, and a human review step.

The simplest strong starting point is: test your prompt in the API Playground, send Cloud requests from your backend, use asynchronous generation for customers, and return both the editable PPTX and Presenton editor link. From there, add templates, source-file uploads, structured JSON, webhooks, and plan-based usage controls as real customer workflows demand them.