Docs

Simulate a chat conversation from one JSON config — embed it live or export it to video.

Install

One package. @typecaast/react pulls in the engine, schema, and every built-in skin as regular dependencies — you never install those separately, and skins are loaded lazily per config.meta.skin.id. The only thing you provide is react (≥18), which your app already has.

# npm
npm install @typecaast/react react

# yarn
yarn add @typecaast/react react

# pnpm
pnpm add @typecaast/react react

In a monorepo, add it to the specific package that renders the component rather than the workspace root (pnpm rejects a bare add at the root):

pnpm add @typecaast/react react --filter <your-app>
# yarn workspace <your-app> add @typecaast/react react
# npm install @typecaast/react react -w <your-app>

Embed it

import { Typecaast } from "@typecaast/react";
import config from "./billing-toast.json";

// The skin comes from config.meta.skin.id (lazy-loaded). Only the serializable
// config is passed, so this works in a Server Component — no "use client".
export default () => <Typecaast config={config} autoplay loop />;

The embed owns its own playback clock and holds it across host re-renders: toggling your site's light/dark theme or any unrelated state change re-paints in place — it never restarts the conversation. Two things preserve that: keep the element mounted with a stable React key (remounting it is a fresh instance, which does start over), and pass the same config (and explicit skin, if you use one) — an inline object that is structurally identical each render is fine, since the component de-dupes it by content.

Render it to video

pnpm add -g @typecaast/cli
typecaast render billing-toast.json --aspect 9:16 --scale 2 --theme dark

The config

A versioned, Zod-validated JSON document: meta (canvas, fps, fit, theme, skin), participants, optional pacing, and a timeline of steps — message, reaction, typing, composerType, send, edit, delete, readReceipt, system, delay. Validate it with typecaast validate. Add a $schema line for editor autocomplete:

"$schema": "https://typecaast.com/schema/v1/typecaast.schema.json"

Messages auto-pace by reading time, so short messages land close together — to space them out (e.g. ~1–2s), see the pacing guide.

Authoring & editing configs

Write or change the JSON by hand — no playground required. Great for quick edits and for LLMs assembling a config in your own project.

Authoring configs by hand →
Every top-level field and timeline step type — write or edit the JSON config without the playground.
Pacing & timing →
Gaps, delays, and typing speed — including how to get ~1–2s between messages.
Message content →
Message bodies: Slack-style mrkdwn and Block Kit content nodes.

For LLMs/agents: a machine-readable index lives at /llms.txt, and the JSON Schema at /schema/v1/typecaast.schema.json.

MCP server (editors & agents)

Run @typecaast/mcp in your own editor or agent to assemble and validate configs without leaving your codebase — for example, turning a screenshot into a working config. It exposes validate_config, get_json_schema, list_skins, scaffold_config, and get_docs (the guides are also exposed as resources).

claude mcp add typecaast -- npx -y @typecaast/mcp

Setup for other MCP clients and the full tool list: @typecaast/mcp readme →