AI导哈

客户服务工单提交应用

一个基于MCP Apps SDK构建的可扩展客户服务工单提交应用，支持电子邮件通知和自定义配置。

  • by ariroffe72
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ariroffe72/customer-service-mcp-app

使用说明

客户服务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 start

MCP服务器将在 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

运作原理

  1. MCP主机发现 customer_support 通过标准MCP工具列表
  2. 工具的 _meta.ui.resourceUri 告诉主机获取并呈现伴随的React UI
  3. 用户在主机的UI面板中填写品牌表单
  4. 提交后，React应用程序调用 app.callServerTool("customer_support", ...) 哪个路由回MCP服务器
  5. 服务器根据票证字段编写电子邮件，并通过SMTP发送（如果未配置SMTP，则记录）
  6. 用户界面显示带有工单摘要的确认信息

许可证

麻省理工学院

相关 MCP