Content
# MCP Chat Application
An intelligent chat application based on the Model Context Protocol, supporting both web and desktop environments.
## Project Introduction
The MCP Chat Application is a modern chat interface built with Vue.js, designed to interact 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 environments (based on Electron) and integrates two mainstream large model services: OpenAI and Anthropic.
## Application Interface Showcase
## 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
- **Extensible Architecture**: Supports adding custom tools and services
- **Desktop Application**: Provides a cross-platform (Windows/Mac/Linux) desktop experience
- **Browser Automation**: Allows AI to control the browser to perform tasks
- **Local Services**: Integrates MCP backend services for 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 Mode
```bash
# Start the frontend development server
npm run dev
# In another terminal, start the MCP backend service
npm run mcp:server
```
#### Desktop Application Development Mode
```bash
# Start the Electron application
npm run electron:dev
# In another terminal, start the MCP backend service
npm run mcp:server
```
### Run the Application
#### Web Application
```bash
npm run dev
# In another terminal, start the MCP backend service
npm run mcp:server
```
#### Desktop Application
```bash
# Start the Electron application
npm run electron:dev
# In another terminal, start the MCP backend service
npm run mcp:server
```
### Build the Application
#### Web Application Build
```bash
npm run build
```
#### Desktop Application Build
```bash
# Build for all platform versions
npm run electron:build
# Build for specific platform versions
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 Chat Functionality
- Enter questions or commands in the input box at the bottom
- Click the send button or press the enter key to send the message
- Use tool functionalities to get real-time information or perform tasks (such as browsing the web, querying data, etc.)
- Supports Markdown formatting and code highlighting
### Using MCP Tools
This application integrates the following MCP tools:
- **Browser Automation**: AI can control the browser to access web pages and extract information
- **Weather Query**: Get real-time weather information
- **News Search**: Retrieve the latest news content
- **File Operations**: Read and write files (Desktop version)
Request AI to use these tools directly through the chat interface without additional operations.
## Project Structure
### Directory Structure
- `src/` - Frontend source code
- `components/` - Vue components
- `services/` - API services
- `composables/` - Vue composable functions
- `utils/` - Utility functions
- `styles/` - CSS style files
- `assets/` - Static resources
- `electron/` - Electron desktop application code
- `config/` - Application configuration files
- `mcp_server.js` - MCP backend service
- `public/` - Static resource directory
### Key Technology Stack
- **Frontend**: Vue 3, TypeScript, Vite
- **API Integration**: OpenAI API, Anthropic API
- **MCP Protocol**: @modelcontextprotocol/sdk
- **Desktop Application**: Electron
- **Server-side**: 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 changes
Example:
```javascript
// Add new tool definition
const tools = [
{
name: "my_new_tool",
description: "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 });
}
// ...
});
```
### Customizing 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 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 installer package in the `dist_electron` directory
3. Distribute the installer package to users
## Troubleshooting
- **API Connection Issues**: Check API keys and network connection
- **MCP Service Failure**: Check server logs to ensure relevant dependencies are installed
- **UI Display Issues**: Clear browser cache and check console errors
- **Tool Invocation Failure**: Check MCP backend logs to ensure tools are correctly configured
## 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
Contributions are welcome! Please submit Pull Requests or Issues to improve this project. Before contributing, please check existing Issues and the project roadmap.
## License
MIT
