Back to Blog
What Is MCP? A Frontend Developer's Guide
Share:
MCP (Model Context Protocol) is an open standard, introduced by Anthropic in November 2024, that lets AI applications connect to external tools, data, and services through one shared interface — instead of a custom integration for every tool. If you've heard MCP called "a USB-C port for AI," that's the gist: one connector, many devices. This guide explains what MCP actually is, how it works, what an MCP server is, and the parts most explainers skip — written for developers who build things, with a frontend example to make it concrete.
Last updated: July 2026. MCP is young and moving quickly; the fundamentals below are stable, but the extensions (like MCP Apps) are still evolving — see the official docs for the current spec.
The Problem MCP Solves
Before MCP, connecting an AI model to a tool — GitHub, a database, your component library — meant writing a custom, one-off integration for that exact pairing. With N models and M tools, you were on the hook for roughly N × M bespoke connectors, and each new tool meant more glue code.
MCP collapses that to N + M. Build one MCP server for your tool, and every MCP-speaking AI app can use it. Add one MCP client to your app, and it can reach every MCP server. That's the whole point: a standard in the middle, so integration stops being quadratic.
How MCP Works: Host, Client, Server
Most quick explainers say "MCP has a client and a server." That's close, but the accurate model has three roles — and the distinction matters once you start building:
- Host — the AI application you actually use: Claude Desktop, Cursor, VS Code, ChatGPT. It's what the human interacts with.
- Client — a connector that lives inside the host, one per server connection. It speaks the protocol and manages the link to a single server.
- Server — a lightweight program that exposes capabilities (tools, data, prompts) to the client. It's the part you write when you want to expose your own tool.
Underneath, the messages are JSON-RPC 2.0 over a transport — local stdio for a server running on your machine, or HTTP/SSE for a remote one. There's a handshake when a client connects, and then the model can discover and call what the server offers. For the full architecture and the step-by-step data flow, see how MCP works.
The Three Primitives
What a server exposes falls into three types, and who controls each is the part worth remembering:
| Primitive | Controlled by | What it is | Example |
|---|---|---|---|
| Tools | The model | Actions the model decides to call | Search a repo, run a query, install a component |
| Resources | The app | Data provided to the model as context | A file, a database record, a document |
| Prompts | The user | Reusable templates you invoke | A slash command or saved workflow |
Most of the MCP you'll touch is tools, because that's what turns a chatbot into something that acts.
What Is an MCP Server?
Since it's the term people search for most after "what is MCP," it deserves its own answer: an MCP server is a lightweight program that exposes one tool's capabilities to any AI client. A GitHub server exposes tools for issues and pull requests. A Postgres server exposes tools to inspect a schema and run queries. A DesignRevision MCP server exposes tools to browse and install real shadcn/ui components. Servers run locally (as a subprocess) or remotely (behind an HTTPS URL), and a single AI app can connect to many at once. If you want the practical side, our guides on adding servers to Claude Code, Cursor, and other clients show exactly how.
MCP Server vs. MCP Connector: Same Thing?
You'll also run into the term MCP connector, and it trips people up. In practice it's the same idea seen from the client's side: apps like ChatGPT and Claude label an added MCP server a "connector" in their interface — ChatGPT's Settings → Apps & Connectors, Claude's Connectors panel. So "adding an MCP connector" and "adding an MCP server" almost always describe the same action. The distinction, if you want to be precise: the server is the program that exposes the tools; the connector is the client-side link that plugs into it. When a product's UI says connector, read it as the MCP server you're connecting to.
MCP vs. API (and RAG)
A fair question — the People Also Ask box is full of it. Here's the quick contrast:
| What it is | What it's for | |
|---|---|---|
| API | One integration you build for one service | Programmatic access to a single tool |
| MCP | A standard layer above APIs | Any AI app reaching any tool, with runtime tool discovery |
| RAG | Retrieval that grounds a model's text | Fetching information into context |
An API is a single integration you build for one service; MCP is a standard layer above APIs that lets any AI app reach any tool without bespoke glue, plus a runtime discovery step so the model learns what's available. And RAG (retrieval-augmented generation) is about fetching information to ground a model's text; MCP is broader — it's about taking action through tools, not just reading. They coexist: an MCP server can wrap a RAG pipeline as a tool. The short version: MCP uses APIs underneath and complements RAG, but it isn't a replacement for either — we unpack this fully in MCP vs API.
A Concrete Example: MCP for a Frontend Developer
MCP use cases are easiest to grasp with a real example, and abstractions click faster with a concrete task. Say you're building a settings page and need a proper dialog, form, and toast — real, accessible components, not markup the model half-remembers.
Without MCP, the model writes a <Dialog> from memory, guesses the import path, and misses a dependency. With an MCP server for your component library connected, the flow changes: the model discovers a get_component tool, calls it for the real shadcn/ui dialog, and installs it with the correct command and dependencies resolved. That's MCP in one sentence — the model stops guessing and starts using your actual tools. It's why a component registry is a natural fit for the protocol, and what DesignRevision MCP does for frontend work specifically.
MCP vs. MCP-UI vs. MCP Apps
Here's the distinction almost no "what is MCP" article makes, and the one that confuses people most:
- MCP — the protocol itself. Servers expose tools and data; the exchange is structured text and tool calls. No visuals.
- MCP-UI / MCP Apps — an extension that lets a server return an interactive interface: a small HTML app rendered inside the AI client (in a sandboxed iframe), so a tool can show a real widget instead of a wall of text. MCP Apps is the effort to standardize this, and clients like VS Code and ChatGPT have begun supporting it.
The key point: MCP Apps are additive. A server can be a perfectly good MCP server and never return a scrap of UI. If you're just connecting tools, you're using plain MCP; MCP Apps only enter the picture when a server wants to render an interface. Conflating the two is the most common source of "wait, what's the difference?" confusion.
Why MCP Matters
The reason MCP went from one company's announcement to something every AI vendor supports: it standardized the boring-but-critical layer. Instead of every AI app reinventing tool integration, they share one protocol — which means a server you build once works in Claude, ChatGPT, Cursor, and VS Code alike. It's the foundation of agentic AI — the shift from a text box that describes what to do into an assistant that does it: reading live files, querying real databases, installing real components. For developers, it means the integration you write has a market of clients on day one, not just the one app you targeted.
Conclusion
The meaning of MCP comes down to one idea: the Model Context Protocol is the open standard that lets AI applications connect to tools, data, and actions through one shared interface, replacing N × M custom integrations with N + M. It works through a host, a client inside it, and servers you can build; it speaks JSON-RPC with three primitives (tools, resources, prompts); and its MCP Apps extension adds optional interactive UI on top. If "what is MCP" brought you here, the one-line answer is this: it's how AI stops being a sealed chatbot and starts using the tools you already have — including, for frontend work, your component library.
Related Resources
Frequently Asked Questions
-
MCP stands for Model Context Protocol. It is an open standard introduced by Anthropic in November 2024 that lets AI applications connect to external tools, data, and services through one shared interface, instead of a custom integration for each tool.
-
An MCP server is a lightweight program that exposes a specific set of capabilities — tools, data resources, and prompts — to an AI application over the Model Context Protocol. For example, a GitHub MCP server exposes tools for reading issues and pull requests; a component server like DesignRevision MCP exposes tools for installing shadcn/ui components. The AI app (the client) calls those tools during a task.
-
It is built on API-like foundations but solves a different problem. A traditional API is one integration you write for one service. MCP is a standard layer above that: it lets any MCP-speaking AI app talk to any MCP server without bespoke glue code, and it adds a discovery step so the model learns what tools exist at runtime. So MCP uses APIs underneath but standardizes how an AI reaches them.
-
Under the hood, MCP messages are JSON-RPC 2.0 over a transport (local stdio or remote HTTP/SSE). But "just JSON-RPC" undersells it — the value is the standardized capabilities on top: a defined handshake, and three primitives (tools, resources, prompts) with clear ownership. JSON-RPC is the envelope; MCP is the shared language inside it.
-
Anthropic introduced the Model Context Protocol in November 2024 as an open standard, and open-sourced the specification and reference servers. It has since been adopted broadly — Claude, OpenAI's ChatGPT and Codex, Google, Cursor, and VS Code all support MCP as clients — which is what turned it from one vendor's idea into an ecosystem.
-
MCP-UI and MCP Apps are an extension of MCP that lets a server return an interactive interface — a small HTML app rendered inside the AI client — instead of only text. Plain MCP exchanges structured data and tool calls; MCP Apps add a visual layer on top for richer workflows. They are additive: an MCP server can support MCP without ever returning UI.
-
An MCP connector is the client-side name some apps give to an added MCP server. ChatGPT (Settings → Apps & Connectors) and Claude both call a connected MCP server a "connector." So an MCP connector and an MCP server usually refer to the same thing: the server exposes the tools, and the connector is the link your AI app uses to reach it.
-
In AI, MCP (Model Context Protocol) is the standard that lets a language model reach beyond its own text window to use real tools and data — reading files, querying databases, calling APIs, installing components. It is what upgrades an AI from something that only describes actions into an agent that performs them, using a shared protocol every major AI app now supports.
-
The MCP protocol is the technical specification behind Model Context Protocol: JSON-RPC 2.0 messages exchanged over stdio or HTTP/SSE, a connection handshake, and three capability primitives — tools, resources, and prompts. It defines how an AI client and an MCP server talk to each other so that any compliant client works with any compliant server.
Join 50k+ subscribers
Web dev, SaaS, growth & marketing. Weekly.
Keep Learning
More articles you might find interesting.
