Building Tiny Agents with MCP in 50 Lines of TypeScript

---

Over the past few weeks, I've been diving into the Model Context Protocol (MCP) to understand what all the buzz is about. My takeaway? It's surprisingly simple but incredibly powerful. MCP is a standard API that exposes sets of tools to be used by language models (LLMs). By extending an inference client-like Hugging Face’s @huggingface/inference in JavaScript or huggingface_hub in Python-to act as an MCP client, you can seamlessly integrate these tools into your LLM workflows.

But here's the kicker: once you have an MCP client set up, building an agent is literally just a while loop on top of it. In this article, I’ll walk you through how I implemented a simple agent in TypeScript (JS) and why adopting MCP can simplify agentic AI development.

What is MCP?

MCP is a protocol that standardizes the way tools are exposed to LLMs. Think of it as a bridge between your language model and external tools like file systems, web browsers, or custom scripts. By adhering to this protocol, you can create modular, reusable tools that any MCP-compatible client can use.

Setting Up an MCP Client

To get started, you need an inference client that supports MCP. Hugging Face provides official SDKs for both JavaScript and Python:

• JavaScript: @huggingface/inference
• Python: huggingface_hub

For this example, we'll use the JavaScript SDK. If you have Node.js installed (with pnpm or npm), you can run the following command to install and execute my package in a temporary folder:

npx @huggingface/mcp-client

Or, if you prefer pnpm:

pnpx @huggingface/mcp-client

How It Works

When you run the command, your simple agent will connect to two distinct MCP servers running locally. These servers provide different sets of tools:

• File System Server: This server grants access to your desktop, allowing the agent to read and write files.
• Playwright MCP Server: This server enables the agent to use a sandboxed Chromium browser for web interactions.

A Simple Agent in 50 Lines of TypeScript

Here’s a high-level overview of how the agent is implemented:

1. Initialize the Client: Set up the MCP client and connect to the desired servers.
2. Load Tools: Fetch the available tools from each server.
3. Start the Loop: Enter a while loop where the agent waits for user input, processes it using the available tools, and outputs the result.

Here’s a simplified version of the code:

import { MCPClient } from '@huggingface/mcp-client';

const client = new MCPClient();

// Connect to MCP servers
client.connect('http://localhost:8081'); // File System Server
client.connect('http://localhost:8082'); // Playwright MCP Server

async function loadTools() {
  const tools = await client.loadTools();
  console.log('Available tools:', tools);
}

loadTools();

// Main loop for user interaction
(async () => {
  while (true) {
    const input = prompt('Enter your command: ');
    if (!input) break;

    const response = await client.execute(input);
    console.log('Response:', response);
  }
})();

Example Use Cases

Let’s see how this works in practice with a couple of examples:

Writing a Haiku to a File

To write a haiku about the Hugging Face community and save it to a file named hf.txt on your desktop, you can input:

write a haiku about the Hugging Face community and write it to a file named "hf.txt" on my Desktop

The agent will use the file system tool to create and write to the specified file.

Web Interaction

For tasks that involve web browsing, you can input something like:

search for the latest news about AI and summarize it in one paragraph

The agent will use the Playwright MCP server to navigate the web, fetch the required information, and generate a summary.

Why This Matters

Adopting MCP simpl