Pane
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.
Getting Started
Requires Bun (for TypeScript execution)
Claude Code (30 seconds)
claude mcp add pane -- bunx @zabaca/pane
Cursor
Add to your Cursor MCP settings (~/.cursor/mcp.json or via Settings > MCP):
{
"mcpServers": {
"pane": {
"command": "bunx",
"args": ["--bun", "@zabaca/pane"]
}
}
}
Then restart Cursor.
Using Pane
Open http://localhost:3000 and ask your AI:
"respond using pane"
That's it!
Architecture
Claude Code <--stdio--> MCP Server <--WebSocket--> Vue Frontend
|
XState Machine
(holds state)
Features
- 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
MCP Tools
| 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 |
Development
MCP Server
cd mcp-server
bun run dev
Frontend
cd frontend
bun run dev
License
MIT