Model Context Protocol

In November 2024, Anthropic announced and open-sourced the Model Context Protocol (MCP). And since then we have seen a lot of companies building and launching their MCP servers to enable agentic workflows.

You can now integrate Google Drive, Slack, GitHub, Git, SQL databases, Puppeteer, and whatever you can think of with your IDE, LLM chats, and any other application that supports MCP.

MCP is basically a protocol that allows LLMs to interact with external tools and services.

A few thoughts about the future

In March 2023, OpenAI launched plugins for ChatGPT and I built an integration for ScreenshotOne. I thought it would be the future of integrations with LLMs. But it was painful to build, integrate and maintain plugins.

And eventually they abandoned support for them in favor of custom GPTs that have access to external APIs. I didn’t build a custom GPT for ScreenshotOne, but I saw they support the OpenAPI specification, so it wouldn’t be a problem. But I didn’t want to invest time in something that might be deprecated in a few months, again.

I saw the launch of the MCP protocol by Anthropic, but also didn’t rush to spend my time on it. However, when I noticed that Cursor picked up on the MCP, and people started to use them, I decided to check them out—this post is basically a result of my exploration of MCP.

I can imagine the marketplace or many directories in the future that will allow use to find and use MCP servers for any task.

Maybe with AGI you won’t need external tools at all, but today we have a lot of great software products that can be integrated with LLMs. And specilization is still a thing.

Imagine, you have an agentic workflow that screenshots websites for competitor research and sends reports to you. In that case, including the external tool like ScreenshotOne (the best screenshot API) could be super helpful. It would save you a lot of time, but not only that. I constantly improve the API, fix issues, polish corners cases and so on.

In that example, ScreenshotOne is a highly specialized tool, and building the one yourself might take a lot of time and effort and distract from you from the main task.

That’s why I can see many tools still being built and useful till the AGI era comes.

Using MCP to render websites screenshots with LLMs

I will share an example of how to use the MCP server to render a screenshot of a website with Claude for Desktop. But the algorithm should be similar for any other LLM or application that supports MCP.

1. Download the MCP Server

Download the MCP Server from the GitHub repository.

2. Build it

Always install dependencies and build it first:

npm run install && npm run build

3. Get your ScreenshotOne API key

4. Add the MCP Server to Claude for Desktop

Add the following to your ~/Library/Application\ Support/Claude/claude_desktop_config.json:

{
    "mcpServers": {
        "screenshotone": {
            "command": "node",
            "args": ["path/to/screenshotone/mcp/build/index.js"],
            "env": {
                "SCREENSHOTONE_API_KEY": "<your api key>"
            }
        }
    }
}

5. Try it out

For example, ask to render a screenshot of any website, or like I did, I asked it render a screenshot of BoltAI and convert it into HTML and CSS:

More MCP servers

More and more companies are building and launching their MCP servers to enable agentic workflows:

Stripe to interact with the Stripe API.
Grafana to search dashboards, investigate incidents and query datasources in your Grafana instance.
Cloudflare to deploy, configure & interrogate your resources on the Cloudflare developer platform.

And many more! One of the best go-to resources to check out for more MCP servers is the MCP official GitHub repository.

Support

In case if you have any ideas, questions or issues about using the MCP Server, feel free to contact us at support@screenshotone.com.

Rendering website screenshots in LLMs