Get Full Access 50% off

Lexington MCP. Finished Tailwind sections from every Lexington theme, as Astro, React or HTML, served to through the Model Context Protocol

What the MCP is

Lexington MCP is a server your coding agent connects to. It holds the finished sections of every Lexington theme, with each theme’s tokens, fonts, small components and a written design system. The agent asks it for what a page needs, receives the files, writes them into your project and fills them with your content. The design work is already done; the agent installs and fills.

It is a subscription (Personal, one key; Team, five keys), sold on Polar. Without a key the catalogue tools work and the Prima Persona theme is fully open, so you can try the whole flow before buying.

Setup

You need the server URL and, for paid themes, your licence key from the Polar receipt (it starts with LEXMCP-). The key travels as a bearer header.

Server: https://mcp.lexingtonthemes.com/mcp

Cursor

.cursor/mcp.json in the project (or ~/.cursor/mcp.json for every project):

json
{
  "mcpServers": {
    "lexington": {
      "url": "https://mcp.lexingtonthemes.com/mcp",
      "headers": { "Authorization": "Bearer LEXMCP-XXXX-XXXX" }
    }
  }
}

Claude Code

bash
claude mcp add --transport http lexington https://mcp.lexingtonthemes.com/mcp \
  --header "Authorization: Bearer LEXMCP-XXXX-XXXX"

Codex

~/.codex/config.toml:

toml
[mcp_servers.lexington]
url = "https://mcp.lexingtonthemes.com/mcp"
http_headers = { Authorization = "Bearer LEXMCP-XXXX-XXXX" }

VS Code

.vscode/mcp.json in the project. Copilot asks you to trust the server the first time:

json
{
  "servers": {
    "lexington": {
      "type": "http",
      "url": "https://mcp.lexingtonthemes.com/mcp",
      "headers": { "Authorization": "Bearer LEXMCP-XXXX-XXXX" }
    }
  }
}

Zed

Your settings file (zed: open settings file):

json
{
  "context_servers": {
    "lexington": {
      "url": "https://mcp.lexingtonthemes.com/mcp",
      "headers": { "Authorization": "Bearer LEXMCP-XXXX-XXXX" }
    }
  }
}

OpenCode

opencode.json. oauth is off because the key goes in the header:

json
{
  "mcp": {
    "lexington": {
      "type": "remote",
      "url": "https://mcp.lexingtonthemes.com/mcp",
      "oauth": false,
      "headers": { "Authorization": "Bearer LEXMCP-XXXX-XXXX" }
    }
  }
}

Leave the header out to use the free tier. Any other MCP client that speaks streamable HTTP works the same way: URL plus an Authorization header.

The tools

Seven tools, small on purpose so any agent learns them in one read.

  • get_guidelines: the rules. How to install, fill and fit a section, how to reskin, how to port, what never to change. Agents read it first on their own.
  • list_themes: every theme with who it is for, its personality, fonts, light or dark mode and section count.
  • search_sections: sections by theme, mode and keywords, with a one line description each. Plural insensitive: “hero” finds “heros”.
  • get_theme_setup: the theme’s tokens.css and Fonts.astro, plus the two setup steps. Once per project per theme.
  • get_design: the theme’s design system as prose (type recipes, colour roles, spacing, components, do and don’t) with a measured roles.json block at the end.
  • get_sections: the files for one or more sections, ready to write. format: "astro" (default) gives Astro components with their dependencies; format: "tsx" gives React components; format: "html" gives flat HTML with every class expanded.
  • get_skill: the companion skill, written into your project. The theme’s own design skill (the same one that ships in the theme repo, with a note on where things live under the MCP layout) plus a shared Lexington sections skill (fill, fit, reskin, port). target picks the folder: cursor writes .cursor/skills/, claude writes .claude/skills/, agents returns one block to append to AGENTS.md.

What a session looks like

  1. The agent calls list_themes and picks one theme that fits the brief. One theme per page.
  2. search_sections for each role the page needs: hero, features, pricing, FAQ, closing call.
  3. get_theme_setup once. It writes tokens.css and adds one import to the global CSS, and puts the fonts in <head>.
  4. get_sections with all the picks. Files land under src/components/lexington/<theme>/, imports already namespaced so nothing clashes with your own Button or Wrapper.
  5. It composes the page by importing and stacking the sections, then replaces the demo copy, images and links with yours.
  6. get_skill once. From then on the theme’s rules live in your project, and every later edit follows them whether or not the server is connected.

