AI导哈

JSON画布可视化工具

一个开源的JSON画布应用，用于在设计架构和产品流程时提供可视化支持，适用于MCP主机环境。

  • by josephdempsey
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 josephdempsey/json-canvas-mcp-app

使用说明

JSON画布MCP应用程序

在代码块之外思考。

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

为什么存在

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

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

你可以绘制什么

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

看实际效果

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

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

示例：架构流程图。

运作原理

  • 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 （可选）

相关 MCP