Grow-Myelin/qwen-puppeteer-mcp

Qwen Puppeteer MCP Server

An MCP (Model Context Protocol) server that provides Claude Code with the ability to use Qwen API calls with Puppeteer tool use capabilities for browser automation.

Features

• Qwen API Integration: Call the qwen-3-coder-480b model via Cerebras API
• Puppeteer Tool Use: Qwen can control a browser through Puppeteer tools
• MCP Compatibility: Seamlessly integrates with Claude Code as an MCP server
• Browser Automation: Create HTML files, open browsers, click elements, take screenshots, and more

Setup

1. Install dependencies in the MCP server directory:

cd /path/to/qwen-mcp
npm install

2. Add the MCP server to your Claude Code global configuration

3. Create a .env file in each project directory where you want to use Qwen:

# In your project directory (where you run Claude Code)
echo "CEREBRAS_API_KEY=your_cerebras_api_key_here" > .env

The MCP server will automatically look for .env in Claude Code's current working directory.

Available Tools

Main Tool

• qwen_with_puppeteer: Call Qwen API with browser automation capabilities
  • prompt: Task description for Qwen
  • working_directory (optional): Directory where Qwen should work (creates if needed)
  • max_iterations: Maximum tool use iterations (default: 10)

Directory Management

• set_working_directory: Set the working directory where Qwen creates files (for main agent)
• create_directory: Create directories for organizing files (for Qwen)

File & Browser Tools

• create_html_file: Create files with subdirectory support (e.g., "css/style.css")
• open_browser: Open browser and navigate to files
• click_element: Click page elements
• get_page_info: Get page information (title, text, colors, etc.)
• take_screenshot_with_label: Take labeled screenshots
• type_text: Type text into input fields
• close_browser: Close the browser instance

Project Organization Features

• Claude Code CWD Integration: Defaults to creating files in Claude Code's current working directory
• Per-Call Isolation: Each qwen_with_puppeteer call can specify its own working directory relative to Claude Code's CWD
• Global Working Directory: Main agent can set default working directory with set_working_directory
• Auto-Directory Creation: Files in subdirectories automatically create parent folders
• Flexible Paths: Supports both relative (to Claude Code CWD) and absolute file paths
• Project Structure: Enables proper website organization (css/, js/, images/, etc.)
• Temporary Screenshots: Screenshots are saved in .temp-screenshots/ within each session and auto-cleaned up

Usage Examples

// Each call works in its own directory relative to Claude Code's CWD
qwen_with_puppeteer({
  prompt: "Create a red website",
  working_directory: "red-site"  // Creates ./red-site/ in Claude Code's CWD
})

qwen_with_puppeteer({
  prompt: "Create a blue website", 
  working_directory: "blue-site"  // Creates ./blue-site/ in Claude Code's CWD
})

// Without working_directory, creates files directly in Claude Code's CWD
qwen_with_puppeteer({
  prompt: "Create a simple website"  // Creates files in current directory
})

Usage with Claude Code

1. Global Setup: Add this server to your Claude Code global MCP configuration
2. Per-Project Setup: Create a .env file in each project directory with your CEREBRAS_API_KEY
3. Usage: The server will automatically use the API key from the current directory's .env file

Example Workflow

# In any project directory
echo "CEREBRAS_API_KEY=your_key" > .env
claude  # Start Claude Code

# Now use qwen tools:
qwen_with_puppeteer({
  prompt: "Create a website",
  working_directory: "my-site"  # Creates ./my-site/ in current directory
})

Security Benefits

• No hardcoded API keys in global configuration
• Per-project API keys - different projects can use different keys
• Local .env files - API keys stay with your projects, not in global config
• Standard .env pattern - follows common development practices