JSON Canvas MCP App

JSON画布MCP应用程序

在代码块之外思考。


这是一个用于MCP主机的开源、黑曜石风格的JSON Canvas应用程序，可帮助您在实施之前设计架构和产品流程，而无需离开Claude、chatGpt或任何支持MCP应用程序的地方。

为什么存在

• 大多数代理工作流程从聊天到文档，再到白板，然后再返回。
• 架构决策在纯文本线程中丢失。
• 团队需要一个共享的可视化工件，可以随着代码的发展而发展。

该应用程序通过将JSON Canvas转换为MCP的一流上下文规划界面来解决这个问题。

你可以绘制什么

• 系统架构和服务边界
• API和数据流
• 产品用户故事图和旅程阶段
• 将设计决策与实施任务联系起来的交付计划

看实际效果

示例：渲染 sample-flow.canvas 随着 render_json_canvas.

MCP app rendering sample flow canvas

示例：产品用户故事图/客户旅程流程。

MCP app rendering product user story map flow

示例：架构流程图。

MCP app rendering architecture flow diagram

运作原理

• MCP服务器公开 render_json_canvas.
• 应用程序UI被注册为MCP资源并在主机中呈现。
• 工具响应返回 structuredContent 因此，主机可以在画布上内联显示和迭代。

Claude/Codex中的典型工作流程

1. 要求模型为架构或产品流创建或优化JSON Canvas。
2. 呼叫 render_json_canvas 对结果进行目视检查和讨论。
3. 迭代节点、链接和结构，直到计划实现就绪。
4. 将画布部分转换为编码任务，并在不丢失上下文的情况下执行。

项目结构

• server.ts：带应用程序资源+工具注册的MCP stdio服务器
• server-http.ts：流式HTTP MCP传输
• src/mcp-app.ts：呈现画布视图的宿主UI应用程序
• vite.config.ts：为嵌入式应用程序包构建输出

安装

npm install
npm run build

持续集成

GitHub Actions在pull请求和推送上运行 main 与：

• npm ci
• npm run typecheck
• npm run build
• npm run ci:smoke （启动HTTP传输并检查 /health)

推荐的分支保护：

• 要求 CI / quality 合并前检查 main.

跑

本地stdio传输：

npm run serve

HTTP传输：

npm run serve:http

MCP HTTP端点： http://localhost:3001/mcp

MCP工具合同

工具名称： render_json_canvas

输入：

• canvas：JSON对象或JSON字符串（必填）
• attachmentDir：附件节点的相对/绝对路径（可选）
• theme: light | dark （可选）