Embroker MCP App

Embroker保险MCP应用程序

使用以下工具构建的交互式保险范围选择工具 模型上下文协议（MCP） 应用软件开发工具包。该应用程序与Claude Desktop集成，通过对话界面帮助用户发现和选择合适的商业保险范围。

______________________________________________________________________

目录

• 什么是MCP？
• 此应用程序的工作原理
• 安装
• 测试应用程序
• 项目结构
• 进行UI更改
• 配置MCP工具
• 分布
• 故障排除

______________________________________________________________________

什么是MCP？

模型上下文协议（MCP） 是一种允许AI助手（如Claude）连接到外部工具和服务的协议。将其视为一种通过自定义功能扩展Claude功能的方法。

MCP的工作原理

┌─────────────────────────────────────────────────────────────────┐
│                         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            │
└─────────────────────────────────────────────────────────────────┘

关键概念

______________________________________________________________________

此应用程序的工作原理

工具： show_coverage_selection

此应用程序注册了一个工具，该工具：

1. 接受公司信息 （名称、行业、资金状况等）
2. 返回个性化覆盖选项 基于业务类型
3. 显示交互式UI 用于选择保险范围
4. 重定向到Embroker注册 带有预填数据

业务逻辑

触发工具

Claude根据其描述决定何时使用该工具。当用户说出以下内容时：

• “我需要商业保险”
• “我的创业公司需要什么保险？”
• “帮我为我的律师事务所找到保险”

Claude认识到这与工具的目的相匹配，并启动了流程。

______________________________________________________________________

安装

先决条件

• v18或更高版本
• 克劳德桌面版 已安装应用程序

步骤1：克隆存储库

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

步骤2：安装依赖项

npm install

步骤3：构建用户界面

npm run build:ui

步骤4：配置Claude桌面

打开或创建Claude Desktop配置文件：

# 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

添加MCP服务器配置：

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

重要提示： 替换 /FULL/PATH/TO/ 了解项目的实际路径。

步骤5：重新启动克劳德桌面

完全退出Claude Desktop（Cmd+Q）并重新打开。

第六步：测试

开始一段新的对话，然后说：

“我需要为我资助的名为Acme Corp的科技初创公司购买保险”

Claude应该调用该工具并显示覆盖选择UI。

______________________________________________________________________

测试应用程序

选项1：克劳德桌面

安装后，只需与Claude讨论商业保险需求即可。

选项2：基本主机（开发）

为了在开发过程中更快地迭代：

终端1-启动服务器：

cd embroker-mcp-app
npm run start

终端2-启动测试主机：

# 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

打开http://localhost:8080并使用JSON输入进行测试：

{"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

______________________________________________________________________

进行UI更改

UI是用React构建的，并使用Vite捆绑到一个HTML文件中。

步骤1：编辑React组件

打开 src/mcp-app.tsx 并做出改变。关键部分：

// 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.
}

步骤2：编辑覆盖率数据

要修改覆盖范围选项，请编辑 src/coverage-data.ts:

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
];

步骤3：编辑样式

全球风格流行 src/global.css:

/* 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;
  }
}

步骤4：重建

更改后，重建UI：

npm run build:ui

第五步：测试

• 克劳德桌面： 重新启动应用程序以加载更改
• 基本主机： 刷新浏览器

______________________________________________________________________

配置MCP工具

更改工具架构

该工具的输入模式决定了Claude收集的数据。编辑 server.ts:

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)")

更改工具说明

工具描述决定 当 Claude使用该工具：

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."

______________________________________________________________________

分布

当前限制

MCP工具必须 手动安装 每个用户。目前还没有“应用商店”。

分销选项

发布到npm

1. 更新 package.json 使用您的包名称
2. 跑 npm publish
3. 然后，用户可以安装：

   npm install -g embroker-mcp-app

托管部署

将服务器部署到云提供商（Vercel、Railway、Fly.io等）：

1. HTTP传输已配置(/mcp 端点）
2. 用户将您的托管URL添加到他们的Claude配置中：

   {
     "mcpServers": {
       "embroker": {
         "url": "https://your-deployed-server.com/mcp"
       }
     }
   }

______________________________________________________________________

故障排除

工具未出现在Claude中

1. 检查配置文件路径是否正确
2. 验证中的完整路径 args 是绝对的
3. 完全重新启动克劳德桌面（Cmd+Q）
4. 检查日志：

   cat ~/Library/Logs/Claude/mcp*.log

更改后UI不更新

1. 跑 npm run build:ui 更改后
2. 重新启动克劳德桌面
3. 如果使用基本主机，请清除浏览器缓存

服务器错误

检查MCP服务器日志：

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

常见问题

______________________________________________________________________

脚本参考

______________________________________________________________________

许可证

麻省理工学院

______________________________________________________________________

链接

• MCP协议文件
• MCP应用软件开发工具包
• 经纪人