Model Context Protocol · runs locally

Your AI agent just learned to make screencasts.

FlowCast turns your coding agent into a producer of interactive, narrated walkthroughs — diagrams that draw themselves and code that types itself out, in sync with a voice, scrubbable like video. One self-contained HTML file. No recording, no editing.

Get started See how it works npx -y @flowcast/mcp setup
making-pizza — whiteboard PLAYING
A request starts at the client…
0:020:21
What it is

Explanations that play, not paragraphs that pile up.

Ask in plain language and FlowCast hands back a polished, interactive cast — the kind of thing you'd spend an afternoon recording and editing, generated in one step.

Live, not a recording

Diagrams draw themselves and code types out in a real editor — crisp at any size, never a blurry screen capture.

Narrated & in sync

Every beat is spoken aloud and captioned, timed to the moment each shape or line appears — so it explains itself while you watch.

One portable file

Scrub, pause, replay. The whole cast is a single HTML file that opens offline in any browser — share it, embed it, keep it.


Who it's for

For anyone who'd rather show than tell.

Educators

Teach a concept as a guided, narrated build instead of a static gist.

DevRel & DX

Demo a feature or SDK with a walkthrough users can scrub at their own pace.

Maintainers

Onboard contributors — tour the codebase once, hand them a link.

Teams

Explain a PR or a system in a cast that travels better than a meeting.

How it works

Three steps. Your agent does the heavy lifting.

FlowCast is an MCP server. Once it's connected, your AI client gains tools to author and render casts.

1

Set it up

Run npx -y @flowcast/mcp setup once — the wizard saves your voice key and wires FlowCast into every AI client it finds.

2

Ask

In any codebase, just say it: “diagram how a request travels” or “walk me through the auth flow.”

3

Get your cast

Your agent authors the timeline, FlowCast renders it, and hands you a link to a self-contained interactive cast.

No LLM of its own.  Your model is the author; FlowCast is the deterministic renderer — your code stays on your machine.


Three kinds of story

One player. Whatever you're explaining.

create_whiteboard_walkthrough

Whiteboard

Concept maps and diagrams that draw themselves and connect as the story unfolds.

create_walkthrough

Code

Files that type out in a live editor with synced narration, precise highlights, and a terminal panel.

create_3d_walkthrough

3D

Three-dimensional scenes and data stories — like animated charts that build beat by beat.

Get started

Up and running in a minute.

Runs locally over npx — no install, no account.

$ npx -y @flowcast/mcp setup
# pick a voice provider, paste a key —
# then it registers FlowCast into the
# clients it detects. that's it.
saved ~/.flowcast/config.json
added to Claude Code, Cursor…
Claude Code Claude Desktop Cursor Codex Kiro Windsurf Gemini CLI VS Code
1

Add it to your client

Run the wizard, or drop one entry into your MCP config: { "command": "npx", "args": ["-y","@flowcast/mcp@latest"] }.

2

Bring a voice key

Casts are narrated, so set a TTS key from OpenAI, ElevenLabs, or Google — your own, stored locally.

3

Ask your agent

“Diagram how data flows through src/.” Open the link it returns and press play.

Read the docs on npm