# The MCP server

> The Frontier MCP server gives your coding agent real design: the sections of shipped templates as clean HTML, JSX or a prompt, each template's design tokens, and page blueprints. Your agent calls it when you ask for a page.

> **Opening soon** The server is built and its tools are final, but the npm package isn't published yet and keys aren't on sale. The setup below is what you'll run when it opens. [The MCP page](https://frontiertemplates.com/mcp) has the latest.

## Set it up

Node.js 20 or newer. Leave the key out to use the free sections.

Claude Code:

```shell
$ claude mcp add frontier -- npx -y @frontiertemplates/mcp
# with a licence key:
$ claude mcp add frontier -e FRONTIER_LICENSE_KEY=ft_your_key -- npx -y @frontiertemplates/mcp
```

Cursor:

```json
{
  "mcpServers": {
    "frontier": {
      "command": "npx",
      "args": ["-y", "@frontiertemplates/mcp"],
      "env": { "FRONTIER_LICENSE_KEY": "ft_your_key" }
    }
  }
}
```

Codex:

```toml
[mcp_servers.frontier]
command = "npx"
args = ["-y", "@frontiertemplates/mcp"]
env = { FRONTIER_LICENSE_KEY = "ft_your_key" }
```

![The MCP page's setup steps: copy your key, add the server with tabs for Claude Code, Cursor and Codex, and ask for a page.](https://frontiertemplates.com/img/docs/store-mcp-setup.webp)

## The tools

This list is read from the server's code when this page is built, so it is always the real set:

- `list_templates`(): List the Frontier templates with category, style, Wada colour combination, fonts and section counts.
- `get_design_tokens`(template): A template's Wada palette, CSS custom properties (colours, fonts, spacing and more), font families, Google Fonts links and the stylesheets its pages load.
- `search_sections`(query?, category?, template?, theme?, free?, interactive?, animated?, format?, kind?, limit?): Search every unique section of every template (the store's sections library): full-text over titles, templates, categories, tags and copy, filtered by category (navigation, hero, logos, features, bento, stats, testimonials, pricing, faq, cta, blog, team, contact, gallery, process, tabs, comparison, integrations, newsletter, footer, 404, other), template, theme, free, interactive, animated and format (html, webflow, claude-code, astro, elementor).
- `list_sections`(template?, type?, query?, limit?, kind?, category?, style?, layout?, animation?): Search the section library.
- `get_section`(id, format): Get one section as clean HTML (uses the template CSS classes), JSX, or a ready-made Claude Code prompt that rebuilds it in your stack.
- `list_alternatives`(role, current?): Library sections that can replace each other because they play the same role on a page (header, hero, proof, features, showcase, stats, cases, blog, faq, cta, footer, pricing).
- `get_section_html`(id, theme?, tokens?, mode): One library section (a variant id from list_alternatives or list_sections) as pasteable HTML restyled by a template token set: a theme id (e.g.
- `get_page_blueprint`(template, page): The ordered list of sections that make up one template page (header first, footer last), with ids you can pass to get_section, plus the page's title and meta description.

## Free and licensed

- **Free, no key:** a selection of sections across the templates, every library variant, and the tools that list templates, tokens and blueprints.
- **With a key:** every section and each template's full base CSS. A locked section answers with a short upgrade note instead of failing.
- The key is read from `FRONTIER_LICENSE_KEY`. It is never logged or written to disk.

Keys come with the Studio plan (three months) and the Agency plan (six months), or on their own for $99 a year (a proposed price until keys go on sale). See [Pricing and Full Access](https://frontiertemplates.com/docs/pricing-and-full-access).

## Prompts to try

```
> Build our pricing page like Relay's.
get_page_blueprint("relay", "pricing")
get_design_tokens("relay")
get_section("relay-pricing-…", "jsx")
Pricing page built from Relay's sections, in your tokens.
```

- “Use the frontier MCP: list the free hero sections and pick the one that fits a developer tool.”
- “Get the design tokens for Northwind and set up my Tailwind theme with its palette and fonts.”
- “Fetch the blueprint for Relay's pricing page, then build each section as a React component with `get_section` in jsx format.”
- “Get the Meetly footer as HTML and adapt it to my brand, keeping the layout.”

---
Source: https://frontiertemplates.com/docs/mcp-server · All guides: https://frontiertemplates.com/docs