@flowcast/mcp 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +16 -0
- package/README.md +213 -0
- package/THIRD-PARTY-NOTICES +11 -0
- package/flowcast.mjs +265 -0
- package/package.json +27 -0
- package/player/_player-bundle.3d.gz.b64 +1 -0
- package/player/_player-bundle.gz.b64 +1 -0
- package/player/_player-bundle.map.gz.b64 +1 -0
- package/player/_player-bundle.min.gz.b64 +1 -0
- package/player/_player-bundle.noterm.gz.b64 +1 -0
- package/player/_player-bundle.slim.gz.b64 +1 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
FlowCast — Proprietary License (Free to Use)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 FlowCast. All rights reserved.
|
|
4
|
+
|
|
5
|
+
You are granted a non-exclusive, non-transferable, revocable license to download,
|
|
6
|
+
install, and run this software ("the Software") for personal or internal business
|
|
7
|
+
purposes, at no charge.
|
|
8
|
+
|
|
9
|
+
You may NOT: (a) redistribute, resell, sublicense, or host the Software as a service;
|
|
10
|
+
(b) modify, decompile, reverse-engineer, or create derivative works; (c) remove or
|
|
11
|
+
alter this notice. The Software is the free local client of the FlowCast service.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND. IN NO EVENT SHALL THE
|
|
14
|
+
AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM THE SOFTWARE.
|
|
15
|
+
|
|
16
|
+
Bundled third-party components are licensed separately; see THIRD-PARTY-NOTICES.
|
package/README.md
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
<h1 align="center">FlowCast</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center"><strong>Turn your AI coding agent into a producer of interactive, narrated walkthroughs.</strong></p>
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://www.npmjs.com/package/flowcast"><img alt="npm" src="https://img.shields.io/npm/v/flowcast?color=6c5ce7"></a>
|
|
7
|
+
<img alt="node" src="https://img.shields.io/node/v/flowcast?color=43a047">
|
|
8
|
+
<img alt="license" src="https://img.shields.io/badge/license-proprietary-555">
|
|
9
|
+
<img alt="MCP" src="https://img.shields.io/badge/Model_Context_Protocol-server-000">
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
FlowCast is an [MCP](https://modelcontextprotocol.io) server that renders a single,
|
|
15
|
+
**self-contained interactive HTML walkthrough** from a timeline your agent authors. Code
|
|
16
|
+
types itself out in a real editor, narration plays in sync, the camera follows the action —
|
|
17
|
+
and the whole thing is one file you can open in any browser. **No server. No build. No dependencies.**
|
|
18
|
+
|
|
19
|
+
Ask Claude (or any MCP client) *"walk me through the auth flow"* and you get back a polished,
|
|
20
|
+
scrubbable explainer instead of a wall of text.
|
|
21
|
+
|
|
22
|
+
The command is always the same — `npx` fetches and runs it locally over stdio, no global install:
|
|
23
|
+
|
|
24
|
+
```text
|
|
25
|
+
command: npx args: -y @flowcast/mcp@latest
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
See [**Add it to your agent**](#add-it-to-your-agent) for Claude Code, Claude Desktop, Codex, Cursor, Kiro, Windsurf, VS Code, and Gemini CLI.
|
|
29
|
+
|
|
30
|
+
> **Required:** every cast is narrated, so FlowCast needs a text-to-speech key — bring your own
|
|
31
|
+
> OpenAI, ElevenLabs, or Google key (see [Voice](#voice)). The software is free; you only pay your
|
|
32
|
+
> TTS provider for the audio it generates.
|
|
33
|
+
>
|
|
34
|
+
> **New here? Run `npx -y @flowcast/mcp setup`** — a one-time wizard that asks for your provider + key,
|
|
35
|
+
> validates it, saves it to `~/.flowcast/config.json`, **and offers to register FlowCast into the
|
|
36
|
+
> clients it detects** (Claude Code, Claude Desktop, Cursor, Codex, Kiro, Windsurf, Gemini CLI, VS
|
|
37
|
+
> Code). No JSON editing required.
|
|
38
|
+
|
|
39
|
+
## Add it to your agent
|
|
40
|
+
|
|
41
|
+
Most clients share one JSON config; a couple use their own format. Pick yours.
|
|
42
|
+
|
|
43
|
+
### CLI shortcuts
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
# Claude Code
|
|
47
|
+
claude mcp add flowcast -- npx -y @flowcast/mcp@latest # add -s user to enable it everywhere
|
|
48
|
+
|
|
49
|
+
# OpenAI Codex # writes ~/.codex/config.toml
|
|
50
|
+
codex mcp add flowcast -- npx -y @flowcast/mcp@latest
|
|
51
|
+
|
|
52
|
+
# Kiro
|
|
53
|
+
kiro-cli mcp add --name flowcast --command npx --args "-y" --args "@flowcast/mcp@latest" --scope workspace
|
|
54
|
+
|
|
55
|
+
# VS Code
|
|
56
|
+
code --add-mcp '{"name":"flowcast","command":"npx","args":["-y","@flowcast/mcp@latest"]}'
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**A TTS key is required** — pass it with `--env`. Claude Code: `claude mcp add flowcast --env VOICE_MODEL=openai --env OPENAI_API_KEY=sk-... -- npx -y @flowcast/mcp@latest`. Codex and Kiro take the same repeated `--env KEY=VALUE` flags.
|
|
60
|
+
|
|
61
|
+
### Standard config (most clients)
|
|
62
|
+
|
|
63
|
+
Drop this into your client's MCP config file (the `env` key holds your required TTS key — swap in your provider):
|
|
64
|
+
|
|
65
|
+
```json
|
|
66
|
+
{
|
|
67
|
+
"mcpServers": {
|
|
68
|
+
"flowcast": {
|
|
69
|
+
"command": "npx",
|
|
70
|
+
"args": ["-y", "@flowcast/mcp@latest"],
|
|
71
|
+
"env": { "VOICE_MODEL": "openai", "OPENAI_API_KEY": "sk-..." }
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
| Client | Config file |
|
|
78
|
+
|---|---|
|
|
79
|
+
| **Claude Desktop** | `claude_desktop_config.json` — Settings → Developer → Edit Config |
|
|
80
|
+
| **Cursor** | `.cursor/mcp.json` (project) or `~/.cursor/mcp.json` (global) |
|
|
81
|
+
| **Kiro** | `.kiro/settings/mcp.json` (workspace) or `~/.kiro/settings/mcp.json` (user) |
|
|
82
|
+
| **Windsurf** | `~/.codeium/windsurf/mcp_config.json` |
|
|
83
|
+
| **Gemini CLI** | `~/.gemini/settings.json` |
|
|
84
|
+
|
|
85
|
+
### Different formats
|
|
86
|
+
|
|
87
|
+
**OpenAI Codex** — `~/.codex/config.toml` (TOML; note the underscore in `mcp_servers`):
|
|
88
|
+
|
|
89
|
+
```toml
|
|
90
|
+
[mcp_servers.flowcast]
|
|
91
|
+
command = "npx"
|
|
92
|
+
args = ["-y", "@flowcast/mcp@latest"]
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
**VS Code** — `.vscode/mcp.json` uses a `servers` key (not `mcpServers`):
|
|
96
|
+
|
|
97
|
+
```json
|
|
98
|
+
{
|
|
99
|
+
"servers": {
|
|
100
|
+
"flowcast": {
|
|
101
|
+
"command": "npx",
|
|
102
|
+
"args": ["-y", "@flowcast/mcp@latest"],
|
|
103
|
+
"env": { "VOICE_MODEL": "openai", "OPENAI_API_KEY": "sk-..." }
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
> **Your TTS key goes under `env`** on the server entry (Codex TOML:
|
|
110
|
+
> `env = { VOICE_MODEL = "openai", OPENAI_API_KEY = "sk-..." }`). It's required — see
|
|
111
|
+
> [Voice](#voice) and [Configuration](#configuration).
|
|
112
|
+
|
|
113
|
+
## Why it's different
|
|
114
|
+
|
|
115
|
+
- **One file, fully interactive.** Scrub, pause, and play like a video — but it's live code in a real [CodeMirror](https://codemirror.net) editor, not a screen recording. Opens offline, in any browser.
|
|
116
|
+
- **Your model does the thinking; FlowCast does the rendering.** It runs *no LLM of its own* — your agent authors the timeline, this server turns it into a deterministic, pixel-stable cast.
|
|
117
|
+
- **Four kinds of story.** Code, whiteboard, map, and 3D — one consistent player.
|
|
118
|
+
- **Always narrated.** Every cast is voiced in sync (with matching captions) — you bring a TTS key.
|
|
119
|
+
- **Runs locally.** Rendering happens on your machine; your code never leaves it — only the short narration lines go to your chosen TTS provider.
|
|
120
|
+
|
|
121
|
+
## Try it
|
|
122
|
+
|
|
123
|
+
In any codebase, just ask:
|
|
124
|
+
|
|
125
|
+
> *"Make an interactive walkthrough of the rate-limiter in `src/middleware/`."*
|
|
126
|
+
> *"Diagram how a request flows through the system as a whiteboard cast."*
|
|
127
|
+
> *"Give me a 3D walkthrough of our Q3 revenue numbers."*
|
|
128
|
+
|
|
129
|
+
Your agent calls the matching tool and hands you a link to open.
|
|
130
|
+
|
|
131
|
+
## What it can make
|
|
132
|
+
|
|
133
|
+
| Tool | Produces |
|
|
134
|
+
|------|----------|
|
|
135
|
+
| `create_walkthrough` | **Code** — files that type out in a live editor, synced narration, precise line highlights, and a terminal panel |
|
|
136
|
+
| `create_whiteboard_walkthrough` | **Whiteboard** — animated concept maps and diagrams that draw themselves |
|
|
137
|
+
| `create_map_walkthrough` | **Map** — narrated tours over an interactive geographic map |
|
|
138
|
+
| `create_3d_walkthrough` | **3D** — 3D scenes and data stories (e.g. animated charts) |
|
|
139
|
+
|
|
140
|
+
Plus three helpers your agent uses to ship a clean result:
|
|
141
|
+
|
|
142
|
+
| Tool | Does |
|
|
143
|
+
|------|------|
|
|
144
|
+
| `check_walkthrough` | Lints a draft for quality issues (ambiguous highlights, over-long narration, …) — read-only |
|
|
145
|
+
| `revise_walkthrough` | Applies targeted fixes to a draft without re-authoring the whole timeline |
|
|
146
|
+
| `export_walkthrough` | Writes the finished `.html` to a path you choose |
|
|
147
|
+
|
|
148
|
+
## How you get the result
|
|
149
|
+
|
|
150
|
+
Every cast is returned three ways, so it works in any client:
|
|
151
|
+
|
|
152
|
+
1. **A local preview URL** — `http://127.0.0.1:7616/<id>.html` (loopback only). The most reliable way to view it with full interactivity.
|
|
153
|
+
2. **A self-contained `.html` file** — handed back as a `file://` link; open or share it.
|
|
154
|
+
3. **An MCP resource** — `ui://flowcast/<id>`, fetchable by resource-aware hosts.
|
|
155
|
+
|
|
156
|
+
## Voice
|
|
157
|
+
|
|
158
|
+
**Voice is required** — every cast is narrated, and synced captions are always shown alongside it.
|
|
159
|
+
Pick a provider with `VOICE_MODEL` and set that provider's key (bring your own). Without a configured
|
|
160
|
+
key, cast generation **fails with a clear error** — there is no silent captions-only fallback.
|
|
161
|
+
|
|
162
|
+
The easiest way to configure it is the one-time wizard:
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
npx -y @flowcast/mcp setup
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
It asks for your provider + key, validates it, saves `~/.flowcast/config.json` (owner-only), **and
|
|
169
|
+
then offers to add FlowCast to each MCP client it finds** — Claude Code, Codex, and VS Code via
|
|
170
|
+
their own `mcp add` / `--add-mcp` command, and Claude Desktop / Cursor / Kiro / Windsurf / Gemini CLI
|
|
171
|
+
by merging into their config (your existing file is backed up to `.bak` first, and every change is
|
|
172
|
+
confirmed). The server reads the saved key
|
|
173
|
+
automatically, so the registered entries hold no secrets. Prefer env? A key in your client's `env`
|
|
174
|
+
block always overrides the saved file.
|
|
175
|
+
|
|
176
|
+
| `VOICE_MODEL` | Key | Default |
|
|
177
|
+
|---|---|---|
|
|
178
|
+
| `openai` *(default)* | `OPENAI_API_KEY` | `gpt-4o-mini-tts` |
|
|
179
|
+
| `elevenlabs` | `ELEVENLABS_API_KEY` | `eleven_turbo_v2_5`, voice `ELEVENLABS_VOICE_ID` |
|
|
180
|
+
| `google` | `GOOGLE_TTS_API_KEY` | voice `GOOGLE_TTS_VOICE` (e.g. `en-US-Neural2-D`) |
|
|
181
|
+
|
|
182
|
+
```jsonc
|
|
183
|
+
"flowcast": {
|
|
184
|
+
"command": "npx", "args": ["-y", "@flowcast/mcp@latest"],
|
|
185
|
+
"env": { "VOICE_MODEL": "elevenlabs", "ELEVENLABS_API_KEY": "..." }
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Configuration
|
|
190
|
+
|
|
191
|
+
A TTS provider key is **required**; everything else is optional.
|
|
192
|
+
|
|
193
|
+
| Variable | Purpose |
|
|
194
|
+
|---|---|
|
|
195
|
+
| `VOICE_MODEL` | TTS provider: `openai` (default), `elevenlabs`, `google` |
|
|
196
|
+
| `OPENAI_API_KEY` / `ELEVENLABS_API_KEY` / `GOOGLE_TTS_API_KEY` | **Required** — the key for your chosen provider |
|
|
197
|
+
| `FLOWCAST_CONFIG_DIR` | Where the saved config lives (default `~/.flowcast`) |
|
|
198
|
+
| `FLOWCAST_OUTPUT_DIR` | Where `.html` files are written |
|
|
199
|
+
| `FLOWCAST_PORT` | Local preview port (default `7616`; next free port if taken) |
|
|
200
|
+
| `FLOWCAST_NO_HTTP` | Set to `1` to disable the local preview server |
|
|
201
|
+
| `FLOWCAST_TTS_VOICE` / `FLOWCAST_TTS_MODEL` / `FLOWCAST_TTS_INSTRUCTIONS` | Fine-tune the OpenAI voice |
|
|
202
|
+
|
|
203
|
+
## Requirements
|
|
204
|
+
|
|
205
|
+
- **Node.js ≥ 18** (`npx` handles the rest).
|
|
206
|
+
- A **TTS provider key** — OpenAI, ElevenLabs, or Google (see [Voice](#voice)). Required.
|
|
207
|
+
- An MCP client — [Claude Desktop](https://claude.ai/download), [Claude Code](https://docs.claude.com/claude-code), Cursor, or any other.
|
|
208
|
+
|
|
209
|
+
## License
|
|
210
|
+
|
|
211
|
+
**Free to use — not open source.** See [LICENSE](./LICENSE) and [THIRD-PARTY-NOTICES](./THIRD-PARTY-NOTICES).
|
|
212
|
+
|
|
213
|
+
<p align="center"><sub>Built with the Model Context Protocol · a hosted, zero-install edition is on the way.</sub></p>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
FlowCast bundles the following third-party open-source components. Their licenses
|
|
2
|
+
apply to those components only; FlowCast's own code remains proprietary.
|
|
3
|
+
|
|
4
|
+
- @modelcontextprotocol/sdk — MIT
|
|
5
|
+
- zod — MIT
|
|
6
|
+
- @dagrejs/dagre — MIT
|
|
7
|
+
- @codemirror/state — MIT
|
|
8
|
+
- @breezystack/lamejs — LGPL-3.0
|
|
9
|
+
- sharp — Apache-2.0 (bundles libvips — LGPL-3.0, dynamically linked)
|
|
10
|
+
|
|
11
|
+
Full license texts are available from each project's repository on npm/GitHub.
|