Screen View
TypeScript project using MCP SDK to capture screen and analyze with vision model.
Installation
Installing for Claude Desktop
Option 1: One-Command Installation
npx mcpbar@latest install hemenge133/screen-view-mcp -c claudeThis command will automatically install and configure the Screen View MCP server for your selected client.
Option 2: Manual Configuration
Run the command below to open your configuration file:
npx mcpbar@latest edit -c claudeAfter opening your configuration file, copy and paste this configuration:
View JSON configuration
{
"mcpServers": {
"Screen View": {
"command": "npx",
"args": [
"[email protected]",
"--sse",
"--port",
"8080",
"--host",
"localhost"
],
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}📸 screen-view-mcp
A powerful Model Context Protocol (MCP) tool that enables AI assistants to capture and analyze screenshots using Claude Vision API. Take screenshots, analyze screen content, and get AI insights about your desktop interface.
✨ Features
- 📸 Instant full-screen screenshot capture
- 🔍 AI-powered scene analysis with Claude Vision
- 🤖 Seamless integration with MCP-compatible AI assistants
- 🛠️ Easy configuration and setup
- 🔄 Support for both stdio and SSE transports
🎯 Use Cases
- Capture and analyze screenshots of your desktop
- Analyze UI elements and layouts
- Debug visual issues with screen captures
- Get AI insights about screen content
- Document interface elements and layouts
- Screen recording and analysis
- Desktop automation with visual feedback
🚀 Quickstart
Installing via npm (Recommended)
The most reliable way to install Screen View MCP is through npm:
# Install the latest version
npm install -g screen-view-mcp
# To ensure you get the exact latest version and avoid caching issues
npm install -g [email protected] # Replace with latest version number
Then configure your AI client as shown in the "Manual Configuration" section below.
Manual Configuration
After installing via npm, configure your AI client:
For stdio transport (default)
Claude Desktop:
- Windows:
%APPDATA%/Claude/claude_desktop_config.json - MacOS:
~/Library/Application Support/Claude/claude_desktop_config.json
Cursor:
- Windows:
%APPDATA%/Cursor/mcp.jsonor~/.cursor/mcp.json - MacOS:
~/Library/Application Support/Cursor/mcp.json
CLIne:
~/.config/cline/mcp.json
Windsurf:
~/.config/windsurf/mcp.json
{
"mcpServers": {
"screen-view-mcp": {
"command": "npx",
"args": [
"[email protected]" // Specify exact version to avoid caching issues
],
"transport": "stdio",
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}
For SSE transport
For clients that support SSE transport or for remote connection scenarios:
{
"mcpServers": {
"screen-view-mcp": {
"command": "npx",
"args": [
"[email protected]",
"--sse",
"--port", "8080",
"--host", "localhost"
],
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}
For connecting to a remote SSE server (running on another machine):
{
"mcpServers": {
"screen-view-mcp": {
"url": "http://your-server-ip:8080/sse",
"transport": "sse",
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}
📝 Available Tools
captureAndAnalyzeScreen
Captures and analyzes the current screen content.
Parameters:
{
prompt?: string; // Custom prompt for analysis
modelName?: string; // Claude model to use
saveScreenshot?: boolean; // Save screenshot locally
}
Example usage in Claude:
Can you analyze what's on my screen right now and describe the layout?
Troubleshooting
Common Issues
- No access to screen capture: Make sure your AI client has screen capture permissions
- API key errors: Verify your Anthropic API key is valid and properly set in the configuration
- MCP tool not found: Ensure the package is installed globally (
npm list -g screen-view-mcp) - Package version issues: Specify the exact version in your configuration to avoid caching problems
- Transport issues: Confirm that you're using the right transport mode for your client
- For Claude Desktop, use stdio transport (default)
- For clients supporting SSE, you can use the
--sseflag
Transport Compatibility
Here are the transport types supported by different clients:
| Client | Supported Transports |
|---|---|
| Claude Desktop | stdio |
| Cursor | stdio, SSE |
| Cline | stdio, SSE |
| Windsurf | stdio, SSE |
If you see connection errors, make sure you're using the correct transport configuration for your client.
🔧 Development
- Clone and install:
git clone https://github.com/yourusername/screen-view-mcp.git
cd screen-view-mcp
npm install
- Build:
npm run build
- Test locally:
# Test with stdio transport (default)
node dist/screen-capture-mcp.js --api-key=your-anthropic-api-key
# Test with SSE transport
node dist/screen-capture-mcp.js --sse --port 8080 --host localhost --api-key=your-anthropic-api-key
📜 License
MIT
Smithery Deployment
This project is configured for deployment on Smithery, which allows hosting the MCP server over WebSocket transport.
Deployment Requirements
- Dockerfile (included in repository)
- smithery.yaml (included in repository)
- Anthropic API Key (required during configuration)
Deployment Steps
- Add the server to Smithery
- Access the Deployments tab
- Configure with your Anthropic API Key
- Deploy the server
Configuration Options
anthropicApiKey(required): Your Anthropic API keyverbose(optional): Enable verbose logging (default: false)
Available Tools
helloWorld: Simple test tool that echoes a messagecaptureAndAnalyzeScreen: Captures a screenshot and analyzes it using Claude Vision
Usage Examples
Capturing and Analyzing a Screenshot
const response = await mcpClient.invoke("captureAndAnalyzeScreen", {
prompt: "What's on my screen right now? Focus on the main content.",
modelName: "claude-3-opus-20240229"
});
console.log(response);
Stars
0Forks
0Last commit
7 months agoRepository age
7 months
Auto-fetched from GitHub .
MCP servers similar to Screen View:
Stars
Forks
Last commit
Stars
Forks
Last commit
Stars
Forks
Last commit