保险覆盖选择工具

┌─────────────────────────────────────────────────────────────────┐
│                         User Conversation                        │
│                                                                  │
│  User: "I need insurance for my tech startup"                   │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                          Claude Desktop                          │
│                                                                  │
│  1. Sees available MCP tools and their descriptions             │
│  2. Recognizes insurance-related request                        │
│  3. Gathers required info through conversation                  │
│  4. Calls the appropriate tool with collected data              │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                         MCP Server                               │
│                    (This App - embroker-mcp-app)                │
│                                                                  │
│  1. Receives tool call with parameters                          │
│  2. Processes the request                                       │
│  3. Returns result + interactive UI                             │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Interactive UI                              │
│                                                                  │
│  • Displays coverage options based on industry/funding          │
│  • User selects coverages                                       │
│  • Redirects to Embroker signup with pre-filled data            │
└─────────────────────────────────────────────────────────────────┘

git clone https://github.com/evansluccas/embroker-mcp-app.git
cd embroker-mcp-app

npm install

npm run build:ui

# macOS
open ~/Library/Application\ Support/Claude/claude_desktop_config.json

# If the file doesn't exist, create it:
mkdir -p ~/Library/Application\ Support/Claude
touch ~/Library/Application\ Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "embroker": {
      "command": "npx",
      "args": ["tsx", "/FULL/PATH/TO/embroker-mcp-app/main.ts", "--stdio"]
    }
  }
}

cd embroker-mcp-app
npm run start

# Clone the MCP Apps SDK if you haven't
git clone --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps
cd /tmp/mcp-ext-apps
npm install

# Run the basic host
cd examples/basic-host
SERVERS='["http://localhost:3001/mcp"]' npm run start

{"companyName":"Acme Corp","industry":"Software/Tech","hasFunding":true}

embroker-mcp-app/
├── package.json            # Dependencies and scripts
├── main.ts                 # Server entry point (HTTP + stdio transports)
├── server.ts               # MCP server - tool & resource registration
├── mcp-app.html            # HTML entry point for the UI
├── vite.config.ts          # Vite bundler configuration
├── tsconfig.json           # TypeScript config (React/UI)
├── tsconfig.server.json    # TypeScript config (Server)
├── dist/                   # Built files (generated)
│   └── mcp-app.html        # Bundled single-file UI
└── src/
    ├── mcp-app.tsx         # Main React component
    ├── types.ts            # TypeScript interfaces
    ├── coverage-data.ts    # Coverage definitions & business logic
    └── global.css          # Global styles

// Design tokens (colors, etc.)
const colors = {
  purple: "#6B5CE7",
  purpleLight: "#F5F3FF",
  // ... more colors
};

// Main UI component
function CoverageSelectionUI({ ... }) {
  // Header, cards, buttons, etc.
}

// Individual coverage card
function CoverageCard({ coverage, selected, onToggle }) {
  // Card layout, icon, select button, etc.
}

const softwareFundedCoverages: Coverage[] = [
  {
    id: "tech-eo",
    name: "Technology Errors & Omissions",
    description: "Covers liability claims...",
    category: "essential",
    icon: "monitor",
    iconBg: "#EDE9FE",
    iconColor: "#6B5CE7",
    commonCoverages: [
      "Errors, omissions, or misstatements",
      // ... more items
    ],
    whyYouNeedThis: [
      "It's comprehensive — two full policies in one",
      // ... more items
    ],
  },
  // ... more coverages
];

/* Button hover effect */
.select-btn:hover {
  background-color: #6B5CE7 !important;
  color: white !important;
}

/* Responsive grid */
@media (max-width: 600px) {
  .coverage-grid {
    grid-template-columns: 1fr !important;
  }
}

npm run build:ui

registerAppTool(
  server,
  "show_coverage_selection",
  {
    title: "Show Coverage Selection",
    description: "Shows the insurance coverage selection page...",
    inputSchema: {
      // Required field
      companyName: z.string().describe("The legal company name"),

      // Optional field
      website: z.string().optional().describe("Company website URL"),

      // Enum field (restricts options)
      industry: z.enum(["Software/Tech", "Law", "Healthcare"])
        .describe("Select your industry"),

      // Boolean field
      hasFunding: z.boolean().describe("Has the company raised funding?"),
    },
    _meta: { ui: { resourceUri } },
  },
  async (args) => {
    // Tool handler logic
  }
);

// Vague - Claude might not ask the right question
website: z.string().optional().describe("Website")

// Better - Claude knows exactly what to ask
website: z.string().optional().describe("The company's official website URL (e.g., https://example.com)")

description: "Shows the insurance coverage selection page for Embroker. Use this when a user needs help finding business insurance, commercial coverage, or liability protection for their company."

cat ~/Library/Logs/Claude/mcp-server-embroker.log