客户服务MCP应用程序
可扩展 MCP应用程序 用于通过电子邮件通知提交客户服务工单。使用MCP Apps SDK、React和Nodemailer构建。
特性
customer_support工具 --接受客户名称、问题描述、优先级、类别和自定义字段，然后向您的支持团队发送电子邮件- 品牌化React UI --在任何MCP主机（克劳德桌面等）内渲染的抛光形式
- 可扩展配置 --交换品牌颜色、添加自定义字段、更改类别/优先级或指向不同的SMTP提供程序——所有这些都来自一个配置文件
- 优雅的回退 --未配置SMTP时，票证会记录到控制台，因此您可以在没有凭据的情况下进行开发
快速开始
# Install dependencies
npm install
# Start in development mode (auto-rebuilds on change)
npm run dev
# Or build + run once
npm startMCP服务器将在 http://localhost:3001/mcp.
配置
环境变量
复制 .env.example 到 .env 并填写您的值：
cp .env.example .env| 变量 | 描述 | 默认值 |
|---|---|---|
SMTP_HOST | SMTP服务器主机名 | smtp.gmail.com |
SMTP_PORT | SMTP服务器端口 | 587 |
SMTP_SECURE | 使用TLS(true/false) | false |
SMTP_USER | SMTP用户名/电子邮件 | -- |
SMTP_PASS | SMTP密码或应用程序密码 | -- |
SUPPORT_EMAIL | 门票收件人电子邮件 | support@example.com |
PORT | HTTP服务器端口 | 3001 |
为您的团队定制
编辑 config.ts 更改：
品牌 --名称、颜色、标志、标语：
brand: {
name: "Acme Support",
primaryColor: "#e11d48",
secondaryColor: "#be123c",
logoUrl: "https://acme.com/logo.png",
tagline: "How can we help today?",
}自定义字段 --添加电话、订单号或任何其他字段：
customFields: [
{ key: "email", label: "Email", type: "email", placeholder: "you@example.com", required: true },
{ key: "phone", label: "Phone", type: "tel", placeholder: "+1 (555) 000-0000", required: false },
{ key: "orderId", label: "Order ID", type: "text", placeholder: "ORD-XXXX", required: false },
]优先级和类别:
priorities: ["Low", "Medium", "High", "Critical"],
categories: ["Sales", "Technical", "Returns", "Other"],程序化配置
将此服务器嵌入到更大的应用程序中时：
import { createServer } from "@customer-service/mcp-app";
const server = createServer({
brand: { name: "My Company Support" },
supportEmail: "help@mycompany.com",
});建筑
├── config.ts # Extensible configuration (brand, SMTP, fields)
├── server.ts # MCP server — registers customer_support tool + UI resource
├── main.ts # Entry point — HTTP or stdio transport
├── build-server.ts # esbuild bundler for server-side code
├── mcp-app.html # HTML shell for the React UI
├── src/
│ ├── mcp-app.tsx # React UI component
│ ├── mcp-app.module.css # Scoped styles
│ └── global.css # Design tokens / CSS custom properties
├── vite.config.ts # Vite bundles UI into a single HTML file
└── .env.example # Environment variable template运作原理
- MCP主机发现
customer_support通过标准MCP工具列表 - 工具的
_meta.ui.resourceUri告诉主机获取并呈现伴随的React UI - 用户在主机的UI面板中填写品牌表单
- 提交后，React应用程序调用
app.callServerTool("customer_support", ...)哪个路由回MCP服务器 - 服务器根据票证字段编写电子邮件，并通过SMTP发送（如果未配置SMTP，则记录）
- 用户界面显示带有工单摘要的确认信息
许可证
麻省理工学院