Content
# MCP Chat Application
An intelligent chat application based on Model Context Protocol, supporting both web and desktop environments.
## Project Introduction
The MCP chat application is a modern chat interface built on Vue.js, supporting interaction with various services and tools through the Model Context Protocol (MCP). MCP is an open protocol standard introduced by Anthropic that allows AI models to directly call services such as databases, file systems, browser automation, and third-party MCP services.
This application supports both web and desktop (based on Electron) platforms and integrates two mainstream large model services: OpenAI and Anthropic.
## Application Interface Display
## Core Features
- **Sleek and Modern** chat interface design
- **MCP Protocol Support**: Seamless interaction with external tools and services
- **Multi-Model Support**: Compatible with both OpenAI and Anthropic API formats
- **Custom Configuration**: Configurable API keys, base URLs, and model options
- **Scalable Architecture**: Supports adding custom tools and services
- **Desktop Application**: Provides a cross-platform (Windows/Mac/Linux) desktop experience
- **Browser Automation**: Supports AI controlling the browser to perform tasks
- **Local Services**: Integrates MCP backend services to provide powerful functionality
## System Requirements
- **Node.js**: v16.0.0+
- **npm**: v8.0.0+
- **Modern Browsers**: Latest versions of Chrome, Firefox, Safari, Edge
- **Operating Systems**: Windows 10+, macOS 10.15+, Ubuntu 20.04+ (Desktop version)
## Quick Start
### Install Dependencies
```bash
npm install
```
### Configure Environment Variables (Optional)
Copy the `.env.example` file to `.env` and fill in the necessary API keys and configurations:
```bash
cp .env.example .env
```
Edit the `.env` file to set the following content:
```
VITE_API_KEY=your_api_key_here
VITE_MODEL_PROVIDER=openai # or anthropic
MCP_SERVER_PORT=3001 # MCP server port
```
### Start the Application
#### Web Application Development Model
```bash
```
# Start the Frontend Development Server
npm run dev
# Start the MCP Server in another terminal
```bash
npm run mcp:server
```
#### Desktop Application Development Model
```bash
```
# Start the Electron Application
npm run electron:dev
# Start the MCP Server in another terminal
npm run mcp:server
```
### Running the Application
#### Web Application
```bash
npm run dev
```
# Start the MCP Server in another terminal
npm run mcp:server
```
#### Desktop Application
```bash
```
# Start the Electron Application
npm run electron:dev
# Start the MCP Backend Service in Another Terminal
npm run mcp:server
```
### Build Application
#### Web Application Build
```bash
npm run build
```
#### Desktop Application Build
```bash
# Build All Platform Versions
npm run electron:build
# Build Specific Platform Versions
```bash
npm run electron:buildwin # Windows
npm run electron:buildmac # macOS
npm run electron:buildlinux # Linux
```
## Detailed Usage Instructions
### Configure Model Settings
1. After opening the application, click the ⚙️ settings icon in the upper right corner.
2. In the settings panel, configure:
- **Model Provider**: Choose OpenAI or Anthropic
- **API Key**: Enter the API key for the corresponding service
- **API Base URL**: Optional, for using a custom API endpoint or proxy service
- **Model**: Select the specific model to use
- **Custom Model**: Add and manage custom model configurations
### Using the Chat Function
- Enter your question or command in the input box at the bottom
- Click the send button or press the enter key to send the message
- Use the tool features to obtain real-time information or perform tasks (such as browsing the web, querying data, etc.)
- Supports Markdown format and code highlighting
### MCP Tool Usage
This application integrates the following MCP tools:
- **Browser Automation**: AI can control the browser to access web pages and extract information.
- **Weather Query**: Obtain real-time weather information.
- **News Search**: Retrieve the latest news content.
- **File Operations**: Read and write files (desktop version).
You can directly request the AI to use these tools through the chat interface, without any additional operations.
## Project Architecture
### Directory Structure
- `src/` - Frontend source code
- `components/` - Vue components
- `services/` - API services
- `composables/` - Vue composables
- `utils/` - Utility functions
- `styles/` - CSS style files
- `assets/` - Static assets
- `electron/` - Electron desktop application code
- `config/` - Application configuration files
- `mcp_server.js` - MCP backend service
- `public/` - Static assets directory
### Key Technology Stack
- **Frontend**: Vue 3, TypeScript, Vite
- **API Integration**: OpenAI API, Anthropic API
- **MCP Protocol**: @modelcontextprotocol/sdk
- **Desktop Application**: Electron
- **Backend**: Express, Node.js
## Development Guide
### Adding New MCP Tools
1. Add a new tool description in the tool definition section of `mcp_server.js`
2. Implement the corresponding tool handling logic
3. Restart the MCP server to apply the changes
Example:
```javascript
// Add new tool definition
const tools = [
{
name: "my_new_tool",
description: "This is a description of a new tool",
parameters: {
type: "object",
properties: {
param1: { type: "string", description: "Description of parameter 1" }
},
required: ["param1"]
}
},
// Other tools...
];
// Implement tool handling logic
app.post('/mcp/tools/call', async (req, res) => {
// ...
if (toolName === "my_new_tool") {
const result = await handleMyNewTool(arguments);
return res.json({ result });
}
// ...
});
```
### Custom UI Components
Modify or create Vue components in the `src/components/` directory to customize the UI.
## Deployment Guide
### Web Application Deployment
1. Run `npm run build` to generate production code.
2. Deploy the `dist` directory to any static web server.
3. Ensure that the MCP backend service is correctly configured and running.
### Desktop Application Distribution
1. Run the build command for the corresponding platform.
2. Find the built installation package in the `dist_electron` directory.
3. Distribute the installation package to users.
## Troubleshooting
- **API Connection Issues**: Check the API key and network connection
- **MCP Service Failure**: Review the server logs and ensure that the necessary dependencies are installed
- **UI Display Issues**: Clear the browser cache and check for console errors
- **Tool Invocation Failure**: Check the MCP backend logs and ensure that the tool is configured correctly
## Related Resources
- [Model Context Protocol Documentation](https://mcplab.cc/zh/docs/getstarted/quickstart/client)
- [OpenAI API Documentation](https://platform.openai.com/docs/api-reference)
- [Anthropic Claude API](https://www.anthropic.com/api)
- [Vue.js Documentation](https://vuejs.org/)
- [Electron Documentation](https://www.electronjs.org/docs)
## Contribution Guidelines
We welcome Pull Requests or Issues to improve this project. Please check the existing Issues and the project roadmap before contributing.
## License
MIT
