@creativekit/client

Browser-safe CreativeKit SDK using presigned URLs

✅ No credentials needed - talks to YOUR backend only

Quick Start

npm install @creativekit/client

import { CreativeKitClient } from "@creativekit/client";

const client = new CreativeKitClient({
  backendUrl: "/api/creatives", // YOUR backend, not CreativeKit API
});

// Upload a file
const result = await client.upload(file, "audio:podcast-aac", (progress) => {
  console.log(`${progress.percent.toFixed(1)}% - ${progress.message}`);
});

console.log("Creative:", result.id, result.status);

How It Works

1. Client → Your Backend: "Give me upload URL"
2. Your Backend → CreativeKit API: Create creative (using server SDK)
3. Client → Storage: Upload directly to presigned URL
4. Client → Your Backend: "Commit creative"

Your backend needs 5 endpoints:

• POST /api/creatives - Create and return upload URL
• POST /api/creatives/:id/commit - Commit upload
• GET /api/creatives/:id - Get status
• GET /api/creatives/:id/events - SSE stream for live updates (optional but recommended)
• GET /api/creatives/profiles - List profiles

Key Methods

// Simple upload (automatic flow)
const result = await client.upload(file, profile, onProgress);

// Manual control (advanced)
const request = await client.requestUpload(profile, metadata);
await client.uploadFile(request.uploadUrl, file, request.uploadHeaders);
await client.commit(request.creativeId);

// Stream live status updates via SSE
const stream = client.streamEvents(creativeId, {
  onUpdate: (update) => {
    console.log(`Status: ${update.status}, Progress: ${update.progress}`);
  },
  onError: (error) => console.error("Stream error:", error),
  onClose: () => console.log("Stream closed"),
});
// Later: stream.close();

// Other methods
const creative = await client.getCreative(id);
const profiles = await client.listProfiles();
client.cancelUpload();

React Example

import { CreativeKitClient } from "@creativekit/client";
import { useState, useEffect } from "react";

const client = new CreativeKitClient({ backendUrl: "/api/creatives" });

function UploadForm() {
  const [progress, setProgress] = useState(0);
  const [creativeId, setCreativeId] = useState<string | null>(null);

  const handleUpload = async (file: File) => {
    const result = await client.upload(file, "audio:podcast-aac", (p) => {
      setProgress(p.percent);
    });
    setCreativeId(result.id);
    console.log("Done!", result);
  };

  // Stream live updates after upload
  useEffect(() => {
    if (!creativeId) return;

    const stream = client.streamEvents(creativeId, {
      onUpdate: (update) => {
        console.log(`Status: ${update.status}, Progress: ${update.progress}`);
        if (update.progress) {
          setProgress(85 + update.progress * 15); // 85-100%
        }
      },
      onError: (error) => console.error("Stream error:", error),
      onClose: () => console.log("Stream closed"),
    });

    return () => stream.close();
  }, [creativeId]);

  return (
    <div>
      <input type="file" onChange={(e) => handleUpload(e.target.files![0])} />
      <progress value={progress} max={100} />
    </div>
  );
}

📖 Full Documentation

See the main SDK documentation for:

• Backend setup examples
• Complete API reference
• Full examples (Express, Next.js, NestJS)
• AWS-style pattern explanation
• Troubleshooting guide

Security

• ✅ Never accesses CreativeKit API directly
• ✅ No credentials in browser
• ✅ Only talks to YOUR backend
• ✅ You control access with your auth

License

MIT