OpenRouter Image MCP Server
Click on "Deploy 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., "@OpenRouter Image MCP Serverwhat's in this screenshot of my app's error screen?"
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.
πΌοΈπ€ OpenRouter Image MCP Server
π₯ Supercharge your AI agents with powerful image analysis capabilities! π₯
A blazing-fast β‘ MCP (Model Context Protocol) server that enables AI agents to see and understand images using OpenRouter's cutting-edge vision models. Perfect for screenshots, photos, diagrams, and any visual content! πΈβ¨
π What Makes This Special?
π― Multi-Model Support: Choose from Claude, Gemini, GPT-4 Vision, and more!
π Lightning Fast: Built with TypeScript and optimized for performance
π§ Flexible Input: Support for file paths, URLs, and base64 data
π° Cost-Effective: Smart model selection for the best price-to-quality ratio
π‘οΈ Production Ready: Robust error handling, retries, and comprehensive logging
π¨ Easy Integration: Works seamlessly with Claude Code, Cline, Cursor, and more!
Related MCP server: Vision MCP Server
π Quick Start
Prerequisites π
Node.js 18+ β‘
OpenRouter API Key π (Get one at openrouter.ai)
Your favorite MCP client π€ (Claude Code, Cline, etc.)
Installation π¦
# π Option 1: Use immediately with npx (recommended)
npx openrouter-image-mcp
# π Option 2: Install globally for frequent use
npm install -g openrouter-image-mcp
# π οΈ Option 3: Clone and build locally
git clone https://github.com/JonathanJude/openrouter-image-mcp.git
cd openrouter-image-mcp
npm install
npm run build
npm install -g .π‘ Why npx is recommended: No installation required, always gets the latest version, and works perfectly for MCP server usage!
Configuration βοΈ
The MCP server requires an OpenRouter API key. You can configure it in several ways:
Method 1: Environment Variables (Recommended)
# π Set your API key
export OPENROUTER_API_KEY=sk-or-v1-your-api-key-here
# π― Set model (uses free model by default)
export OPENROUTER_MODEL=google/gemini-2.0-flash-exp:freeMethod 2: .env File
# π Copy the environment template
cp .env.example .env
# βοΈ Edit with your credentials
nano .envAdd your OpenRouter credentials to .env:
# π Required
OPENROUTER_API_KEY=sk-or-v1-your-api-key-here
# π Model (FREE by default - great for getting started!)
OPENROUTER_MODEL=google/gemini-2.0-flash-exp:free
# ποΈ Optional settings
LOG_LEVEL=info
MAX_IMAGE_SIZE=10485760
RETRY_ATTEMPTS=3Method 3: Direct Configuration in MCP Client
Add the API key directly in your MCP client configuration (see examples below).
π Works Locally - No Restarts Needed! π―
π HUGE ADVANTAGE: This MCP server works perfectly locally with zero manual intervention once configured! No restarts, no manual server starts, no fiddling with settings. It just works! β¨
π How It Works Automatically
π― Configure once β Set up your MCP client one time
π Auto-launches β Client starts the server automatically
π§ Connects β Validates API and loads models instantly
π οΈ Ready to use β All 3 tools available immediately
β‘ Local Setup Benefits
π₯ Fire-and-forget: Set up once, forget forever
β‘ Lightning startup: ~5 seconds total ready time
π Persistent across restarts: Survives laptop shutdowns
π± Cross-platform: Works on any OS with Node.js
π― Zero maintenance: No babysitting required
π§ MCP Configuration
Option 1: Using npx (Recommended - No Installation Required)
The easiest way to use this MCP server is with npx, which automatically downloads and runs the package without any installation:
For Claude Code
Add to ~/.claude.json:
{
"mcp": {
"servers": {
"openrouter-image": {
"command": "npx",
"args": ["openrouter-image-mcp"],
"env": {
"OPENROUTER_API_KEY": "sk-or-v1-your-api-key-here",
"OPENROUTER_MODEL": "google/gemini-2.0-flash-exp:free"
}
}
}
}
}For Claude Desktop
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"openrouter-image": {
"command": "npx",
"args": ["openrouter-image-mcp"],
"env": {
"OPENROUTER_API_KEY": "sk-or-v1-your-api-key-here",
"OPENROUTER_MODEL": "google/gemini-2.0-flash-exp:free"
}
}
}
}For Other MCP Clients
Cursor:
~/.cursor/mcp.jsonCline:
~/.cline/mcp.jsonWindsurf: MCP settings file
Other agents: Check your agent's MCP documentation
β¨ Benefits of npx:
π No installation needed - works immediately
π Always latest version - automatically updates
π± Cross-platform - works everywhere Node.js is installed
π§Ή Clean system - no global packages required
Option 2: Global Installation (For Frequent Users)
If you plan to use this MCP server frequently, install it globally:
npm install -g openrouter-image-mcpThen use this configuration:
{
"mcp": {
"servers": {
"openrouter-image": {
"command": "openrouter-image-mcp",
"env": {
"OPENROUTER_API_KEY": "sk-or-v1-your-api-key-here",
"OPENROUTER_MODEL": "google/gemini-2.0-flash-exp:free"
}
}
}
}
}Benefits of global installation:
β‘ Faster startup - no download time
π Works offline - once installed
π§ Simpler command - shorter configuration
Option 3: Local Development
If you cloned the repo locally for development:
{
"mcpServers": {
"openrouter-image": {
"command": "node",
"args": ["/path/to/openrouter-image-mcp/dist/index.js"],
"env": {
"OPENROUTER_API_KEY": "sk-or-v1-your-api-key-here",
"OPENROUTER_MODEL": "google/gemini-2.0-flash-exp:free"
}
}
}
}π― Pro Tip: Replace the API key with your actual OpenRouter key. The free model works great for most use cases!
π‘ Recommendation: Start with npx (Option 1) - it's the easiest and most reliable way to get started!
π‘ Pro Tips for Local Setup
π― Path Management
Absolute paths work best:
/path/to/openrouter-image-mcp/dist/index.jsAvoid relative paths: May break when switching directories
Use your actual path: Update the examples with your real project location
π§ Environment Variables
Set in
.envfile: Keep your API key secureOR set in system:
export OPENROUTER_API_KEY=sk-or-v1-...Test quickly: Run
OPENROUTER_API_KEY=... node dist/index.js
π Quick Verification
# π Test if server works
export OPENROUTER_API_KEY=sk-or-v1-your-key
export OPENROUTER_MODEL=google/gemini-2.5-flash-lite-preview-09-2025
node dist/index.js
# β
Should see logs: "Starting OpenRouter Image MCP Server"π Troubleshooting Local Issues
β "Command not found"
# β
Use absolute path to node
"$(which node)" "/path/to/openrouter-image-mcp/dist/index.js"β "File not found"
# β
Verify the built file exists
ls -la /path/to/openrouter-image-mcp/dist/index.js
# π Rebuild if missing
npm run buildβ "API key required"
# β
Check your environment variables
echo $OPENROUTER_API_KEY
# π§ Or create .env file
echo "OPENROUTER_API_KEY=sk-or-v1-your-key" > .envπ Local Development Workflow
π οΈ Build once:
npm run buildβοΈ Configure once: Add MCP config to your AI agent
π Restart agent: Pick up the new configuration
π― Use immediately: No manual server management needed!
π₯ Usage Examples
With Claude Code π€
Add this to your ~/.claude.json:
{
"mcp": {
"servers": {
"openrouter-image": {
"command": "npx",
"args": ["openrouter-image-mcp"],
"env": {
"OPENROUTER_API_KEY": "sk-or-v1-your-api-key-here",
"OPENROUTER_MODEL": "google/gemini-2.0-flash-exp:free"
}
}
}
}
}With Claude Desktop π₯οΈ
Add this to your claude_desktop_config.json:
{
"mcpServers": {
"openrouter-image": {
"command": "npx",
"args": ["openrouter-image-mcp"],
"env": {
"OPENROUTER_API_KEY": "sk-or-v1-your-api-key-here",
"OPENROUTER_MODEL": "google/gemini-2.0-flash-exp:free"
}
}
}
}π― Amazing Things You Can Do!
# πΈ Analyze any screenshot
"Analyze this screenshot: /path/to/screenshot.png"
# π Extract text from images
"What text do you see in this document: /path/to/scan.jpg"
# π¨ Review UI designs
"Review this UI mockup for accessibility issues: /path/to/design.png"
# π± Debug mobile apps
"Analyze this mobile app screenshot for UX problems: /path/to/app.png"
# π Analyze webpages
"What can you tell me about this webpage: https://example.com/screenshot.png"π οΈ Available Tools
πΌοΈ analyze_image - General Image Analysis
Perfect for photos, diagrams, charts, and general visual content!
Parameters:
typeπ Input type:file,url, orbase64dataπΈ Image data (path, URL, or base64 string)promptπ Custom analysis promptformatπ Output:textorjsonmaxTokensπ’ Maximum response tokens (default: 4000)temperatureπ‘οΈ Creativity 0-2 (default: 0.1)
π analyze_webpage_screenshot - Webpage Specialist
Designed specifically for web page analysis and debugging!
Features:
π― Layout analysis
π± Content extraction
π Navigation review
π Form analysis
βΏ Accessibility evaluation
π Structured JSON output
π± analyze_mobile_app_screenshot - Mobile App Expert
Specialized for mobile application UI/UX analysis!
Features:
π iOS/π€ Android platform detection
π¨ UI design review
π User experience evaluation
βΏ Accessibility analysis
π UX heuristic scoring
π Performance insights
π° Vision Model Recommendations
Model | Cost | Vision Quality | Best For |
π | FREE | βββββ | Great for beginners! General analysis, docs |
π | FREE | ββββ | Charts, diagrams, technical content |
π | π° Very Low | βββββ | Best value! High quality at low cost |
π§ | π°π° Medium | βββββ | Detailed analysis, complex reasoning |
π₯ | π°π°π° Higher | βββββ | High accuracy, professional use |
π― Recommended Models
π Start with FREE models:
google/gemini-2.0-flash-exp:freeworks excellently for most use casesπ° Upgrade when needed: Move to paid models only if you need higher accuracy or specific features
π₯ Best performance:
anthropic/claude-3-5-sonnet-20241022for professional analysis
π‘ Cost Tips
Free models handle ~80% of use cases perfectly
Paid models cost ~$0.001-0.01 per image
Monitor usage at OpenRouter Dashboard
π οΈ Development
Local Setup π§
# π΄ Clone the repository
git clone https://github.com/your-username/openrouter-image-mcp.git
cd openrouter-image-mcp
# π¦ Install dependencies
npm install
# π¨ Build the project
npm run build
# π Start in development mode
npm run dev
# π§ͺ Run tests
npm test
# π Lint and format
npm run lint
npm run formatπ§ͺ Testing
Run Test Suite π§ͺ
# π§ͺ Run all tests
npm test
# π Run with coverage
npm run test:coverage
# π Debug mode
DEBUG=* npm testManual Testing π―
# πΈ Test with a sample image
node test-image-analysis.js
# π Test different models
OPENROUTER_MODEL=anthropic/claude-sonnet-4 node test-image-analysis.js
# π Test with URL input
echo '{"type":"url","data":"https://example.com/image.png","prompt":"What do you see?"}' | node dist/index.jsπ€ Contributing
Contributions welcome! Fork the repo, make changes, and submit a pull request. Please follow the existing code style and add tests for new features.
π Supported Image Formats
Format | Extension | MIME Type | Status |
πΌοΈ JPEG |
|
| β |
πΌοΈ PNG |
|
| β |
πΌοΈ WebP |
|
| β |
πΌοΈ GIF |
|
| β |
π Max Size | - | - | 10MB (configurable) |
π‘οΈ Security & Privacy
π API Keys: Loaded from environment variables only
π« No Sensitive Logging: Personal data never logged
β Input Validation: All parameters validated
π Size Limits: Configurable file size restrictions
π HTTPS Only: All API communications encrypted
ποΈ Data Cleanup: Temporary files automatically removed
π Troubleshooting
π§ Common Issues & Solutions
π "OPENROUTER_API_KEY environment variable is required"
# β
Solution: Set your API key
export OPENROUTER_API_KEY=sk-or-v1-your-key-here
# Or add to .env fileπ€ "Invalid or unsupported model"
# β
Check available models
curl -H "Authorization: Bearer $OPENROUTER_API_KEY" \
https://openrouter.ai/api/v1/models | jq '.data[] | select(.architecture.input_modalities | contains(["image"])) | .id'π‘ "Failed to connect to OpenRouter API"
# β
Test connection
curl -H "Authorization: Bearer $OPENROUTER_API_KEY" \
https://openrouter.ai/api/v1/modelsπ "Image size exceeds maximum"
# β
Increase limit or compress image
export MAX_IMAGE_SIZE=20971520 # 20MBπ Debug Mode
# π Enable detailed logging
export LOG_LEVEL=debug
npm start
# π Monitor API usage
curl -H "Authorization: Bearer $OPENROUTER_API_KEY" \
https://openrouter.ai/api/v1/auth/keyπ License
This project is licensed under the MIT License - see the LICENSE file for details.
π Ready to give your AI agents the power of sight?
β Star this repo β’ π Report Issues β’ π‘ Suggest Features
Made with β€οΈ by the open-source community
Available Tools
3 toolsanalyze_imageC
Analyze images using OpenRouter's vision models. Supports various input formats including base64, file paths, and URLs.
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | The type of image input | |
| data | Yes | The image data (base64 string, file path, or URL) | |
| mimeType | No | MIME type of the image (required for base64 input) | |
| prompt | No | Custom prompt for image analysis (optional) | |
| format | No | Output format (default: text) | |
| maxTokens | No | Maximum tokens in response (default: 4000) | |
| temperature | No | Sampling temperature (default: 0.1) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions the service ('OpenRouter's vision models') and input formats, but fails to describe critical behaviors: whether this is a read-only or mutating operation, potential costs or rate limits, authentication needs, error handling, or what the analysis entails (e.g., object detection, captioning). For a tool with no annotation coverage, this is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is highly concise and front-loaded: two sentences that directly state the purpose and key capability. Every word earns its place, with no redundant or vague phrasing. It efficiently communicates the core functionality without unnecessary elaboration.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (7 parameters, no annotations, no output schema), the description is incomplete. It lacks behavioral details (e.g., mutation risks, rate limits), output expectations, and differentiation from siblings. While the schema covers parameters well, the description doesn't compensate for missing annotations or output schema, leaving gaps for an AI agent to operate effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents all 7 parameters. The description adds minimal value beyond the schema: it lists the input formats ('base64, file paths, and URLs'), which aligns with the 'type' enum, but doesn't provide additional context like file size limits or URL accessibility. With high schema coverage, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Analyze images using OpenRouter's vision models.' It specifies the verb ('analyze') and resource ('images'), and mentions the underlying service. However, it doesn't explicitly differentiate from sibling tools like 'analyze_mobile_app_screenshot' or 'analyze_webpage_screenshot', which appear to be more specialized versions.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus its siblings. It mentions 'Supports various input formats including base64, file paths, and URLs,' which hints at usage contexts, but lacks explicit when/when-not instructions or alternative recommendations. This leaves the agent to infer usage from tool names alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
analyze_mobile_app_screenshotA
Specialized tool for analyzing mobile app screenshots. Provides insights into UI design, user experience, platform conventions, and app functionality.
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | The type of image input | |
| data | Yes | The mobile app screenshot data (base64 string, file path, or URL) | |
| mimeType | No | MIME type of the image (required for base64 input) | |
| platform | No | Mobile platform (default: auto-detect) | |
| focusArea | No | Specific area to focus on (optional) | |
| includeUXHeuristics | No | Include UX heuristic evaluation (default: true) | |
| format | No | Output format (default: json for structured mobile analysis) | |
| maxTokens | No | Maximum tokens in response (default: 4000) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must bear the burden of behavioral disclosure. It states the tool provides insights but does not disclose any behavioral traits such as whether it modifies anything, required permissions, rate limits, or that it is a read-only analysis. This is insufficient for an agent to understand side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long and front-loaded with the purpose. It is concise with no redundant words. However, it could be slightly more structured by listing the focus areas explicitly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 8 parameters and no output schema or annotations, the description is incomplete. It does not explain the return format (default json), behavior of the platform auto-detect, or how focus areas affect the analysis. An agent would need more context to use it confidently.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
All 8 parameters have descriptions in the schema (100% coverage), so the description does not need to add much. It mentions 'insights into UI design, user experience, etc.' which aligns with the platform and focusArea parameters but does not add significant new meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it is a specialized tool for analyzing mobile app screenshots, providing insights into UI design, UX, platform conventions, and functionality. This distinguishes it from sibling tools analyze_image and analyze_webpage_screenshot, which are for general images and webpages respectively.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for mobile app screenshots via 'specialized' and the listed insights, and the sibling tools provide context for when not to use (generic images, webpages). However, it does not explicitly state when to avoid this tool or provide alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
analyze_webpage_screenshotB
Specialized tool for analyzing webpage screenshots. Extracts content, layout information, and interactive elements from web pages.
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | The type of image input | |
| data | Yes | The webpage screenshot data (base64 string, file path, or URL) | |
| mimeType | No | MIME type of the image (required for base64 input) | |
| focusArea | No | Specific area to focus on (optional) | |
| includeAccessibility | No | Include accessibility analysis (default: true) | |
| format | No | Output format (default: json for structured webpage analysis) | |
| maxTokens | No | Maximum tokens in response (default: 4000) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of disclosing behavioral traits. It only states what the tool extracts but omits details about processing, privacy, size limits, or output structure beyond what the schema implies.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is highly concise with two sentences, front-loading the core purpose. No unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given 7 parameters and no output schema or annotations, the description lacks important behavioral context such as input constraints, output format details, or handling of optional parameters. It is insufficient for an agent to reliably use the tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers 100% of parameters with descriptions, so the description adds limited value beyond stating the extraction focus. Baseline 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool is for analyzing webpage screenshots and extracting content, layout, and interactive elements. However, it does not explicitly differentiate from sibling tools like analyze_image or analyze_mobile_app_screenshot, leaving the agent to infer the scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies that this tool is specialized for webpages, suggesting it should be used over the general analyze_image for that context. However, it provides no explicit when-to-use or when-not-to-use guidance, nor does it name alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
3 tool updates
- First observed
analyze_image - First observed
analyze_mobile_app_screenshot - First observed
analyze_webpage_screenshot
TDQS
Scored across 3 tools
Each tool has a clearly distinct purpose: analyze_image handles general image analysis, analyze_mobile_app_screenshot focuses specifically on mobile app UI/UX insights, and analyze_webpage_screenshot targets webpage content and layout extraction. There is no overlap or ambiguity between these three specialized functions.
All three tools follow a consistent verb_noun pattern with 'analyze_' prefix and descriptive suffixes (image, mobile_app_screenshot, webpage_screenshot). The naming is perfectly uniform and predictable across the entire toolset.
With only 3 tools, the set feels somewhat thin for an image analysis server. While the tools cover distinct use cases, there are likely missing operations like batch processing, different analysis modes, or result formatting that would make the surface more complete.
The tools cover three specific analysis scenarios well, but there are notable gaps in the image analysis domain. Missing are tools for basic operations (e.g., image metadata extraction, format conversion), alternative analysis methods, or post-processing capabilities that would provide more comprehensive coverage.
Maintenance
Related MCP Connectors
Generate images, GIFs, and PDFs from HTML, URLs, or templates β from your AI agent.
PDF, image, video, OCR, screenshot, SQL, QR and text tools for agents. No API key, no signup.
Desktop and mobile website screenshots plus page context for AI agents and automation workflows.
Read a URL as clean markdown, screenshot a website, url to PDF. Web access for agents, no signup.
Related MCP Servers
- FlicenseAqualityNot gradedmaintenanceEnables AI agents to analyze images through vision AI providers (Gemini, OpenAI, Claude), performing tasks like image description, object detection with bounding boxes, region-specific analysis, and precise color extraction without consuming context window with raw pixels.4-
- AlicenseBqualityCmaintenanceEnables vision capabilities for any AI model by routing image analysis requests through OpenRouter's vision models. It provides tools to analyze images from URLs, local file paths, or base64 data.2107 npm20MIT
- AlicenseAqualityDmaintenanceHelps non-vision models extract and understand images and screenshots via OpenRouter multimodal models.212 npm3MIT
- AlicenseAqualityDmaintenanceEnables AI agents to analyze images, extract text, compare images, and analyze video through any OpenAI-compatible vision model.4166 npm20MIT