Pane

# 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](https://bun.sh)** (for TypeScript execution) ### Claude Code (30 seconds) ```bash claude mcp add pane -- bunx @zabaca/pane ``` ### Cursor Add to your Cursor MCP settings (`~/.cursor/mcp.json` or via Settings > MCP): ```json { "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 ```bash cd mcp-server bun run dev ``` ### Frontend ```bash cd frontend bun run dev ``` ## License MIT