双模式聊天接口

基于Claude AI的专业双人格聊天接口,提供批判性思维和支持性响应的两种对话模式。

  • by stonoyan04
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 stonoyan04/mcpchat

使用说明

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服务器URL
  • VITE_API_PORT -API服务器端口(默认:3001)

开发指南

代码的风格

  • TypeScript严格模式:所有代码都使用严格的TypeScript设置
  • 导入类型:使用 import type 仅用于类型导入
  • 错误处理:使用具有正确错误传播的自定义错误类
  • 日志记录:使用logger实用程序而不是console.log
  • 验证:始终验证和净化用户输入

添加新功能

  1. 在中定义类型 shared/types/
  2. 在中添加常量 shared/constants/
  3. 在适当的服务文件中创建服务方法
  4. 使用自定义错误添加适当的错误处理
  5. 为所有公共方法编写JSDoc注释
  6. 跑 npm run validate 在承诺之前

运作原理

对话模式

应用程序对每种模式使用不同的系统提示:

反向模式:

  • 用逻辑反驳来质疑陈述
  • 发现缺陷并提出替代观点
  • 以严谨的思维质疑假设
  • 提供建设性的意见分歧

可接受模式:

  • 验证和支持用户想法
  • 从他们的思想中发现真正的价值
  • 提供鼓励和积极的扩展
  • 深思熟虑地建立在想法之上

请求流

  1. 用户在UI中键入消息
  2. 前端验证并发送到API服务
  3. API服务净化输入并调用后端
  4. 后端验证请求结构
  5. AI服务使用适当的系统提示生成响应
  6. 响应通过错误处理层返回
  7. UI显示具有特定模式样式的响应

许可证

麻省理工学院