mcp-ui

mcp-ui is a Vue-based MCP-enabled chat application with an integrated MCP backend. It supports interaction with external tools and services through the Model Context Protocol (MCP), enabling AI agents to call capabilities such as browser automation, weather lookups, news searches, and file operations directly from the chat interface. The backend MCP server handles tool definitions, routing of tool calls, and integration with major models like OpenAI and Anthropic. To use it locally, run the MCP backend alongside the frontend, then configure your API providers (OpenAI or Anthropic) and the MCP server port. The tools exposed by MCP can be invoked by the AI during conversations to fetch real-time data or perform tasks, making the chat experience dynamic and capable of practical automation. The app supports web and desktop (Electron) environments, with separate commands to launch the frontend and the MCP backend as needed.

Prerequisites:

• Node.js v16.0.0+ (and npm v8.0.0+)
• A supported MCP-enabled environment (Web + Electron desktop options)

1. Install dependencies

npm install

2. Prepare environment configuration

• Copy the example environment file to a real one and fill in keys

cp .env.example .env

• Edit .env to include necessary API keys and settings, for example:

VITE_API_KEY=your_api_key_here
VITE_MODEL_PROVIDER=openai  # or anthropic
MCP_SERVER_PORT=3001        # MCP服务器端口

3. Start the MCP backend server (required alongside the frontend)

# Start MCP backend service
npm run mcp:server

4. Run the frontend (Web or Desktop)

• Web:

npm run dev

• Desktop (Electron):

npm run electron:dev

Optional: Build for production

• Web:

npm run build

• Desktop:

npm run electron:build

Tips and notes:

• Ensure MCP_SERVER_PORT does not conflict with other services. The default is 3001 as shown in the example.
• Store API keys securely; avoid committing .env files to version control.
• If tools fail to respond, check MCP backend logs and confirm that tool definitions exist on the server (mcp_server.js).
• When using the desktop Electron mode, both the frontend and MCP backend can be started in parallel via separate terminals as shown in the README.
• The app integrates OpenAI and Anthropic models; configure the provider and corresponding API keys in the environment, then select the desired provider in the settings UI.
• MCP tools mentioned include browser automation, weather queries, news search, and file operations; additional tools can be added by extending mcp_server.js and reloading the MCP service.