关键词

模型上下文接口实时UI表单输入前端后端通信状态持久化

使用说明（Markdown）

项目简介

  • Pane 是一个基于 MCP 的服务器端实现，负责向 MCP 客户端提供一致的上下文服务、工具执行、以及可渲染的 UI 状态。它通过一个状态机驱动文本/Markdown 内容的展示、处理用户输入、并通过 MCP 的工具接口暴露功能。

主要功能点

  • MCP 核心能力：能够向客户提供工具清单、当前状态、执行动作、显示输入表单以及获取用户输入，支持单字段与多字段输入。
  • 状态机驱动的 UI 渲染：使用 XState 实现的文本/Markdown 显示、历史记录、撤销、重置等功能，保证跨会话的状态恢复。
  • 用户输入与上下文：支持单字段输入以及多字段表单，输入结果可持久化至用户上下文中，并可通过工具接口查询/设置。
  • 实时前端交互：通过 WebSocket 将状态更新推送给前端 UI，前端页面通过 UI 展示和交互。
  • 静态资源与前端：内置 HTTP 服务器供前端资源访问，若部署为生产模式会提供 dist 目录中的前端静态资源。
  • 持久化与健壮性：将状态写入磁盘，支持重启后的状态恢复以及 pending 输入的持久化处理。
  • MCP 服务器（std IO 连接模式）：通过 StdioServerTransport 与 MCP 客户端建立通信，客户端可通过指定的命令与参数启动 Pane 服务端。

安装步骤

  • 需要环境：Node/TypeScript 环境，推荐使用 Bun 作为执行工具。
  • 常用步骤（简要概述，按项目实际执行即可）：
      1. 确保安装 Bun 或 Node 环境，安装依赖。
      1. 启动 MCP 服务器端（mcp-server 目录内），实现通过 stdio 的服务端连接。
      1. 单独启动前端（frontend 目录）以提供 UI；在开发模式下通过 Bun 运行前端热更新。
      1. 在 MCP 客户端配置中将 Pane 作为服务器进行注册与连接，具体配置见服务器配置项。
      1. 通过 MCP 客户端向 Pane 发送工具调用、显示文本/表单等请求，并获取响应。

服务器配置（MCP 客户端所需的配置，JSON 格式说明）

  • 配置名称：pane
  • 说明：Pane 服务端通过标准输入输出（stdio）与 MCP 客户端通信，客户端在启动 Pane 服务时需要按以下形式配置，以便正确启动和连接。
  • 参考配置（注：仅供客户端使用的示例信息，JSON 字段含义请参考注释）：请使用如下信息在客户端配置中填写 { "server_name": "pane", "command": "bunx", "args": ["--bun", "@zabaca/pane"] } 注释说明：
  • server_name: MCP 客户端识别的服务器名称，建议与仓库中服务名称保持一致（pane）。
  • command: 用于启动服务端的命令，这里使用 bunx 作为 Bun 的执行命令来启动包裹的服务端。
  • args: 命令参数，示例为将仓库包以 Bun 的运行方式加载到子进程中运行 Pane 服务端。具体参数请按客户端实际使用的执行方式配置。

基本使用方法

  • 启动与连接：配置好上述服务器信息后，MCP 客户端将以子进程形式启动 Pane 服务端并通过 stdio 进行通信。随后可以通过 MCP 的接口获取工具、执行动作、展示/提交输入等。
  • 常用操作示例（由客户端调用实现）：
    • 获取应用信息与能力列表：通过 get_app_info 或等效工具查询 Pane 的能力。
    • 获取当前状态：通过 get_current_state 获取当前状态、文本内容、可用操作等。
    • 执行动作：通过 execute_action 来 设置文本、设置 Markdown、追加文本、撤销、重置等。
    • 显示输入表单：通过 show_input_form 请求单字段输入，或者 show_multi_form 请求多字段表单。
    • 获取用户输入：通过 get_user_input LONG-POLLING 等待用户提交结果。
    • 用户上下文管理：通过 get_user_context、set_user_context、clear_user_context 进行上下文存取。
  • 访问前端 UI（若使用 Web UI）：在开发模式下通过 http://localhost:3000 访问界面，WebSocket 将持续接收状态更新。
  • 常见注意点：Pane 的状态会被持久化到磁盘，重启后可恢复历史和待输入状态；前端 UI 将通过 WebSocket 实时接收状态更新。

关键词 模型上下文接口, 实时UI, 表单输入, 前端后端通信, 状态持久化

分类ID 6

信息

分类

AI与计算

访问项目