How Model Context Protocol Supercharges Your AI Workflow

The Model Context Protocol (MCP) is an open standard. It acts like a universal connector for AI applications that will allow them to communicate with external data sources or other tools. So instead of building custom integrations for each of these data sources or tools, MCP provides a standardized way for AI models to access the information they need to provide better and more relevant responses.

Before we dive into how to use MCP in your workflows, let’s take a closer look at the architecture behind it.

---

MCP Architecture

MCP is built upon a client-server model that involves: Clients, Servers and Service providers.

Clients

The MCP clients are the AI applications themselves, such as chatbots, code editors, or IDEs, that need to access external data or tools. These clients integrate with the MCP protocol to initiate connections with MCP servers and request specific information or actions.

Today, there are a number of clients available that can run MCP, such as code editors like Visual Studio Code, Cursor, an extension like Cline, or Desktop app like Claude.

Servers

The MCP servers act as intermediaries or adapters that translate the standardized MCP requests from the client into specific commands or API calls required by the service provider, and then return the results to the client in a standardized MCP format.

There are already a handful of MCP servers we can use today. Some services and tools have provided their official MCP servers, such as Playwright to perform browser automation, Github to interact with your remote repositories, and you can find many more in this repository.

Service providers

As mentioned, MCP server is designed to connect to one or more underlying service providers, which are the actual platforms or systems that hold the data or offer the tools that the AI needs. For example, it could be an external application like Google Drive, Slack, GitHub, and even PayPal.

A service provider could also be an internal system like your computer file system, the local Git repository, databases like SQLite, PostgreSQL, etc.

---

Using MCP

We will need to select a client to use MCP. In this article, we will be using the Claude desktop app.

We will add all server configuration within the app from the Settings… > Developers > Edit Config menu. This will open the JSON file, claude_desktop_config.json where we can add the server configuration.

Time server

Let’s start with something simple like getting the current time.

We will be using the Time server. It’s a simple implementation of the MCP protocol that provides us with the current time as well as time conversion capabilities.

To use this server, add the following in the Claude config file:

{
    "mcpServers": {
        "time": {
            "command": "uvx",
            "args": ["mcp-server-time", "--local-timezone=Asia/Singapore"]
        }
    }
}

After you’ve restarted the app, you should see additional information that shows you the tools from the MCP server.

Now, you can ask Claude, such as What’s the current time? and it will return the current time in the local timezone specified.

Claude can also do time conversion. For example, you can ask: What time is it in New York? and it will return the time in New York.

Use browser

Let’s try something a little more interesting.

We will now be using the Playwright MCP server that allows us to interact with the browser such as opening a new tab, navigating to a URL, taking screenshots, and even running JavaScript code.

To use this server, we will need to set up the server configuration, as follows:

{
    "mcpServers": {
        "playwright": {
            "command": "npx",
            "args": ["@playwright/mcp@latest"]
        }
    }
}

Now, we can ask Claude with a prompt that will open a new tab in the browser and navigate to a URL. For example, you can ask: Grab the title of this post https://www.hongkiat.com/blog/epson-mac-communication-error-fix/.

And sure enough, it can give us the post title correctly.

The Playwright MCP server is also capable of taking screenshots. You can ask Claude to take a screenshot of the page by using the command Take a screenshot of this post.

You can also further customize the server configuration by adding the --browser argument to specify which browser to use. For example, you can use --browser=firefox to use Firefox instead of the default Chromium.

Create a Github repository

Another example is to manage your Github repositories. To do this, you need to set up the Github MCP server configuration, as follows:

{
    "mcpServers": {
        "github": {
            "command": "docker",
            "args": [
                "run",
                "-i",
                "--rm",
                "-e",
                "GITHUB_PAT",
                "ghcr.io/github/github-mcp-server"
            ],
            "env": {
                "GITHUB_PAT": "<token>"
            }
        }
    }
}

This server requires a Github Personal Access token. You can generate one from your account Settings. Create one and assign the token with the appropriate permissions.

For example, if you need to retrieve the list of repositories, you should add the public_repo permission.

In addition to that, you will need the docker command. You can get the command by installing the Docker Desktop application, or if you’re on macOS, you can use an alternative, OrbStack.

After you’ve restarted the app, you can now ask Claude, for example, to count my public repositories.

You can try prompts like: List all my public repositories with open issues, list all my public repositories with pull requests more than 2, etc.

---

Wrapping up

In this article, we looked at how the Model Context Protocol (MCP) helps AI tools connect to external services.

Although we’ve only used it with Claude, the MCP is now built into many popular clients like Visual Studio Code, Cursor, and Cline. This means you can use it with your favorite tools to make them even more powerful.

If you haven’t tried it yet, I think it’s worth exploring how MCP can fit into your own setup and help you work more efficiently.