Angular MCP聊天机器人
一个模块化的Angular前端，用于连接到任何MCP（模型上下文协议）客户端。此UI可以与任何与Gemini API或其他LLM接口的MCP客户端配合使用。
特性
- 使用Angular+Tailwind CSS+DaisyUI的现代UI
- 带有对话管理的聊天界面
- 对话历史记录的本地存储
- 文件附件支持
- 模块化设计-适用于任何MCP客户端
安装说明
1.安装依赖项
npm install2.配置您的MCP客户端URL
此应用程序旨在与 任何MCP客户端 你建造了。使用MCP客户端的URL更新配置文件：
发展： 编辑 src/environments/environment.ts:
export const environment = {
production: false,
mcpClientURL: "http://localhost:3000", // Replace with your MCP client URL
};生产： 编辑 src/environments/environment.prod.ts:
export const environment = {
production: true,
mcpClientURL: "https://your-mcp-client-url.com", // Replace with your production URL
};3.启动开发服务器
npm start该应用程序将在 http://localhost:4200
4.为生产而建造
npm run build构建工件将存储在 dist/ 目录。
MCP客户要求
您的MCP客户端必须公开具有以下终结点的REST API：
POST /chat
请求正文：
{
"message": "User message text",
"conversationId": "unique-conversation-id"
}答复：
{
"response": "AI response text"
}前端将自动：
- 向您的MCP客户端发送用户消息
- 在聊天中显示AI的响应
- 使用以下方式维护对话上下文
conversationId
项目结构
src/
├── app/
│ ├── components/
│ │ ├── chat/ # Main chat interface
│ │ │ ├── chat-input/ # Message input component
│ │ │ ├── file-attachment/ # File upload component
│ │ │ ├── message-item/ # Individual message display
│ │ │ └── welcome-message/ # Welcome screen
│ │ └── sidebar/ # Conversation sidebar
│ ├── services/
│ │ ├── chat.service.ts # Handles API communication
│ │ └── scroll-to-bottom.service.ts
│ └── models/
│ └── message.model.ts # Message data structure
└── environments/
├── environment.ts # Development config
└── environment.prod.ts # Production config定制
样式
- TailwindCSS类贯穿始终
- DaisyUI组件提供基础主题
- 在中自定义颜色和样式
tailwind.config.cjs
API集成
- 所有API调用都在中处理
src/app/services/chat.service.ts - 如果您的MCP客户有不同的API要求，请修改此服务
贡献
这是一个MVP前端，设计为模块化，可与任何MCP客户端实现配合使用。欢迎根据您的需求进行扩展和定制。
未来功能
登录系统以跟踪过去的聊天记录。