A visual communication channel for AI agents. Instead of text-only responses, agents can show diagrams, request structured input, and maintain visual state throughout your conversation.
Requires Bun (for TypeScript execution)
claude mcp add pane -- bunx @zabaca/paneAdd to your Cursor MCP settings (~/.cursor/mcp.json or via Settings > MCP):
{
"mcpServers": {
"pane": {
"command": "bunx",
"args": ["--bun", "@zabaca/pane"]
}
}
}Then restart Cursor.
Open http://localhost:3000 and ask your AI:
"respond using pane"
That's it!
Claude Code <--stdio--> MCP Server <--WebSocket--> Vue Frontend
|
XState Machine
(holds state)
- Text & Markdown Display - Rich content with Mermaid diagram support
- User Input Forms - Single and multi-field forms with various input types
- Long-Polling - Auto-trigger when user submits (no manual Enter needed)
- State Persistence - Full state restoration across MCP restarts
- User Context - Persistent key-value storage across interactions
| Tool | Description |
|---|---|
get_app_info |
Get app info and capabilities |
get_current_state |
Get current state, text, and available actions |
execute_action |
Execute actions (set_text, set_markdown, clear, undo, reset) |
show_input_form |
Display single-field input form |
show_multi_form |
Display multi-field form |
get_user_input |
Long-poll for user input (blocks until submitted) |
get_user_context |
Get persistent user context values |
set_user_context |
Set a user context value |
clear_user_context |
Clear all user context |
upload_image |
Upload image (path or base64) for use in markdown |
cd mcp-server
bun run devcd frontend
bun run devMIT