Webcam/Screenshot Capture MCP server

Enables capturing and analyzing live webcam images and screenshots for real-time visual context in AI applications.
Back to servers
Setup instructions
Provider
evalstate
Release date
Jan 23, 2025
Language
TypeScript
Package
Stats
3.8K downloads
91 stars

MCP Webcam is a server that provides access to your webcam through the Model Context Protocol (MCP). It offers tools to capture images from your webcam or take screenshots, making these visual resources available to AI assistants like Claude.

Installation Options

Using NPX

First, ensure you have a recent version of NodeJS installed on your system.

To start in STDIO mode (the default):

npx @llmindset/mcp-webcam

This starts the MCP Webcam UI on port 3333. Access it by visiting http://localhost:3333 in your browser.

To run on a different port:

npx @llmindset/mcp-webcam 9999

For Streaming HTTP mode, which allows multiple simultaneous client connections:

npx @llmindset/mcp-webcam --streaming

This makes the UI available at http://localhost:3333 and the MCP Server at http://localhost:3333/mcp.

Using Docker

You can also run MCP Webcam using Docker. By default, it starts in streaming mode:

docker run -p 3333:3333 ghcr.io/evalstate/mcp-webcam:latest

Docker Configuration Options

Docker deployments can be customized with environment variables:

# STDIO mode
docker run -p 3333:3333 -e MCP_TRANSPORT_MODE=stdio ghcr.io/evalstate/mcp-webcam:latest

# Custom port
docker run -p 8080:8080 -e PORT=8080 ghcr.io/evalstate/mcp-webcam:latest

# For cloud deployments with custom domain
docker run -p 3333:3333 -e MCP_HOST=https://your-domain.com ghcr.io/evalstate/mcp-webcam:latest

Connecting with Compatible Clients

Fast-Agent

To connect with Fast-Agent:

  1. Start MCP Webcam in streaming mode
  2. Install uv
  3. Connect with:
uvx fast-agent-mcp go --url http://localhost:3333/mcp

Fast-Agent uses Haiku as its default model, so you'll need to set an ANTHROPIC_API_KEY environment variable. More details are available at https://fast-agent.ai/models/.

To start the server in STDIO mode, add this to your fastagent.config.yaml:

webcam_local:
   command: "npx"
   args: ["@llmindset/mcp-webcam"]

VSCode

VSCode versions 1.101.0 and above support MCP Sampling:

  1. Start MCP Webcam in streaming mode
  2. Add http://localhost:3333/mcp as an MCP Server in VSCode

Claude Desktop

Claude Desktop does not support Sampling, but can still use MCP Webcam. Add the following to the mcpServers section of your claude_desktop_config.json file:

"webcam": {
  "command": "npx",
  "args": [
    "-y",
    "@llmindset/mcp-webcam"
  ]
}

After starting Claude Desktop, connect to http://localhost:3333. You can then ask Claude to:

  • "Get the latest picture from my webcam"
  • "Take a look at what I'm holding"
  • "What color top am I wearing?"

Using MCP Webcam

Sampling Mode

MCP Webcam supports "sampling" - press the "Sample" button to send a sampling request to the client along with your entered message. Note that Claude Desktop doesn't currently support sampling.

Multi-user Mode

When running in Streaming mode, you can set an MCP_HOST environment variable. The host name is used as a prefix in URL construction, and 5-character UserIDs are automatically generated when users land on the webpage.

Working with Images

  • You can "freeze" the current image, which will be returned to Claude rather than a live capture
  • Screenshots are automatically resized to be manageable for Claude (useful for 4K screens)
  • The screenshot feature doesn't work on Safari as it requires human initiation

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "webcam" '{"command":"npx","args":["-y","@llmindset/mcp-webcam"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "webcam": {
            "command": "npx",
            "args": [
                "-y",
                "@llmindset/mcp-webcam"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "webcam": {
            "command": "npx",
            "args": [
                "-y",
                "@llmindset/mcp-webcam"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect

Want to 10x your AI skills?

Get a free account and learn to code + market your apps using AI (with or without vibes!).

Nah, maybe later