维基百科人工智能聊天
Next.js聊天应用程序，使用Anthropic API（Claude）和Wikipedia MCP（模型上下文协议），通过搜索和检索维基百科中的信息来回答问题。
这是什么
这是一个功能齐全的AI聊天界面，您可以在其中提问，Claude将自动：
- 在维基百科上搜索相关文章
- 阅读全文
- 根据维基百科数据提供全面的答案
该应用程序演示了如何在Next.js应用程序中将模型上下文协议（MCP）服务器与Claude AI集成。
特性
- 使用shadcn/ui和Tailwind CSS构建的干净、现代的聊天界面
- Claude的实时流式响应
- 通过MCP自动集成维基百科
- 显示搜索维基百科的时间
- TypeScript用于类型安全
- 支持多轮工具调用（搜索→ 阅读文章→ 答案）
先决条件
- 已安装Node.js 18+
- 人类API密钥(在这里买一个)
快速开始
- 导航到项目目录：
cd /Users/alexhoover/Documents/projects/wikipedia-chat- 安装依赖项 （如果尚未安装）：
npm install- 设置API密钥：
编辑 .env.local 文件并添加您的Anthropic API密钥：
ANTHROPIC_API_KEY=your_actual_api_key_here- 启动开发服务器：
npm run dev- 打开浏览器：
- 试试看！
问以下问题：
- “什么是量子计算？” - “跟我说说阿拉莫战役” - “阿尔伯特·爱因斯坦是谁？” - “气候变化的主要原因是什么？”
运作原理
建筑
- 前端 (
app/page.tsx):
- React聊天界面，实时消息流 - 显示用户消息和AI响应 - 在搜索维基百科时显示指标
- API路线 (
app/api/chat/route.ts):
- 处理前端和Anthropic API之间的通信 - 为每个请求生成维基百科MCP服务器 - 管理多轮工具调用（搜索→ read → 响应） - 将响应流式传输回前端
- MCP集成:
- 维基百科MCP服务器通过以下方式运行 npx wikipedia-mcp - 为Claude提供两个工具： - search：查找与搜索词匹配的文章 - readArticle：检索完整文章内容 - 每次聊天请求自动启动/停止
- 流媒体:
- 服务器实时发送事件（SSE）流响应 - 用户在生成响应时看到响应 - 工具使用情况通过指示器可见
请求流
User asks question
↓
Frontend sends to /api/chat
↓
API spawns Wikipedia MCP server
↓
Claude receives question + Wikipedia tools
↓
Claude searches Wikipedia (tool call #1)
↓
Claude reads relevant articles (tool call #2)
↓
Claude provides answer based on Wikipedia content
↓
Response streams back to frontend
↓
User sees complete answer技术栈
- Next.js 15 -带有App Router的React框架
- TypeScript -类型安全
- 顺风CSS -实用性优先的造型
- shadcn/ui -漂亮的UI组件
- Anthropic SDK -克劳德AI集成（型号：Claude-sonnet-4-5）
- MCP-SDK -模型上下文协议客户端
- 维基百科MCP -维基百科搜索和检索服务器
项目结构
wikipedia-chat/
├── app/
│ ├── api/
│ │ └── chat/
│ │ └── route.ts # API endpoint with MCP integration
│ ├── page.tsx # Main chat interface
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/
│ └── ui/ # shadcn/ui components
│ ├── button.tsx
│ ├── input.tsx
│ ├── card.tsx
│ └── ...
├── lib/
│ └── utils.ts # Utility functions
├── .env.local # Environment variables (not in git)
├── .env.example # Example env file
├── package.json # Dependencies
└── README.md # This file关键依赖关系
{
"@anthropic-ai/sdk": "Latest",
"@modelcontextprotocol/sdk": "Latest",
"wikipedia-mcp": "Latest",
"next": "15.x",
"react": "19.x",
"lucide-react": "Latest"
}环境变量
创建一个 .env.local 文件包含：
ANTHROPIC_API_KEY=your_api_key_here重要提示： 永不承诺 .env.local 到git。它已经在里面了 .gitignore.
故障排除
维基百科MCP不工作
- 检查终端日志
[MCP]前缀消息 - 确保
npx wikipedia-mcp可以运行：npx -y wikipedia-mcp --version - 验证工具调用是否收到正确的参数
API错误
- 在中验证您的Anthropic API密钥是否正确
.env.local - 检查您是否使用了有效的型号ID（当前
claude-sonnet-4-5) - 查看终端日志以了解详细的错误消息
滚动问题
- 聊天使用本地浏览器滚动
overflow-y-auto - 新消息自动滚动到底部
无流媒体
- 检查浏览器控制台是否存在JavaScript错误
- 验证
/api/chat端点可访问 - 确保服务器发送的事件未被阻止
发展
添加新功能
代码库结构良好，可以添加功能：
- 新UI组件：添加到
components/ui/ - 造型变化：更新顺风类或
globals.css - 聊天逻辑：修改
app/page.tsx - API/MCP逻辑：修改
app/api/chat/route.ts
使用不同的MCP服务器
要使用不同的MCP服务器而不是维基百科：
- 安装MCP包
- 更新
app/api/chat/route.ts:
const transport = new StdioClientTransport({
command: 'npx',
args: ['-y', 'your-mcp-package'],
});日志记录
控制台日志带有前缀，便于过滤：
[MCP]-MCP服务器操作[Chat Error]-聊天相关错误
部署
对于生产部署：
- 设置环境变量 在您的托管平台上
- 构建项目:
npm run build - 启动生产服务器:
npm start
推荐平台：
- Vercel（最适合Next.js）
- 铁路
- 渲染
- 任何Node.js主机
注： 确保您的托管平台可以运行 npx MCP服务器的命令。
许可证
麻省理工学院
______________________________________________________________________
快速参考
启动开发服务器： npm run dev 停止服务器： 按 Ctrl+C 或 pkill -f "next dev" 查看日志： 检查终端位置 npm run dev 正在运行 重置聊天： 刷新浏览器页面 API终点： http://localhost:3000/api/chat 前端： http://localhost:3000
问题？
该项目展示了：
- ✅ Anthropic API与流媒体的集成
- ✅ 模型上下文协议（MCP）服务器集成
- ✅ 多轮工具调用（代理工作流）
- ✅ 现代Next.js 15应用路由器模式
- ✅ shadcn/ui组件库
- ✅ 服务器发送事件（SSE）流
- ✅ TypeScript最佳实践
用克劳德代码建造！ 🤖