MCP setup

8pt MCP lets Claude Code, Cursor, Codex, Trae and other editors search and use 8pt components, templates, themes, icons and Skills directly.

#Before you start

The MCP endpoint is https://8pt.dev/api/mcp, over Streamable HTTP. Every request carries Authorization: Bearer <your API Key>. Create an API key inSettings › API Key; it needs the Builder plan.

#Claude Code

Terminal

claude mcp add --transport http 8pt https://8pt.dev/api/mcp \
  --header "Authorization: Bearer <your API Key>"

#Cursor

Write ~/.cursor/mcp.json:

~/.cursor/mcp.json

{
  "mcpServers": {
    "8pt": {
      "url": "https://8pt.dev/api/mcp",
      "headers": { "Authorization": "Bearer <your API Key>" }
    }
  }
}

#Codex

Write ~/.codex/config.toml, and set in your environment EIGHTPT_API_KEY:

~/.codex/config.toml

[mcp_servers.8pt]
url = "https://8pt.dev/api/mcp"
bearer_token_env_var = "EIGHTPT_API_KEY"

#Trae and other clients

In Trae, paste the JSON under Settings › MCP › Add manually; other clients that support Streamable HTTP work the same way:

mcp.json

{
  "mcpServers": {
    "8pt": {
      "url": "https://8pt.dev/api/mcp",
      "headers": { "Authorization": "Bearer <your 8pt API Key>" }
    }
  }
}

#Available tools

Tool	What it does
`search_components`	Searches components by a Chinese or English description and returns slug, name, category and summary. Leave query empty to return everything.
`get_component`	Fetches a component’s full integration prompt, with HTML, CSS and JS source and integration steps.
`list_templates`	Lists every page template and its sections.
`get_template`	Fetches a template’s build prompt and full HTML source.
`list_skills`	Lists every Skill and its access level.
`get_skill`	Fetches every file of a Skill (SKILL.md and the files it references).
`get_theme`	Fetches a theme’s CSS variables; leave slug empty to list every theme.
`search_icons`	Searches icons by English name and returns 24px SVGs with stroke=currentColor.
`submit_component`	Submits a finished native component (HTML, CSS, optional JS) as a draft on this account for review.

Every tool is read-only. Once connected, just ask in the chat, for example: find an 8pt pricing toggle and put it on the home page.