基于MCP(Model Context Protocol)的智能聊天应用,支持Web和桌面环境。集成OpenAI/Anthropic API,提供MCP服务器的所有工具能力。简洁现代的UI设计,支持跨平台部署。
基于 Model Context Protocol 的智能聊天应用,支持Web和桌面环境。
MCP聊天应用是一个基于Vue.js构建的现代化聊天界面,支持通过Model Context Protocol (MCP)与各种服务和工具进行交互。MCP是Anthropic推出的开放协议标准,允许AI模型直接调用诸如数据库、文件系统、浏览器自动化、第三方mcp服务等。
本应用同时支持Web端和桌面端(基于Electron),并且集成了OpenAI和Anthropic两种主流大模型服务。
npm install
复制.env.example
文件到.env
,并填入必要的API密钥和配置:
cp .env.example .env
编辑.env
文件设置以下内容:
VITE_API_KEY=your_api_key_here
VITE_MODEL_PROVIDER=openai # 或 anthropic
MCP_SERVER_PORT=3001 # MCP服务器端口
# 启动前端开发服务器
npm run dev
# 在另一个终端启动MCP后端服务
npm run mcp:server
# 启动Electron应用
npm run electron:dev
# 在另一个终端启动MCP后端服务
npm run mcp:server
npm run dev
# 在另一个终端启动MCP后端服务
npm run mcp:server
# 启动Electron应用
npm run electron:dev
# 在另一个终端启动MCP后端服务
npm run mcp:server
npm run build
# 构建所有平台版本
npm run electron:build
# 构建特定平台版本
npm run electron:buildwin # Windows
npm run electron:buildmac # macOS
npm run electron:buildlinux # Linux
本应用集成了以下MCP工具:
通过聊天界面直接请求AI使用这些工具,无需额外操作。
src/
- 前端源代码
components/
- Vue组件services/
- API服务composables/
- Vue组合式函数utils/
- 工具函数styles/
- CSS样式文件assets/
- 静态资源electron/
- Electron桌面应用代码config/
- 应用配置文件mcp_server.js
- MCP后端服务public/
- 静态资源目录mcp_server.js
中的工具定义部分添加新工具描述示例:
// 添加新工具定义
const tools = [
{
name: "my_new_tool",
description: "这是一个新工具的描述",
parameters: {
type: "object",
properties: {
param1: { type: "string", description: "参数1的描述" }
},
required: ["param1"]
}
},
// 其他工具...
];
// 实现工具处理逻辑
app.post('/mcp/tools/call', async (req, res) => {
// ...
if (toolName === "my_new_tool") {
const result = await handleMyNewTool(arguments);
return res.json({ result });
}
// ...
});
修改或创建src/components/
目录下的Vue组件以定制UI。
npm run build
生成生产环境代码dist
目录部署到任何静态Web服务器dist_electron
目录找到构建好的安装包欢迎提交Pull Request或Issue来改进这个项目。贡献前请先查看现有Issues和项目路线图。
MIT
No configuration available
Related projects feature coming soon
Will recommend related projects based on sub-categories