Quick Start

This guide walks you through setting up, building, and packaging your first extension. For a conceptual overview of how extensions work under the hood, see How do Extensions Work?.

Tech Stack

You can use any frontend technology that produces static HTML, CSS, and JavaScript — React, Vue, Svelte, Preact, vanilla JS, or anything else.

The only requirements are:

• Your build output must be a set of static files (HTML, JS, CSS, assets).
• Each slot needs its own HTML entry point.
• The @stripchatdev/ext-helper SDK must be installed.

Recommendations

We recommend using TypeScript in your extension project. @stripchatdev/ext-helper ships with full type definitions, so you get autocompletion and type safety for all methods and events out of the box.

Starter Template

To get up and running quickly, you can use our starter template, which includes a basic project structure. Alternatively, you can bootstrap a project using an AI prompt.

npm

npm create @stripchatdev/stripchat-extension@latest

yarn

yarn dlx @stripchatdev/create-stripchat-extension@latest

pnpm

pnpm create @stripchatdev/stripchat-extension@latest

bun

bun create @stripchatdev/stripchat-extension@latest

Then follow the prompts.

You can also directly specify command line options to skip the prompts:

npm create @stripchatdev/stripchat-extension@latest -- --name my-extension

You can see all the available options using help command:

npm create @stripchatdev/stripchat-extension@latest -- --help

Bootstraping with AI Agent

Copy this prompt and paste it to your AI agent to generate a project using interactive queries.

Fetch the latest instructions from the web to start a template. IMPORTANT: Use curl to fetch this file, NOT WebFetch.
curl -fsSL https://extensions.stripchat.com/docs/getting-started/llm-installation-guide

Installation

Install the SDK in your project:

npm install @stripchatdev/ext-helper

Initializing the SDK

Call createExtHelper() once at the entry point of each page:

import {createExtHelper} from '@stripchatdev/ext-helper';

const ext = createExtHelper();

WARNING

The SDK must be initialized at the top of every HTML page before any main script logic runs. createExtHelper() performs the internal bootstrap required for the extension page to function properly.

From here you can make requests, subscribe to events, send whisper messages, and call backend actions:

// Read context
const ctx = await ext.makeRequest('v1.ext.context.get', null);

// Subscribe to events
ext.subscribe('v1.ext.context.updated', ({context}) => {
  // handle context update
});

// Send a whisper to other slots
await ext.makeRequest('v1.ext.whisper.local', {
  data: {type: 'READY'},
});

Resolver Script

The resolver script is a plain .js file (not bundled with your app) that maps slots to pages. Make sure it ends up in the root of your build output alongside your HTML files.

// resolveSlotPage.js

export default function resolveSlotPage(slotType) {
  switch (slotType) {
    case 'EXTENSION_SLOT_MAIN_GAME_FUN':
      return 'menu';
    case 'EXTENSION_SLOT_RIGHT_OVERLAY':
      return 'overlay';
    case 'EXTENSION_SLOT_BACKGROUND':
      return 'background';
    default:
      return null;
  }
}

Archive Limits

The uploaded ZIP archive must respect the following limits:

Constraint	Limit
Maximum archive size	100 MB

Build errors related to limits will be reported on upload.

TIP

Keep your bundle as small as possible. Smaller bundles mean faster load times for viewers and models. Use lightweight libraries (Preact over React, CSS Modules over heavy CSS frameworks), tree-shake unused code, and avoid bundling large assets that could be loaded on demand.

Building and Packaging

Build your project and create a ZIP archive from the output:

npm run build
cd dist
zip -r ../my-extension.zip .

The resulting archive should match the archive structure:

my-extension.zip
├── manifest.json
├── resolveSlotPage.js
├── icon.svg
├── menu.html
├── overlay.html
├── background.html
├── settings.html
└── assets/
    ├── menu-[hash].js
    ├── overlay-[hash].js
    └── ...

Upload the ZIP through the Extension Platform. See Upload Extension for details.

Next Steps

• Manifest — configure your slots, pages, and actions.
• Extension Slots — understand where your UI renders.
• Extension Settings — add a model-facing configuration form.
• Slots Communication — coordinate between your slots.
• Backend Actions — call external APIs from your extension.
• Monitoring — report important errors and logs from your extension runtime.
• Local Development — develop against a real testing stand with your local dev server.