MCP Welcome Form App

What it does

Renders an interactive form inside MCP-enabled hosts — the user types a name, clicks Submit, and a personalised welcome message appears. The submitted data flows back to the AI as context, demonstrating the full MCP App round-trip: chat → tool call → UI render → user input → AI receives result.

Key features

• Interactive React UI — Form with text input and submit button, rendered inline in the conversation via iframe.
• Host-aware styling — CSS variables automatically adapt to light/dark mode based on the host theme.
• Dual transport — Runs as both stdio (Claude Desktop, VS Code) and HTTP (Claude.ai, browser testing).
• Server-side tool handler — Form submissions route through app.callServerTool() to a Node.js handler with full backend access (REST APIs, databases, file system).
• Single-file build — Vite + vite-plugin-singlefile bundles the React UI into one self-contained HTML file for easy MCP resource serving.

Installation

Claude Desktop: Add to claude_desktop_config.json:

{
  "mcpServers": {
    "welcome-form": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/mcp-apps/dist/main.js", "--stdio"]
    }
  }
}

VS Code Copilot: Add to workspace .vscode/mcp.json or global settings.json:

{
  "mcp": {
    "servers": {
      "welcome-form": {
        "type": "stdio",
        "command": "node",
        "args": ["/ABSOLUTE/PATH/TO/mcp-apps/dist/main.js", "--stdio"]
      }
    }
  }
}

Claude.ai web: Run npm run serve then tunnel with npx cloudflared tunnel --url http://localhost:3001. Add the tunnel URL as a remote MCP integration at https://random-name.trycloudflare.com/mcp.

Supported hosts

Claude Desktop, VS Code Copilot, Claude.ai (web), Goose.