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