Storymapper
A User Story Map and Kanban board that a human and an AI coding agent plan together in real time via MCP, with live bidirectional sync and governance enforcement.
README
Storymapper
A User Story Map + Kanban board that a human and an AI coding agent plan together — the same backlog, live, from a browser and from an MCP client.
Storymapper is one Node.js package that ships three things:
- A browser UI — a User Story Map (process steps × releases, with epics and stories in the cells), a Kanban board, plus table, dependency-graph, requirements and settings views. Plain HTML + modular JavaScript, no build step.
- An HTTP + WebSocket server — persists every project in SQLite with a full per-project revision history, and pushes changes to connected browsers within ~100 ms.
- An MCP server (stdio) — exposes ~70 tools so Claude Desktop / Claude Code can read and edit the very same data. Anything the agent does appears live in the human's browser with a highlight-and-move animation; anything the human edits flows back to the agent on its next read.
The result is a shared planning surface: the agent isn't writing to a database the human can't see — the two work the same board in real time.
Why it exists
Planning AI-assisted development breaks down when the plan lives in one place and the work in another. Storymapper makes the plan a live, bidirectional artifact:
- The agent proposes a structure — epics, stories, releases, dependencies — and you watch it appear and rearrange it by hand.
- Definition of Ready / Definition of Done are first-class and enforced. Each
project defines DoR/DoD checklists (global items + per-ticket-type overrides).
An agent cannot move a ticket to
donewhile a required DoD item is unchecked — the tool returns a structured error listing exactly what's missing. - A configurable workflow engine (Jira-style statuses, categories, named transitions with source restrictions and gates) and a Kanban board mapping (N statuses → 1 column) let you model your own process, not a fixed one.
- Every change is a revision you can inspect and restore.
Design principles
- Zero build. No bundler, no transpiler, no TypeScript. The browser loads
classical
<script src>modules; the server runs the same files under Node via a UMD wrapper. Clone and run. - One source of truth for pure logic. All domain logic (normalization,
operations, the workflow/governance engines, graph algorithms) lives in
shared/core.jsand is symlinked into the frontend and re-exported by the server — the same code runs in the browser, the HTTP server and the MCP server, with no mirror step to drift. - Raw HTTP, no framework.
http.createServer+ manual routing. Small, readable, dependency-light. - Synchronous SQLite via
better-sqlite3, atomic per-save transactions, a per-project mutex, and count-bounded revision retention. - Single-user, local-first. One person plus their agent on one machine. See the security model below.
For the full picture — layering, data model, live-sync mechanism, testing approach and deliberate non-goals — see ARCHITECTURE.md.
Requirements
- Node.js ≥ 20 (developed and tested on 20 and 22; Node 18 is end-of-life).
better-sqlite3is a native module. Prebuilt binaries cover mainstream platforms (macOS / Linux / Windows on x64 + arm64 for supported Node versions), sonpm installusually just works. On an unsupported platform/Node combination it compiles from source and needs a C/C++ toolchain (Xcode Command Line Tools,build-essential, or the Windows build tools).
Install
git clone <your-fork-url> storymapper
cd storymapper
npm install
Run the browser UI
npm start
# → http://localhost:8770/ (data in ./.storymap-data)
# → Ctrl-C to stop
Open http://localhost:8770/. The page probes /api/health on its own origin
and uses the HTTP backend automatically — no URL parameter needed. If it is
served from somewhere else it falls back to localStorage; you can pin a
specific server with ?api=<url>. The page must be served from a loopback origin
(localhost / 127.0.0.1) — file:// is not supported (see the security model).
Use it as an MCP server (Claude Desktop / Claude Code)
The same package speaks MCP over stdio.
Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"storymapper": {
"command": "node",
"args": [
"/absolute/path/to/storymapper/server/index.js", "mcp",
"--data-dir=/absolute/path/to/storymapper/.storymap-data"
]
}
}
}
Claude Code — same shape via claude mcp add or in .claude.json.
Point --data-dir at the same directory the HTTP server uses. Both processes
can run concurrently against one SQLite file (WAL mode + a busy-timeout);
the HTTP server relays every MCP write to connected browsers over WebSocket.
Only one
storymapper servermay run per data directory (a PID lock refuses a second;--forcetakes over a stale lock after a crash). The MCP process is exempt and may always share the data dir.
A companion skill (skill/SKILL.md) teaches the agent how to use the board —
the DoR/DoD contract, the workflow, when to pull vs. push. Load it into your
Claude client to get planning behaviour out of the box.
Security model (single-user, local)
Storymapper is a local single-user tool — one human plus their agent on one machine. There is deliberately no authentication layer:
- The server binds to
localhostby default. Do not expose it on a non-loopback interface (--host=0.0.0.0, a reverse proxy, a Docker port map) without putting your own authentication in front — anyone who can reach the port can read and write every project. - CORS is locked to loopback origins: cross-origin browser requests get no
Access-Control-Allow-Originand mutating methods are rejected — this stops a random website you visit from driving your local API. WebSocket upgrades are origin-checked the same way. - Served HTML carries a Content-Security-Policy; all responses send
X-Content-Type-Options: nosniff. X-Actor-*headers are attribution, not authentication — they label who did what in the revision history and are not verified.- Verified identity, remote-binding token gates and RBAC are a deliberate later
stage; the authorization seam (
server/identity.js) is already in place.
Testing
npm test # ≈1800 assertions, plain Node scripts, no test framework
The suite is a homegrown runner (tests/run.js) over tests/test-*.js: pure
unit tests, storage/mutex/revision tests, in-process and stdio MCP round-trips,
JSDOM renderer tests, and a real-server end-to-end test. CI runs it on Node 20
and 22. Tests only ever touch temporary directories — running them never
touches your data.
License
Licensed under the Apache License 2.0 — see LICENSE and NOTICE.
推荐服务器
Baidu Map
百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Playwright MCP Server
一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。
Magic Component Platform (MCP)
一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。
Audiense Insights MCP Server
通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。
VeyraX
一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。
graphlit-mcp-server
模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。
Kagi MCP Server
一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。
e2b-mcp-server
使用 MCP 通过 e2b 运行代码。
Neon MCP Server
用于与 Neon 管理 API 和数据库交互的 MCP 服务器
Exa MCP Server
模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。