AI导哈

可视化AI通信工具

Pane是一个可视化AI通信工具，支持图表展示、结构化输入请求和对话过程中的视觉状态维护。

  • by Zabaca
  • Vue
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 uptownhr/mcp-agentic-ui

使用说明

窗格

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

入门指南

需要 包子 （用于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 <--stdio--> MCP Server <--WebSocket--> Vue Frontend
                            |
                        XState Machine
                        (holds state)

特性

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

MCP工具

工具 说明
get_app_info 获取应用程序信息和功能
get_current_state 获取当前状态、文本和可用操作
execute_action 执行操作（set_text、set_markdown、清除、撤消、重置）
show_input_form 显示单字段输入表单
show_multi_form 显示多字段表单
get_user_input 用户输入的长轮询（在提交之前阻止）
get_user_context 获取持久用户上下文值
set_user_context 设置用户上下文值
clear_user_context 清除所有用户上下文
upload_image 上传图像（路径或base64）以在markdown中使用

发展

MCP服务器

cd mcp-server
bun run dev

前端

cd frontend
bun run dev

许可证

麻省理工学院

相关 MCP