Prompts that work well:

  • “Build a landing page for a bookkeeping app with the Lexington MCP. Warm and serious, not dark.”
  • “Add a pricing section from the same theme under the features.”
  • “Swap the hero for a split layout with a screenshot on the right.”

Install layout

Everything lives under src/components/lexington/:

plaintext
src/components/lexington/<theme>/sections/<group>/<Name>.astro
src/components/lexington/<theme>/fundations/...
src/components/lexington/<theme>/tokens.css
src/components/lexington/shared/<placeholder>.svg

The host needs the @/ alias pointing at src/ (paths: { "@/*": ["src/*"] } in tsconfig.json) and Tailwind CSS 4.

If your project already has a palette, do not import tokens.css; alias the theme’s colour scales onto your own tokens by role instead. get_design says what each scale means (action, panel, ink, muted, rule). Keep the theme’s fonts unless you have an equivalent.

The rule

The section is right; the project adapts to it. Copy, images, links and data are yours to change. Spacing, type scale, radius and layout are the theme’s. If something looks off after install, the cause is almost always a missing font or the tokens file, not the section. The guidelines the agent reads say the same thing in more detail.

Reskin

“The hero from theme A in theme B’s look” is allowed. Ask for it and the agent keeps A’s layout, swaps A’s fundations for B’s and maps colours by role using both themes’ roles.json. Sections defined by their skin (a dashed frame, a bleeding mock UI) do not reskin well; the agent should say so and offer B’s own section.

Prompt: “Take brightlight’s hero-2 and reskin it into buio using get_design for both.”

React (Next, Vite, Remix)

Ask for format: "tsx". Each section arrives as one .tsx file: a default export component with no props, every Tailwind class expanded, no fundations, plus the placeholder images for public/images/lexington/. Paths assume src/components/lexington/<theme>/<group>/<Name>.tsx with the @/ alias; the agent moves them if your components live elsewhere. The host needs Tailwind CSS 4 and the theme’s tokens.css, nothing else.

Sections with behaviour (tabs, sliders, accordions) are client components: "use client" at the top and a sibling <Name>.behaviour.js that runs once on mount. It is the theme’s own script, ported as is, loading its library from a CDN. Leave it alone.

Copy is plain JSX text; edit it in place. Repeated blocks (cards, tiers, FAQ items) are unrolled; turn them into a map over data if you like, without touching classes.

Prompt: “Pull brightlight/pricing/pricing-2 as tsx and put it under the features.”

shadcn registry

The same components are a shadcn registry, for when you would rather type a command than talk to an agent. In components.json:

json
{
  "registries": {
    "@lexington": {
      "url": "https://mcp.lexingtonthemes.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${LEXINGTON_KEY}" }
    }
  }
}

Put the key in your environment (LEXINGTON_KEY=LEXMCP-... in .env.local), then:

bash
npx shadcn add @lexington/brightlight-features-feature-1

The item name is the section id with / as -. The theme item @lexington/brightlight is pulled in automatically: it writes the theme’s colour scales, fonts and keyframes into your @theme block and prints the font <link> tags to add to <head>. Components land in components/lexington/<theme>/, images in public/images/lexington/. The index is at /r/registry.json; the free theme and the index need no key.

Vite projects: the @/ alias must be in the root tsconfig.json too (not only tsconfig.app.json), or the CLI cannot resolve where components go.

Vue, Svelte, plain HTML

Ask for format: "html". You get the same section as flat HTML with every Tailwind class expanded, no fundations, and the placeholder images. Every class string stays exactly as it is. Inline <script type="module"> blocks are the section’s own behaviour; move them into a mounted hook or keep them as is.

Parts (kind: "part", cards that take props) have no flat export in either format; use the Astro version.

Keys, seats and fair use

  • Personal is one key. Team is five keys, each for one person; do not share a key.
  • Fair use is 1,000 section pulls per key per calendar month. It resets on the first. Hitting it is rare; if a team does, the server says so and points at the Team plan.
  • The server validates keys against Polar and caches the result for an hour. A cancelled subscription stops working within an hour of the period ending.
  • Sections the agent wrote into your projects stay yours under the Lexington licence after you cancel.

Support

Email michael[@]lexingtonthemes.com. Include the theme, the section id and what the agent was asked to do.