Semiotic

官方

为 AI 辅助开发提供可验证的 React 图表生成。

分类: 开发工具第 50 / 438
Stars: ★ 2.7k 非常热门
传输方式: stdio（本地进程） · Streamable HTTP
运行环境: Node.js
凭据: 无需凭据
许可证: Apache-2.0
最近提交: 8 天前
工具数: 13

65FMRS · C

资料显示 Semiotic MCP 服务器由 nteract/semiotic 项目提供，版本为 3.8.6，支持 stdio 和 streamable HTTP。其核心价值是为 AI 辅助的 React 图表开发提供模式、推荐、诊断、修复和渲染工具；资料未提供独立安全审计结论或更广泛客户端兼容性证据。

最强项 · 文档质量 16/20 最弱项 · 可靠性 10/20

可靠性

10/20

安全与权限

12/20

维护活跃度

13/20

文档质量

16/20

安装易用性

14/20

查看各项评分依据

可靠性 10/20: 静态证据显示同时声明了 npm stdio 包和 Streamable HTTP 端点，并详细列出工具、资源和错误诊断能力，正常路径看起来可行。扣分原因是未提供服务器源代码、已提交测试或覆盖 MCP 初始化、工具列表握手及关键路径的 CI 证据，且远程端点与本地包行为的一致性无法验证；因此不超过静态评审上限12分。
安全与权限 12/20: 文档显示本地 stdio 模式不需要凭据，HTTP 模式默认绑定127.0.0.1，并提到主机允许列表；工具主要执行渲染、诊断、推荐和生成 issue URL，未见删除、支付、部署或远程命令能力。扣分原因是未提供实现代码来验证数据流、网络访问、远程端点认证、租户隔离和副作用控制；HTTP 远程服务的权限边界也不充分明确。未发现足以触发红线的证据。
维护活跃度 13/20: 有明确的3.8.6版本、Apache-2.0许可证、GitHub仓库归属、CI徽章和升级文档，表明项目具备版本化维护路径；仓库未归档且有开放问题信息。扣分原因是提供的材料没有可核验的提交历史、发布节奏、依赖更新记录、漏洞响应流程或维护者响应证据，因此不能给高分。
文档质量 16/20: README覆盖安装、客户端配置、工具参数示例、资源、提示、渲染能力、SSR、HTTP部署、限制性说明、故障诊断和替代方案，文档层次和示例较完整。扣分原因是README和manifest本身属于未经验证的声明，未提供可执行测试证据、明确的服务成本/配额、完整故障排查流程、版本兼容矩阵或远程服务数据处理说明。
安装易用性 14/20: 提供了使用npx运行stdio服务器的简短配置，也说明了HTTP模式、默认监听地址、健康端点、主机允许列表和隧道接入方式，主流 MCP 客户端的基本路径清楚。扣分原因是未给出实际连接成功的验证证据，远程部署和ChatGPT连接仍需额外隧道、HTTPS及配置；平台兼容性、Node版本和故障处理信息不足。

实测已过期收录于 2026-07-29

查看 FMRS 评分方法 →

选型与风险

适合谁

使用 React 构建数据可视化的开发者
需要网络图、实时数据或协调视图的项目
希望 AI 生成图表代码时获得模式校验和渲染证据的团队

不适合谁

只需要简单且几乎不定制的标准柱状图或折线图的项目
需要为数百万数据点提供 GPU 加速的项目
需要服务器替应用承担完整无障碍合规责任的场景

所需权限

README 声明本地 stdio 模式无需 API 密钥或身份验证。
客户端需要能够运行 npx semiotic-mcp。
使用 HTTP 或托管部署时，需要访问相应的 MCP 端点；README 还描述了主机允许列表配置。

风险与副作用

HTTP 模式默认绑定 127.0.0.1；改变主机绑定会扩大可访问范围。
README 将 ChatGPT Apps 支持标为实验性功能。
Semiotic 提供无障碍基础设施，但应用所有者仍负责应用范围内的合规、测试和用户测试。

