Build with AI
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.
Set it up#
Node.js 20 or newer. Leave the key out to use the free sections.
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/mcp.json (or .cursor/mcp.json in a project)
{
"mcpServers": {
"frontier": {
"command": "npx",
"args": ["-y", "@frontiertemplates/mcp"],
"env": { "FRONTIER_LICENSE_KEY": "ft_your_key" }
}
}
}~/.codex/config.toml
[mcp_servers.frontier]
command = "npx"
args = ["-y", "@frontiertemplates/mcp"]
env = { FRONTIER_LICENSE_KEY = "ft_your_key" }
The tools#
This list is read from the server's code when this page is built, so it is always the real set:
| Tool | What it returns | Arguments |
|---|---|---|
list_templates | List the Frontier templates with category, style, Wada colour combination, fonts and section counts. | – |
get_design_tokens | A template's Wada palette, CSS custom properties (colours, fonts, spacing and more), font families, Google Fonts links and the stylesheets its pages load. | template |
search_sections | 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). | query? category? template? theme? free? interactive? animated? format? kind? limit? |
list_sections | Search the section library. | template? type? query? limit? kind? category? style? layout? animation? |
get_section | 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. | id format |
list_alternatives | 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). | role current? |
get_section_html | One library section (a variant id from list_alternatives or list_sections) as pasteable HTML restyled by a template token set: a theme id. | id theme? tokens? mode |
get_page_blueprint | 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. | template page |
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.
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_sectionin jsx format.” - “Get the Meetly footer as HTML and adapt it to my brand, keeping the layout.”
Still stuck?Write to us with your order number. We reply within one working day.
Contact support