# What Is MCP? A Frontend Developer's Guide > What is MCP? Model Context Protocol is an open standard from Anthropic that connects AI models to your tools — here is how it works, for developers. Source: https://designrevision.com/blog/what-is-mcp --- **MCP (Model Context Protocol) is an open standard, introduced by [Anthropic in November 2024](https://www.anthropic.com/news/model-context-protocol), 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](https://modelcontextprotocol.io) 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](https://www.jsonrpc.org/specification)** 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](/blog/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](/mcp) server exposes tools to browse and install real [shadcn/ui components](/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](/blog/add-mcp-server-to-claude-code), [Cursor](/blog/add-mcp-server-to-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](/blog/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 `` 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](/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 - [DesignRevision MCP — the shadcn/ui MCP server](/mcp) - [MCP Clients Compared: Every AI Coding Agent](/blog/mcp-clients-compared) - [MCP Tools Reference — Parameters & Examples](/mcp/tools) - [How to Add an MCP Server to Claude Code (2026 Guide)](/blog/add-mcp-server-to-claude-code) - [Best MCP Servers for Claude Code (2026): Tested & Ranked](/blog/best-mcp-servers-for-claude-code) - [Browse the shadcn/ui component registry](/components)