使用说明
MCP聊天
由Claude AI提供支持的专业双重人格聊天界面,具有两种不同的对话模式。
特性
- 反向模式 ⚡: 用批判性思维和另类视角挑战想法
- 可接受的模式 💫: 用支持性的回应来验证和建立你的想法
- 清洁建筑:将关注点与共享类型、服务和公用事业分开
- 类型安全:具有严格类型检查的完整TypeScript实现
- 代码质量:ESLint+Prettier用于一致、可维护的代码
- 日志记录:用于调试和监控的结构化日志系统
- 错误处理:具有详细错误信息的自定义错误类
- 输入验证:用户输入的消毒和验证
- 健康检查:用于监测的内置健康端点
快速开始
1.安装依赖项
npm install
2.设置环境
cp .env.example .env
编辑 .env 并添加您的Anthropic API密钥:
ANTHROPIC_API_KEY=sk-ant-...
PORT=3001
3.启动应用程序
npm run dev
聊天界面将在以下时间打开 http://localhost:3000
建筑
项目结构
mcpchat/
├── shared/ # Shared code between frontend and backend
│ ├── constants/ # Shared constants and configuration
│ ├── types/ # TypeScript type definitions
│ └── utils/ # Shared utilities (logger, validation)
├── server/ # Backend server code
│ ├── config/ # Server configuration
│ ├── errors/ # Custom error classes
│ ├── services/ # Business logic services
│ ├── types/ # Server-specific types
│ ├── api.ts # HTTP API server
│ └── index.ts # MCP server
├── src/ # Frontend application
│ ├── config/ # Client configuration
│ ├── errors/ # Client error classes
│ ├── services/ # API communication services
│ ├── main.ts # Main application entry
│ └── styles.css # Styling
└── index.html # HTML entry point
分层体系结构
共享层:
types/-常见的TypeScript接口和类型constants/-系统提示、API配置、错误消息utils/-记录器、验证、消毒
后端层:
config/-带验证的环境配置services/-用于Anthropic API集成的人工智能服务errors/-自定义错误类(AIServiceError)api.ts-带CORS、健康检查和错误处理的HTTP服务器
前端层:
config/-客户端配置services/-用于后端通信的API服务errors/-自定义错误类(APIError)main.ts-具有事件处理功能的聊天UI应用程序
技术栈
- 运行时:Node.js 18+
- 语言:TypeScript 5.7+
- 前端:快6.0
- 人工智能:Claude 3.5 Haiku通过Anthropic API
- 主控程序:模型上下文协议SDK 1.0
- 代码质量:ESLint+Prettier
脚本
发展
npm run dev # Start both API server and client
npm run api # Start only the API server (port 3001)
npm run client # Start only the web interface (port 3000)
npm run mcp # Start the MCP server
建筑
npm run build # Build both client and server
npm run build:client # Build only the client
npm run build:server # Build only the server
npm run preview # Preview production build
代码质量
npm run validate # Run all checks (type-check + lint + format)
npm run type-check # Run TypeScript type checking
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues automatically
npm run format # Format code with Prettier
npm run format:check # Check code formatting
API终点
健康检查
GET http://localhost:3001/health
答复:
{
"status": "ok",
"timestamp": "2025-10-29T19:43:33.738Z",
"hasApiKey": true
}
聊天
POST http://localhost:3001/chat
Content-Type: application/json
{
"message": "Your message here",
"mode": "contrarian" # or "agreeable"
}
答复:
{
"response": "AI generated response"
}
配置
环境变量
ANTHROPIC_API_KEY-您的Anthropic API密钥(必需)PORT-API服务器端口(默认:3001)ANTHROPIC_MODEL-要使用的型号(默认:claude-3-5-haiku-20241022)MAX_TOKENS-每个响应的最大令牌数(默认值:300)NODE_ENV-环境模式(开发/生产)
客户端环境变量
VITE_API_URL-用于生产的API服务器URLVITE_API_PORT-API服务器端口(默认:3001)
开发指南
代码的风格
- TypeScript严格模式:所有代码都使用严格的TypeScript设置
- 导入类型:使用
import type仅用于类型导入 - 错误处理:使用具有正确错误传播的自定义错误类
- 日志记录:使用logger实用程序而不是console.log
- 验证:始终验证和净化用户输入
添加新功能
- 在中定义类型
shared/types/ - 在中添加常量
shared/constants/ - 在适当的服务文件中创建服务方法
- 使用自定义错误添加适当的错误处理
- 为所有公共方法编写JSDoc注释
- 跑
npm run validate在承诺之前
运作原理
对话模式
应用程序对每种模式使用不同的系统提示:
反向模式:
- 用逻辑反驳来质疑陈述
- 发现缺陷并提出替代观点
- 以严谨的思维质疑假设
- 提供建设性的意见分歧
可接受模式:
- 验证和支持用户想法
- 从他们的思想中发现真正的价值
- 提供鼓励和积极的扩展
- 深思熟虑地建立在想法之上
请求流
- 用户在UI中键入消息
- 前端验证并发送到API服务
- API服务净化输入并调用后端
- 后端验证请求结构
- AI服务使用适当的系统提示生成响应
- 响应通过错误处理层返回
- UI显示具有特定模式样式的响应
许可证
麻省理工学院
