实体추출 MCP+Next.js Web用户界面
在对话中 AI(Claude)提取Entity然后立即连接到动作(优惠券推荐,票证发放)的系统。
主要功能
1. 基于AI的Entity提取
- API人类克劳德使用分析对话
- 自动检测对话类型(会员资格vs发货延迟)
- 准确提取信息(地点、时间、活动、订单信息等)
2. 2种使用方法
- Web UI:基于Next.js的小型界面
- 克劳德桌面:启用MCP服务器集成
3. 立即行动
- 成员资格:优惠券推荐+地图绑定+日历添加
- 发货延迟:自动发放门票+建议动作
项目结构
testEntityMCP/
├── server.py # Python MCP 서버 (Claude Desktop용)
├── requirements.txt # Python 의존성
├── pyproject.toml # Python 프로젝트 설정
├── web/ # Next.js 웹 UI
│ ├── app/
│ │ ├── page.tsx # 메인 페이지
│ │ ├── layout.tsx # 레이아웃
│ │ ├── globals.css # 글로벌 스타일
│ │ └── api/ # API 라우트
│ │ ├── extract/ # Entity 추출 (Claude API)
│ │ ├── recommend/ # 쿠폰 추천
│ │ └── ticket/ # 티켓 발급
│ ├── components/ # React 컴포넌트
│ │ ├── ConversationPanel.tsx
│ │ └── ResultPanel.tsx
│ ├── public/data/ # JSON 데이터
│ └── package.json
├── conversation.json # 멤버십 대화 1
├── conversation2.json # 멤버십 대화 2
├── delivery_delay_inquiry_conversation.json
├── membership_personas_and_partners_kr.json
└── claude_desktop_config.json # Claude Desktop 설정 예시安装和运行
基本要求
- Python 3.10+
- Node.js 18+
- 无烟煤API密钥 (使用Web UI时)
1.设置Python MCP服务器(用于Claude Desktop)
# Python 의존성 설치
pip install -r requirements.txt
# 또는 uv 사용
uv pip install -e .2.设置Next.js Web UI
# 웹 디렉토리로 이동
cd web
# 의존성 설치
npm install
# 환경 변수 설정
cp .env.local.example .env.local
# .env.local 파일을 열어서 ANTHROPIC_API_KEY 설정.env.local 文件:
ANTHROPIC_API_KEY=your-api-key3.运行Web UI
# 개발 모드
cd web
npm run dev
# 브라우저에서 열기
open http://localhost:30004.Claude Desktop MCP设置
设置文件位置:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - 视窗:
%APPDATA%\Claude\claude_desktop_config.json
添加到配置文件:
{
"mcpServers": {
"entity-extraction": {
"command": "/Users/YOUR_USERNAME/.local/bin/uv",
"args": [
"--directory",
"/Users/YOUR_USERNAME/Desktop/testEntityMCP",
"run",
"entity-extraction-mcp"
]
}
}
}重要:
YOUR_USERNAME请更改为您的用户名uv验证路径:which uv可以通过命令确认- 请将项目目录路径更改为您的实际路径
应用:
Claude桌面 完全关闭然后重新运行,MCP服务器将激活。
使用方法
使用Web UI
http://localhost:3000连接- 从左侧选择对话
- 单击“提取Entity”按钮
- 在右侧查看结果
- 点击优惠券“查看地图”或“添加日历”
使用Claude Desktop
推荐会员对话优惠券:
- 运行Claude Desktop
- 请求:
멤버십 대화 1을 읽고 장소를 추출한 다음, 쿠폰을 추천해줘Claude自动:
conversation://1读取资源并分析对话- 提取地点、时间和活动
recommend_coupons通过调用工具推荐优惠券- 以JSON格式返回结果
签发延迟发货票:
배송 지연 문의 대화를 읽고, 티켓을 발급해줘Claude自动:
conversation://delivery读取资源并分析对话- 提取订单编号、客户名称、商品、情况
issue_ticket调用工具生成票证- 返回票证ID和优先级
UI特性(极简设计)
- 两种颜色:蓝色(#2563eb)+黑色(#1f2937)
- 三级布局:
1. 选择和显示对话 1. Entity提取按钮 1. 结果&动作
- Tailwind CSS 使用
- 反应型 设计
MCP服务器功能
资源(Resources)
MCP服务器提供的对话数据:
conversation://1-会员对话1(电影&冰淇淋)conversation://2-会员对话2(学习&早午餐)conversation://delivery-联系送货延迟data://membership-会员合作伙伴信息
“工具”(Tools)
1. recommend_coupons
推荐会员优惠券
输入:
{
"places": ["강남역", "CCW 영화관"],
"times": ["토요일 4시"],
"activities": ["영화", "아이스크림"]
}输出:
{
"success": true,
"recommendedCoupons": [
{
"partnerName": "CCW 영화관",
"description": "연간 무료 3회, 1+1 9회",
"location": "신논현역 6번 출구 근처",
"mapUrl": "https://naver.me/..."
}
]
}2. issue_ticket
签发延迟发货票
输入:
{
"orderNumber": "SP20251024-1123",
"customerName": "김은지",
"product": "러닝화",
"issueSummary": "배송 예정일 경과, 미도착",
"deliveryStatus": "물류센터 대기 중",
"customerDecision": "취소 고려 중"
}输出:
{
"success": true,
"ticket": {
"ticketId": "TKT-1234567890-ABC",
"priority": "high",
"actions": [
{
"type": "offer_cancellation",
"description": "취소 절차 안내 및 환불 처리"
}
]
}
}演示剧本
方案1:Web UI-成员资格对话
- 选择对话:选择“会员对话1”
- Entity提取:Claude AI自动分析
- 地点:江南站,CCW电影院,Baskin Lalas - 时间:周六4点 - 活动:电影,冰淇淋
- 优惠券推荐:自动推荐2个
- CCW电影院(免费门票) - 维斯金·拉拉斯(50%折扣)
- 动作:查看地图→打开NAVER地图
场景2:Claude Desktop-送货延迟
请求Claude:
conversation://delivery 리소스를 읽고,
고객의 주문번호, 이름, 상품명, 배송 상태를 추출해줘.
그리고 issue_ticket 도구로 티켓을 발급해줘.Claude说:
- 对话分析
- Entity提取
issue_ticket自动调用工具- 返还票证发放结果
技术堆栈
前端
- Next.js 15 (应用路由器)
- TypeScript
- Tailwind CSS
- 反应18
后端
- Python 3.10+
- MCP-SDK (模型上下文协议)
- API人类克劳德 (十四行诗3.5)
故障射击
看不到Web UI
cd web
npm run dev
# http://localhost:3000 접속Anthropic API错误
.env.local 请确保在文件中设置了正确的API密钥。
Claude Desktop看不到MCP服务器
claude_desktop_config.json验证文件路径server.py的 绝对路径验证是否使用- 重新启动Claude Desktop
Python依赖性错误
pip install --upgrade mcp许可证
麻省理工学院
咨询
如果您有项目相关问题,请创建问题。
