Ask User MCP App

An MCP App that enables AI agents to ask users multiple questions with tab-based navigation, multiple-choice options, multi-select support, and custom text input - all rendered inline in the conversation.

Features

• Multi-Question Tabs: Ask multiple questions at once, displayed as navigable tabs
• Keyboard Navigation: Tab/Shift+Tab to navigate tabs, Arrow keys for options, Enter to select/submit
• Next/Submit Button: Each question has a Next button to advance to the next tab (or "Review & Submit" on the last question)
• Multiple Choice Questions: Present 2-4 options per question
• Single & Multi-Select: Support both radio-button style (single) and checkbox style (multi) selection
• Custom "Other" Input: Optional text input for answers not covered by predefined options
• Skip Questions: Non-required questions can be skipped
• Theme Support: Automatically adapts to host's light/dark theme
• Dual Transport: Works with both HTTP (web clients) and stdio (desktop clients)

Installation in Claude.ai (Hosted)

Use the hosted MCP server directly with Claude's connector feature:

1. Open Claude.ai and go to Settings → Connectors
2. Click Add custom connector and enter:
   • Remote MCP server URL: https://ask-user-mcp-app-seven.vercel.app/mcp

Browse the hosted landing page at ask-user-mcp-app-seven.vercel.app for a quick overview of the tool schema and install steps. 3. Save and start a new conversation

The ask_user tool will now be available to Claude.

Installation

Or clone and build locally:

git clone https://github.com/anthropics/ask-user-mcp-app
cd ask-user-mcp-app
npm install
npm run build

Usage

Local Development (stdio)

Build and run locally with Claude Desktop:

# Clone and build
git clone https://github.com/anthropics/ask-user-mcp-app
cd ask-user-mcp-app
npm install
npm run build

Add to your claude_desktop_config.json (use the absolute path to your clone):

{
  "mcpServers": {
    "ask-user": {
      "command": "node",
      "args": ["/absolute/path/to/ask-user-mcp-app/dist/main.js", "--stdio"]
    }
  }
}

Tool Schema

The ask_user tool accepts a questions array containing one or more questions to display as tabs:

Top-Level Parameters

Question Object Parameters

Example Tool Call

{
  "name": "ask_user",
  "arguments": {
    "questions": [
      {
        "question": "Which frontend framework would you like to use for this project?",
        "header": "Framework",
        "options": [
          { "label": "React", "value": "react", "description": "Popular library with component-based architecture" },
          { "label": "Vue", "value": "vue", "description": "Progressive framework for simplicity" },
          { "label": "Svelte", "value": "svelte", "description": "Compiler-based, highly optimized" }
        ],
        "required": true
      },
      {
        "question": "How should we handle authentication?",
        "header": "Auth Method",
        "options": [
          { "label": "OAuth 2.0", "value": "oauth", "description": "Industry standard, supports SSO" },
          { "label": "JWT", "value": "jwt", "description": "Stateless, good for APIs" },
          { "label": "Session-based", "value": "session", "description": "Traditional, server-side state" }
        ]
      },
      {
        "question": "Which testing frameworks should we include?",
        "header": "Testing",
        "options": [
          { "label": "Jest", "value": "jest", "description": "Popular testing framework" },
          { "label": "Vitest", "value": "vitest", "description": "Fast, Vite-native testing" },
          { "label": "Playwright", "value": "playwright", "description": "E2E testing" }
        ],
        "multiSelect": true
      }
    ]
  }
}

Response Format

When the user submits their answers, the response is formatted as:

Which frontend framework would you like to use for this project? -> React
How should we handle authentication? -> JWT
Which testing frameworks should we include? -> Vitest, Playwright

Keyboard Navigation

Development

Commands

Testing Locally

1. Start the server:

   npm start
   

2. Use the basic-host from the ext-apps repo:

   cd ext-apps/examples/basic-host
   SERVERS='["http://localhost:3001/mcp"]' npm start
   

3. Open http://localhost:8080 and test the ask_user tool

Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Host Client   │────▶│   MCP Server    │────▶│    React UI     │
│ (Claude, etc.)  │     │  (server.ts)    │     │  (mcp-app.tsx)  │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
        │  Tool call with       │  Serves bundled       │
        │  ui/resourceUri       │  HTML via resource    │
        │                       │                       │
        └───────────────────────┴───────────────────────┘
                    postMessage communication

Key Files

• server.ts: Registers the ask_user tool and ui:// resource
• main.ts: Entry point supporting HTTP and stdio transports
• mcp-app.tsx: React UI with multi-question state management
• vite.config.ts: Bundles UI into single HTML file via vite-plugin-singlefile

UI Components

Design System

The UI uses a warm, Claude-native color palette for seamless integration:

• Surfaces: Warm cream backgrounds (#faf8f5, #f5f1eb)
• Accent: Terra cotta (#c4704b) for selections and CTAs
• Text: Warm gray hierarchy with subtle undertones
• Interactions: Smooth 150ms transitions, focus rings, hover states
• Dark mode: Full support with warm dark palette

Navigation Hooks

Dependencies

• @modelcontextprotocol/ext-apps - MCP Apps SDK
• @modelcontextprotocol/sdk - Core MCP SDK
• react / react-dom - UI framework
• express / cors - HTTP server
• zod - Schema validation
• tailwindcss - Styling

License

MIT