Angular MCP Chatbot

Angular MCP聊天机器人

一个模块化的Angular前端，用于连接到任何MCP（模型上下文协议）客户端。此UI可以与任何与Gemini API或其他LLM接口的MCP客户端配合使用。

特性

• 使用Angular+Tailwind CSS+DaisyUI的现代UI
• 带有对话管理的聊天界面
• 对话历史记录的本地存储
• 文件附件支持
• 模块化设计-适用于任何MCP客户端

安装说明

1.安装依赖项

npm install

2.配置您的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客户端实现配合使用。欢迎根据您的需求进行扩展和定制。

未来功能

登录系统以跟踪过去的聊天记录。