mcp-server-chart vs domscribe
并排对比，帮你在这两个 MCP server 之间做选择。
mcp-server-chart by antvis | domscribe by patchorbit | |
|---|---|---|
| Stars | ★ 4,068 | ★ 168 |
| 30天用量 | 10,239 | — |
| 综合分 | 84 | 48 |
| 官方 | — | — |
| 分类 | AI / LLM 工具开发者工具效率工具 | 开发者工具AI / LLM 工具效率工具 |
| 实现语言 | TypeScript | TypeScript |
| 最近提交 | 本月 | 本月 |
mcp-server-chart · 概述
使用 AntV 生成 26+ 种图表的 TypeScript MCP 服务器，支持多种图表类型和部署方式。
domscribe · 概述
Domscribe 通过 MCP 桥接运行中的应用程序和源代码，使 AI 代理能够查看实时 UI 上下文并进行精准编辑。
mcp-server-chart · 使用场景
- 数据分析师从数据集中创建可视化报告
- AI 助手根据用户请求生成自定义图表
- Web 应用通过 HTTP API 嵌入可视化功能
domscribe · 使用场景
- AI 代理通过查询源代码位置检查实时 UI 状态，理解渲染的组件
- 开发者指向 UI 元素并用普通英语描述更改，由 AI 实施
- 跨框架开发，在热重载过程中提供稳定的 DOM 到源映射
mcp-server-chart · 安装
安装
全局安装：
npm install -g @antv/mcp-server-chart对于桌面应用（如 Claude Desktop、VSCode）：
{
"mcpServers": {
"mcp-server-chart": {
"command": "npx",
"args": ["-y", "@antv/mcp-server-chart"]
}
}
}Windows 系统：
{
"mcpServers": {
"mcp-server-chart": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
}
}
}domscribe · 安装
使用设置向导安装：
npx domscribe init这将引导您连接编码代理并添加到应用中。手动设置步骤：
- 添加到打包器/框架（以 React 与 Vite 为例）：
npm install -D @domscribe/react// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { domscribe } from '@domscribe/react/vite';
export default defineConfig({
plugins: [react(), domscribe()],
});- 连接您的编码代理（以 Claude Desktop 为例）：
添加到 Claude 的 config.json：
{
"mcpServers": {
"domscribe": {
"command": "npx",
"args": ["domscribe", "mcp"]
}
}
}