内容
# Wire
> 图表库代理可以可靠地创建、编辑、验证和解释。
`@aigentive/wire` 是一个以 LLM 为首的图表库，具有原生 MCP 支持。它将适用于代理的图表的规范 JSON 模式与共享的 reducer、可重复使用的 Wire 原生 React 编辑器/查看器、静态 SVG/PNG/Mermaid 渲染器和 MCP 服务器配对，这样任何与 MCP 兼容的代理都可以将图表作为结构化图而非像素来创作和编辑。
## 为什么选择 Wire
LLM 和代理在处理图表时遇到困难：它们会发出几乎可以渲染的 Mermaid 代码块、容易在编辑时损坏的 JSX 树或无法修改的 PNG 图片。Wire 通过为代理提供结构化的图来解决这个问题，代理可以读取、修改、验证和重新渲染该图，并使用与 JSX 开发人员界面和 MCP 工具界面相同的规范模型。
- **规范 JSON** — `from`、`branch`、`attachedTo`、`tone`、`handles`、样式、路由和元数据语义，旨在对 LLM 无歧义。
- **共享操作** — 每个用户、托管编辑器、CLI 和 MCP 编辑流程都通过 `wire-core` 中的 `WireAction` reducer 进行。
- **React 库** — `WireEditor`、`WireViewer`、`WireCanvas`、调色板、工具栏、检查器、验证面板和 JSX 编作者。
- **LLM 友好的 React 可扩展性** — 选项目录、自定义节点卡、自定义边缘渲染器和自定义组渲染器，无需应用代码导入图形画布包。
- **静态渲染器** — SVG、PNG、Mermaid 和可选的画布适配器转换，无需将 React 引入仅限服务器的消费者。
- **MCP 服务器** — 图表 CRUD、直接操作工具、原子 `apply_actions`、资源、提示、渲染工具和 `v1_get_agent_guide`，通过 stdio 或 HTTP。
- **托管对等性** — 游乐场/编辑器使用 `@aigentive/wire-react`，存储规范 JSON，并从与 MCP 相同的模型渲染。
## 软件包
| 软件包 | 描述 |
|---|---|
| [`@aigentive/wire-core`](packages/wire-core) | 模式、验证、ID、图形归一化、布局、纯 `WireAction` reducer |
| [`@aigentive/wire-renderers`](packages/wire-renderers) | 静态渲染器和适配器：SVG、PNG 帮助程序、Mermaid、可选的画布适配器转换 |
| [`@aigentive/wire-react`](packages/wire-react) | 可重复使用的 React 编辑器/查看器组件和 JSX 编作者外观 |
| [`@aigentive/wire-mcp`](packages/wire-mcp) | MCP 服务器（stdio + 流式 HTTP） |
| [`@aigentive/wire-cli`](packages/wire-cli) | `wire` CLI（init、add、validate、export、ls） |
| [`apps/playground`](apps/playground) | 可自行托管的 Next.js 游乐场、JSON 共享 API、React 编辑器、预览/渲染服务 |
## 快速入门
```bash
# 克隆 + 安装
git clone https://github.com/aigentive/wirediagram.git
cd wirediagram
npm install
npm run build
npm test
```
### 在本地使用 MCP 服务器（stdio）
```bash
# npm 包，stdio 传输
npx -y @aigentive/wire-mcp@latest
# 或 HTTP 传输（默认端口 3860）
npx -y @aigentive/wire-mcp@latest --http
```
### 为 Claude Desktop 配置
```json
{
"mcpServers": {
"wire": {
"command": "npx",
"args": ["-y", "@aigentive/wire-mcp@latest"],
"env": {
"WIRE_STORAGE_DIR": "/绝对路径/到/图表"
}
}
}
}
```
### 使用 CLI
```bash
npm install -g @aigentive/wire-cli
wire init my-flow --template=approval-flow
wire add ai --diagram=my-flow --title="分类" --from=incoming --model=gpt-5.4-mini
wire validate my-flow
wire export my-flow --format=svg --out=my-flow.svg
wire ls
```
### 从 React 应用中使用
受控编辑器：
```tsx
import type { WireDiagram } from "@aigentive/wire-core";
import { WireEditor, WireViewer } from "@aigentive/wire-react";
import "@aigentive/wire-react/styles.css";
export function WorkflowEditor({
diagram,
onChange
}: {
diagram: WireDiagram;
onChange: (diagram: WireDiagram) => void;
}) {
return <WireEditor diagram={diagram} onChange={onChange} fitView showMiniMap />;
}
export function WorkflowPreview({ diagram }: { diagram: WireDiagram }) {
return <WireViewer diagram={diagram} fitView />;
}
```
自定义编辑器界面：
```tsx
import "@aigentive/wire-react/styles.css";
import {
WireCanvas,
WireInspector,
WirePalette,
WireProvider,
WireToolbar,
WireValidationPanel
} from "@aigentive/wire-react";
export function ProductEditor({ diagram, onChange }) {
return (
<WireProvider diagram={diagram} onChange={onChange}>
<WireToolbar />
<WirePalette />
<WireCanvas mode="edit" fitView />
<WireInspector />
<WireValidationPanel />
</WireProvider>
);
}
```
LLM 友好的自定义卡和选项：
```tsx
import "@aigentive/wire-react/styles.css";
import {
WireWorkspace,
type WireOptionCatalog
} from "@aigentive/wire-react";
const options: WireOptionCatalog = {
ai: [
{ key: "model", storage: "node", type: "select", options: ["gpt-4.1", "gpt-4.1-mini"] },
{ key: "temperature", type: "number", min: 0, max: 2, step: 0.1 }
]
};
export function AgentEditor({ diagram, onChange }) {
return (
<WireWorkspace
diagram={diagram}
onChange={onChange}
optionCatalog={options}
title="代理工作流"
subtitle={`${diagram.nodes.length} 个节点`}
/>
);
}
```
`WireWorkspace` 使用解耦的事件模型：卡片/列表点击发出 `node.inspect` 并更新选择；选项面板可以通过默认或显式 `inspectNodeId` 跟随选择，以完全控制侧边栏。
包样式表是支持的 npm 消费者样式路径；不需要对 React 包进行实用程序源扫描。
参见 [`docs/REACT_COMPONENTS.md`](docs/REACT_COMPONENTS.md)、游乐场路由 `/docs` 和游乐场路由 `/samples/agent-chain`。
JSX 编作者仍然受支持：
```tsx
import { Flow, TriggerNode, AINode, ConditionNode, ActionNode, Note } from "@aigentive/wire-react";
export function Example() {
return (
<Flow layout="LR">
<TriggerNode id="webhook" title="Webhook 触发" />
<AINode id="classify" title="分类意图" from="webhook" model="gpt-4.1" />
<ConditionNode id="route" title="路由请求" from="classify" branches={["sales", "support", "other"]} />
<ActionNode id="notify-sales" title="通知销售" from="route.sales" tone="success" />
<ActionNode id="open-ticket" title="打开工单" from="route.support" tone="warning" />
<Note id="risk" title="路由风险" attachedTo="classify">
在路由前检查置信度。
</Note>
</Flow>
);
}
```
## 架构
```
┌──────────────────────┐ ┌──────────────────────┐ ┌──────────────────────┐
│ wire-react 编辑器/UI │───▶│ wire-core │◀───│ wire-mcp (服务器) │
│ WireEditor, Canvas │ │ 模式 · 验证 │ │ 操作、渲染… │
└──────────────────────┘ │ 归一化 · 布局 │ └──────────────────────┘
│ 操作 · 减少剂 │
└─────────┬────────────┘ ▲
│ │
▼ │
┌──────────────────────┐ │
│ wire-renderers │ │
│ SVG · PNG · Mermaid │ │
└──────────┬───────────┘ │
│ │
▼ │
┌──────────────────────┐ │
│ apps/playground │────────────────┘
│ Next.js · 共享 JSON │ 预览/编辑/渲染
└──────────────────────┘
```
## 规范数据和操作
Wire JSON 是事实上的源代码。 `@aigentive/wire-react` 中的 React 画布直接从该模型渲染，并向其发出 `WireAction` 更新。
最小形状：
```json
{
"version": 1,
"id": "agent-router",
"title": "代理路由器",
"layout": "LR",
"nodes": [],
"edges": []
}
```
使用节点 `from` 进行普通连接。当连接需要稳定 ID、标签、分支、`fromHandle`、`toHandle`、样式、标签样式、路由、标记或未来边缘编辑时，请使用显式 `edges`。
所有用户可见的编辑都应成为 `WireAction` 值。直接 MCP 工具和 React 手势都映射到同一个减少器：
```text
node.add, node.patch, node.remove, node.move, node.resize
edge.connect, edge.patch, edge.disconnect, edge.remove
diagram.patch, metadata.patch, layout.apply, group.add, group.ungroup, note.add
```
对于多步骤更改，请使用 `apply_actions`，以便批处理是原子的，并且只验证一次。
## MCP 接口
Wire MCP 公开直接工具用于常见操作，以及用于任何完整减少器操作的 `apply_actions`：
```text
v1_get_agent_guide, v1_get_docs_shape
create_diagram, load_diagram, save_diagram, patch_diagram, list_diagrams
add_node, update_node, remove_node, move_node, resize_node
connect, disconnect, update_edge, remove_edge
add_note, set_layout, add_group, ungroup, patch_metadata, apply_actions
validate, get_diagram_json, render_svg, render_png, render_preview
summarize_diagram, export_mermaid
```
边缘句柄和样式是一流的：
```json
{
"diagramId": "agent-router",
"id": "route-sales",
"from": "route.sales",
"to": "notify-sales",
"label": "销售",
"fromHandle": "right",
"toHandle": "left",
"routing": "smoothstep",
"style": { "markerEnd": "arrow", "strokeWidth": 2 },
"labelStyle": { "background": "#ffffff", "fontSize": 12 }
}
```
使用 `update_edge` 通过 ID 修补显式边缘。使用 `disconnect` 进行节点 `from` 引用，使用 `remove_edge` 进行显式边缘 ID。
资源：
```text
wire://diagrams/{id}.json
wire://diagrams/{id}.svg
wire://diagrams/{id}.png
wire://diagrams/{id}.mermaid
wire://diagrams/{id}/preview
wire://templates/
wire://templates/{name}
wire://schemas/wire-diagram
```
提示：
```text
diagram_from_codebase
diagram_from_logs
diagram_from_workflow_description
review_diagram_for_clarity
simplify_diagram
```
## 托管 JSON 存储
游乐场故意简单且部署安全：
1. `WireProvider`/`WireEditor` 接收规范的 `WireDiagram`。
2. React 编辑器调度核心操作并通过 `onChange` 发出下一个图表。
3. `POST /api/share` 验证并规范化 JSON。
4. JSON 存储在 `wires/{token}.json`，其中 `token` 是内容哈希。托管游乐场存储在配置了 `TURSO_DATABASE_URL` 时使用 Turso/libSQL，在开发过程中使用本地 SQLite。仅当使用 `WIRE_CLOUD_BACKEND=blob` 显式选择时，才使用 Vercel Blob。
5. 经过身份验证的共享会生成单独的随机视图/编辑令牌。
6. `/s/{viewToken}` 渲染公共只读 HTML，`/s/{viewToken}.svg`、`.png`、`.json` 和 `.mmd` 返回原始的可嵌入资产。
7. `/e/{editToken}` 在存在编辑范围共享时公开公共编辑。
对于生产环境下的多用户托管应用，请在稳定 ID 后保留 JSON 块修订版：
```text
diagrams(id, workspace_id, title, current_revision_id, updated_at)
diagram_revisions(id, diagram_id, blob_key, content_hash, parent_revision_id, created_by, created_at)
```
保存应采用 `expectedRevision`，写入新的 JSON 块，插入修订版，更新 `current_revision_id`，并在不覆盖过时工作之前返回冲突。
## 部署
- **本地（stdio）** — 捆绑的 MCP 服务器与 Claude Desktop、Cursor、Claude Code 或另一个本地 MCP 客户端一起运行。
- **本地（HTTP）** — `wire-mcp --http` 用于网络客户端在 `:3860`。
- **本地（Docker Compose）** — MCP 在 `http://localhost:3860/mcp`，游乐场/编辑器在 `http://localhost:3870`，使用本地卷进行图表和共享令牌。
- **云（Docker）** — 多阶段 `Dockerfile` 将 MCP 部署到 Fly、Render、Cloud Run 或 Kubernetes；持久卷在 `/data/diagrams`。
- **云（Vercel）** — `apps/playground` 是一个 Next.js React 编辑器、JSON 共享 API 和渲染器/预览表面，可作为 Vercel 应用部署，带有 Turso/libSQL 存储。
运行完整的本地 Docker 堆栈：
```bash
docker compose up -d --build
# MCP： http://localhost:3860/mcp
# 游乐场： http://localhost:3870
```
参见 [DEPLOY.md](docs/DEPLOY.md)，获取本地 Docker、HTTP 和自行托管的 Vercel 部署说明。
## MCP 客户端设置
Wire 与任何与 MCP 兼容的客户端一起工作。通常的本地设置是一个名为 `wire` 的_stdio_服务器：
```yaml
mcpServers:
wire:
command: npx
args:
- -y
- @aigentive/wire-mcp@latest
env:
WIRE_STORAGE_DIR: ${HOME}/Documents/wire-diagrams
WIRE_PREVIEW_BASE: http://localhost:3870
```
对于身份验证的云同步，从 **Wires -> Connect local MCP** 生成 API 密钥并添加：
```yaml
env:
WIRE_CLOUD_URL: https://wire.example.com
WIRE_CLOUD_API_KEY: PASTE_WIRE_CLOUD_API_KEY
```
配置云同步后，`render_preview` 返回托管的 Wire Cloud URL：公共视图、可选编辑、SVG、PNG、JSON、Mermaid 和工作区链接。客户不需要本地游乐场。`render_svg` 和 `render_png` 仍然直接从 MCP 服务器返回内联资产。
一些客户端将工具公开为裸 MCP 名称，例如 `create_diagram`；其他客户端则使用服务器名称前缀工具，例如 `wire__create_diagram` 或 `mcp__wire__create_diagram`。有关 stdio、HTTP、工具前缀、资源和提示的完整设置示例，请参见 [MCP_CLIENTS.md](docs/MCP_CLIENTS.md)。
## 示例
- [`examples/agent-router.json`](examples/agent-router.json) — webhook → 分类 → 路由
- [`examples/refund-approval.json`](examples/refund-approval.json) — 阈值门控退款，带有人工干预
- [`examples/rag-pipeline.json`](examples/rag-pipeline.json) — RAG，带有自我批评 + 重试循环
## 许可证
Apache-2.0 — 参见 [LICENSE](LICENSE)。
MCP 配置
以下是此 MCP Server 的配置信息，可直接复制到 Cursor 或其他 MCP 客户端中使用。
mcp.json
连接信息
猜你喜欢
暂无推荐服务器