GitHub - Zabaca/pane: Visual interface for AI agents beyond text-only chat

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

License

MIT