Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP-Claude Code BridgeCreate a simple Express API that returns random quotes from a JSON file"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP-Claude Code Bridge Setup
1. Prerequisites
Docker and Docker Compose installed
Claude Code CLI installed (
npm install -g @anthropic-ai/claude-code)Anthropic API key
2. Setup Steps
Create project directory:
mkdir mcp-claude-bridge
cd mcp-claude-bridgeCreate the files:
Save all the provided artifacts as files in your project directory:
Dockerfilepackage.jsonserver.jsdocker-compose.yml
Set environment variable:
export ANTHROPIC_API_KEY=your_api_key_hereBuild and run:
docker-compose up --build3. Configure Claude Desktop
Add to your Claude Desktop MCP settings (~/Library/Application Support/Claude/claude_desktop_config.json on Mac):
{
"mcpServers": {
"claude-code-bridge": {
"command": "node",
"args": ["/path/to/your/mcp-claude-bridge/server.js"],
"env": {
"ANTHROPIC_API_KEY": "your_api_key_here"
}
}
}
}4. Test with Cat Facts App
Once connected, tell Claude Desktop:
"Create a simple cat facts app using the claude_code_task tool. The app should fetch facts from catfacts.ninja and display them in a simple web interface."
5. Available Tools
The bridge provides these tools:
claude_code_task: Execute coding tasks via Claude Codecreate_project: Create new project directorieslist_files: List files in projectsread_file: Read file contentsrun_command: Execute shell commands
Example Usage
In Claude Desktop, you can now say:
"Create a new React app that fetches cat facts"
"Build a simple API server in Express"
"Debug this Python script for me"
The MCP server will delegate complex tasks to Claude Code while keeping everything in the Desktop interface!