Guides · October 19, 2023
What Is MCP? A Plain-English Guide for Web Builders
MCP (Model Context Protocol) is an open standard that lets an AI model call real tools, files, and APIs through a common interface instead of a one-off integration per app. For web builders, it is the plumbing that lets an AI assistant read your design tokens, query your store, or run your build without custom glue code for every tool.
By Polo Themes
MCP, short for Model Context Protocol, is an open specification for connecting AI models to external tools, data sources, and services through one consistent interface, instead of a different bespoke integration for every app an assistant needs to touch. If you build websites, storefronts, or design systems, the practical effect is this: an AI assistant can read your component library, query your product catalog, or trigger your build pipeline the same way regardless of which vendor built the assistant or which vendor built the tool, because both sides speak the same protocol. This guide explains what MCP actually is, why it exists, how it differs from a plain API or a plugin, and what it means for people building on the web today.
The Short Version
MCP defines a standard way for an AI application (the host, such as a chat client or coding assistant) to talk to a client that connects to a server, and that server exposes tools, resources, and prompts in a predictable shape. A tool might be "run this SQL query" or "create a Shopify product." A resource might be "the current contents of this file" or "the schema of this database." Before MCP, every AI product that wanted to talk to, say, GitHub or a database had to write and maintain its own custom connector to that specific system. MCP flips the problem: build one MCP server for GitHub, and every MCP-compatible AI client can use it without custom code on either side.
Where MCP Came From and Why It Exists
Anthropic introduced MCP as an open standard, and it has since been adopted broadly enough — across multiple AI vendors and a large ecosystem of community and commercial servers — that it functions less like one company's feature and more like a shared protocol, similar in spirit to how HTTP or LSP (the Language Server Protocol) became neutral ground that many different products build on. LSP is actually the closest historical analogy: before it existed, every code editor had to write its own integration for every programming language's autocomplete and linting. LSP let one language server work with any editor. MCP is doing the same thing for AI tool use — one tool server works with any compliant AI client.
The underlying problem MCP solves is sometimes called the "M×N integration problem." If you have M AI applications and N tools or data sources, building direct integrations means M×N pieces of glue code, each maintained separately, each breaking independently when either side changes. A shared protocol turns that into M+N: each AI application implements the client side once, each tool implements the server side once, and any client can talk to any server.
How MCP Is Different From a Regular API
A REST or GraphQL API is built for a specific purpose and consumed by developers who read its documentation and write code against it. MCP servers are built to be consumed by an AI model at runtime, which changes several things about the design. First, MCP servers expose machine-readable descriptions of what each tool does and what parameters it takes, so a model can decide which tool to call and how to call it without a human writing that logic in advance. Second, MCP standardizes the transport and message format (JSON-RPC over stdio for local tools, or over HTTP/SSE for remote ones), so any compliant client can discover and use any compliant server without custom parsing. Third, MCP separates three distinct primitives that a typical API blurs together:
- Tools — actions the model can invoke, like creating a file, sending a query, or triggering a deploy. These have side effects and typically require some form of user approval.
- Resources — read-only data the model can pull into context, like the contents of a file, a database schema, or a design token file. These are meant to be inspected, not executed.
- Prompts — reusable, parameterized instructions a server can offer, so a host application can surface a ready-made workflow (for example, "summarize this pull request") rather than the user writing it from scratch every time.
A plugin system, by contrast, is usually tied to one vendor's ecosystem — a plugin built for one chat product generally does not run in a competitor's product without a rewrite. MCP servers are meant to be portable across any host that implements the client side of the protocol.
A Concrete Example: MCP in a Web-Building Workflow
Picture a developer working in an AI-assisted coding environment on a Next.js storefront. Without MCP, the assistant only knows what is in the open files and whatever the developer pastes in. With MCP servers connected, the same assistant could have a database server exposing the product schema as a resource, a Git server exposing repository tools (create branch, open pull request), a design-tool server exposing the current Figma frame's tokens and layer structure, and a deployment server exposing a "trigger preview build" tool. The developer can ask the assistant to "pull the color tokens from the hero section in Figma and wire them into the theme config," and the assistant calls the design server's resource, reads the actual token values, and edits the codebase — instead of the developer manually copying hex codes out of a design tool and typing them into config files by hand. None of that requires the AI vendor to have built a custom Figma integration; it requires only that a Figma MCP server and the AI client both speak MCP.
This is also why AI-assisted, design-to-code workflows are moving fast right now: the bottleneck was never the model's ability to write code, it was the model's ability to reliably see the actual state of your design system, your data, and your infrastructure. MCP is a big part of closing that gap, because it gives the model a standard way to look instead of guess.
What an MCP Server Actually Looks Like
Under the hood, an MCP server is a small program — commonly written in TypeScript or Python — that implements the protocol's message handling and exposes a defined set of tools, resources, and prompts through a schema. Local servers typically run as a subprocess on the developer's machine and communicate over standard input/output, which is why they are common in coding assistants and command-line tools. Remote servers run over HTTP and can be shared across a team or exposed publicly, similar to a hosted API. Security matters a great deal here: because a tool call can have real side effects (deleting a file, sending a message, spending money on an API), most serious MCP hosts require explicit user approval before a tool executes, and treat every tool description as something to review rather than blindly trust, since a poorly written or malicious server description can attempt to manipulate the model's behavior.
What MCP Means for Designers and Front-End Builders, Not Just Backend Engineers
It is easy to read MCP as a backend or DevOps topic, but the implications for front-end and design work are just as direct. A design system with clearly named tokens, consistent component structure, and predictable file organization is far easier for an MCP-connected assistant to read and manipulate accurately than one with ad hoc naming and one-off overrides. That is not a new requirement MCP invented — it is the same discipline that makes a design system maintainable for humans — but MCP raises the cost of skipping it, because now an assistant's ability to correctly translate a Figma frame into working markup and CSS depends on how legible that structure is. Well-organized Figma kits with clean layer names, consistent auto-layout, and a real token structure translate far more reliably through an AI pipeline than a loose collection of static frames, which is one more reason disciplined component and token structure keeps paying off as tooling changes.
Polo Themes' current products — the Figma UI kits and the OS 2.0 Shopify themes — are built with exactly that kind of consistent structure: named tokens, organized components, and predictable section patterns. That is not the same thing as an MCP integration, and we are not claiming one exists today. But a design file built with clean, well-labeled structure is inherently better raw material for the AI-assisted, design-to-code workflows that MCP is helping standardize, whether that assistance comes from a design tool's own AI features, a code editor's assistant, or a future MCP-based pipeline.
MCP vs. Function Calling vs. Plugins: A Quick Comparison
These three terms get used loosely, so it helps to separate them. Function calling (or tool calling) is the underlying model capability — the model's ability to decide "I should call this function with these arguments" and return that decision in a structured format. It is a feature of the model itself. Plugins are a product-level concept: a specific AI application's mechanism for extending what it can do, usually proprietary to that product. MCP sits between the two: it is a standard way to package and expose tools (which the model will call via its function-calling capability) so that any compliant host application can use them, without being locked to one product's plugin format. In short, function calling is what the model can do, plugins are one vendor's way of wiring that up, and MCP is an attempt at a vendor-neutral wiring standard.
Should You Build an MCP Server for Your Product?
If your product has an API and a reasonable chance that people will want an AI assistant to act on it — query data, create records, trigger workflows — an MCP server is a relatively small, high-leverage investment, because it is a thin wrapper around functionality you likely already have rather than a new system to build from scratch. The main design work is deciding which operations are safe to expose as tools, which data makes sense as read-only resources, and writing tool descriptions clearly enough that a model calling them without a human in the loop still calls them correctly. Treat those descriptions as a real interface contract, not an afterthought: ambiguous parameter names and vague descriptions cause exactly the kind of wrong-tool-call errors you would expect from ambiguous function signatures anywhere else in software.
Frequently Asked Questions
Is MCP owned by one company, or is it a shared standard?
Anthropic introduced the specification and open-sourced it, but MCP is designed and positioned as a vendor-neutral protocol, and it has been adopted by multiple AI providers and a large number of independent tool builders. Its long-term value depends on staying broadly adopted rather than tied to a single vendor's ecosystem, the same way HTTP's value depends on no browser or server owning it exclusively.
Do I need to know MCP to use AI coding tools?
No. Most developers benefit from MCP servers that someone else has already built and configured — a Git tool, a database tool, a design tool — without ever writing protocol-level code themselves. Understanding what MCP is helps you reason about why an assistant can or cannot see certain context, and helps you evaluate which MCP servers are worth connecting for your workflow.
Is MCP secure? What happens if a malicious server is connected?
MCP itself is a protocol, not a guarantee of safety — security depends on how the host application implements approvals and how carefully you vet the servers you connect. Reputable MCP hosts require explicit user confirmation before a tool executes any action with real side effects, and treat tool and resource descriptions as untrusted content that should not be allowed to silently override the model's instructions. The practical rule is the same one that applies to installing any dependency: only connect servers from sources you trust, and review what permissions a tool is actually requesting before approving it.
Does Polo Themes sell MCP servers or Next.js starter templates?
Not today. Polo Themes currently builds Figma UI kits and OS 2.0 Shopify themes. Headless, Next.js, and AI-native tooling are a direction we are exploring and writing about, and this guide is part of that groundwork — but we are not claiming a shipped product that does not exist yet. If and when that changes, we will say so plainly rather than implying it here.
How is MCP different from a webhook?
A webhook is a one-directional, event-triggered callback: a service pushes data to a URL when something happens. MCP is bidirectional and model-driven: a client actively discovers what tools and resources a server offers and decides, at reasoning time, which ones to call and with what arguments. Webhooks notify; MCP lets a model act.
Where can I read more about how this connects to design and build workflows?
Our blog covers the broader shift toward AI-assisted, design-to-code workflows for Shopify and headless commerce as we publish more on the topic — this guide is meant as the plain-English foundation for that series.