安装接入

准备工作

运行环境：Node.js

在支持 MCP 的客户端配置中加入提供的 stdio 配置；也可使用 HTTP 模式连接部署的 /mcp 端点。

claude_desktop_config.json

{"mcpServers":{"semiotic":{"command":"npx","args":["semiotic-mcp"]}}}

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "semiotic": {
      "command": "npx",
      "args": [
        "semiotic-mcp"
      ]
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add semiotic -- npx semiotic-mcp

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在 MCP 客户端配置中添加 {"mcpServers":{"semiotic":{"command":"npx","args":["semiotic-mcp"]}}} 后重启客户端，工具列表中应出现 renderChart、getSchema、diagnoseConfig 等工具；调用 getSchema（参数 {"component":"LineChart"}）若返回该组件的 props 模式，即说明连接成功。

常见排障

确认客户端配置使用 command 为 npx、参数为 semiotic-mcp。
renderChart 只能处理 getSchema 标记为可渲染的组件；实时图表需要浏览器或实时环境。
检查组件名称、数据形状、访问器和空数据问题，并使用 diagnoseConfig 获取修复建议。
HTTP 连接失败时检查端点的 /mcp 路径、HTTPS 隧道和 MCP_ALLOWED_HOSTS 设置。

试试这样问

连接成功后，可以直接对 AI 助手这样说：

用 getSchema 查一下 LineChart 组件需要哪些 props
这是我的销售数据 [{month:"Jan",revenue:120},{month:"Feb",revenue:180}]，用 suggestChart 推荐一个合适的图表
帮我用 renderChart 把 BarChart 渲染成 SVG，数据是 Q1:120, Q2:180, Q3:150
用 diagnoseConfig 检查一下 {component:"LineChart", props:{data:[]}} 有什么问题

工具能力 13

renderChart 只读

将可渲染的 Semiotic 图表生成静态 SVG，并返回渲染证据或带修复建议的验证错误。

renderInteractiveChart 只读

将静态数据图表生成为 ChatGPT Apps 小组件，并提供适配、缩放、数据、悬停和渲染证据控件。

getSchema 只读

返回指定组件的属性模式，或列出完整的模式目录。

suggestChart 只读

根据 1–5 个样例对象推荐图表。

suggestCharts 只读

根据有界行数据和分析意图返回排序后的图表建议、理由、注意事项、导入路径和属性。

suggestStreamCharts 只读

根据流模式、吞吐量和保留提示推荐实时图表。

suggestDashboard 只读

生成覆盖不同分析意图的多面板仪表板建议。

suggestStretchCharts 只读

根据受众画像推荐适合提升受众理解能力的图表。

展开其余 5 个工具

repairChartConfig 只读

检查请求的图表是否适合数据集，并在不适合时返回排序后的替代方案。

interrogateChart 只读

返回统计摘要和图表上下文，用于回答自然语言问题，并可选择添加标注。

diagnoseConfig 只读

检查空数据、错误维度、缺少访问器和错误数据形状等常见配置问题，并给出可操作修复。

reportIssue 只读

生成预填充的 GitHub 问题提交 URL。

applyTheme 只读

列出命名主题预设，或返回指定预设的 ThemeProvider、CSS 和令牌用法。

使用场景

让 AI 助手根据数据结构推荐图表

验证并修复 AI 生成的 Semiotic 图表配置

渲染静态 SVG 或 ChatGPT Apps 交互式图表

查询组件模式、主题和可渲染能力

支持客户端

Claude Desktop

依据项目文档列出，未经本站实测。

详细介绍

Semiotic 是 nteract 的 React 数据可视化库及 MCP 服务器，支持图表推荐、模式查询、配置诊断、修复和静态或交互式渲染。它覆盖 XY、分类、网络、地理、实时图表和协调视图，并提供机器可读模式。