MCP Agentic Ui

窗格

AI代理的视觉交流渠道。代理可以显示图表、请求结构化输入，并在整个对话过程中保持视觉状态，而不是只显示文本响应。

Demo

入门指南

需要 包子 （用于TypeScript执行）

克劳德密码（30秒）

claude mcp add pane -- bunx @zabaca/pane

光标

添加到光标MCP设置(~/.cursor/mcp.json 或通过设置>MCP）：

{
  "mcpServers": {
    "pane": {
      "command": "bunx",
      "args": ["--bun", "@zabaca/pane"]
    }
  }
}

然后重新启动Cursor。

使用窗格

打开 http://localhost:3000 问你的AI：

*“使用窗格响应”*

就是这样！

______________________________________________________________________

建筑

Claude Code  MCP Server  Vue Frontend
                            |
                        XState Machine
                        (holds state)

特性

• 文本和Markdown显示 -内容丰富，支持Mermaid图
• 用户输入表单 -具有各种输入类型的单字段和多字段表单
• 推送 -用户提交时自动触发（无需手动输入）
• 状态持久性 -MCP重启后的完全状态恢复
• 用户上下文 -跨交互的持久键值存储

MCP工具

发展

MCP服务器

cd mcp-server
bun run dev

前端

cd frontend
bun run dev

许可证

麻省理工学院