Content
# MCP Chat Application
Intelligent chat application based on Model Context Protocol, supporting Web and desktop environments.
## Project Introduction
The MCP chat application is a modern chat interface built with Vue.js, supporting interaction with various services and tools through the Model Context Protocol (MCP). MCP is an open protocol standard launched by Anthropic, allowing AI models to directly call databases, file systems, browser automation, third-party mcp services, etc.
This application supports both Web and desktop (based on Electron) environments, and integrates two mainstream large model services: OpenAI and Anthropic.
## Application Interface Display
## Core Features
- **Simple and modern** chat interface design
- **MCP Protocol Support**: Seamless interaction with external tools and services
- **Multi-Model Support**: Compatible with 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 cross-platform (Windows/Mac/Linux) desktop experience
- **Browser Automation**: Supports AI-controlled browser task execution
- **Local Service**: Integrated MCP backend service provides powerful features
## 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)
## 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:
```
VITE_API_KEY=your_api_key_here
VITE_MODEL_PROVIDER=openai # or anthropic
MCP_SERVER_PORT=3001 # MCP server port
```
### Start Application
#### Web Application Development Mode
```bash
# Start the front-end development server
npm run dev
# Start the MCP backend service in another terminal
npm run mcp:server
```
#### Desktop Application Development Mode
```bash
# Start the Electron application
npm run electron:dev
# Start the MCP backend service in another terminal
npm run mcp:server
```
### Run Application
#### Web Application
```bash
npm run dev
# Start the MCP backend service 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
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. Configure in the settings panel:
- **Model Provider**: Select OpenAI or Anthropic
- **API Key**: Enter the API key for the corresponding service
- **API Base URL**: Optional, such as 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 a question or command in the bottom input box
- Click the send button or press Enter to send the message
- Use tool functions to get real-time information or perform tasks (such as browsing web pages, querying data, etc.)
- Supports Markdown formatting 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**: Get real-time weather information
- **News Search**: Retrieve the latest news content
- **File Operations**: Read and write files (desktop version)
Request the AI to use these tools directly through the chat interface without additional operations.
## Project Architecture
### Directory Structure
- `src/` - Front-end 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**: 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 processing 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 processing 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 environment 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 installation package in the `dist_electron` directory
3. Distribute the installation package to users
## Troubleshooting
- **API Connection Issues**: Check API keys and network connection
- **MCP Service Failure**: Check server logs, ensure relevant dependencies are installed
- **UI Display Abnormalities**: Clear browser cache, check console errors
- **Tool Call Failure**: Check MCP backend logs, ensure tools are 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 Guide
Welcome to submit Pull Requests or Issues to improve this project. Please review existing Issues and the project roadmap before contributing.
## License
MIT
