中文 Log in Get started
Guides · MCP setup

Guides

8pt MCP setup

By 8pt · Updated

8pt MCP endpoint is https://8pt.dev/api/mcp (Streamable HTTP), and every request carries Authorization: Bearer <API Key> . Claude Code connects with a single claude mcp add command; Cursor, Codex,Windsurf and Trae take the same URL and header in their own MCP config. Create an API key in Settings › API Key. It needs the Builder plan.

#Before you start: an API key

Log in to 8pt and go toSettings › API Key and click Create key. The full key is shown only once, so save it to a password manager or an environment variable right away. Each account can have up to 5 keys, and they need the Builder plan (Builder is $9/month, $25/quarter or $75/year; there’s also Founding Lifetime at $179, one payment, limited to 100 seats).

Tip

Don’t commit keys to a repository. Every config below can read from an environment variable instead.

#Claude Code

Run once in your terminal and every project can use it:

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

In Claude Code, type /mcp to see whether 8pt is connected.

#Cursor

Write ~/.cursor/mcp.json (global) or in the project’s .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 terminal export EIGHTPT_API_KEY=<your API Key>:

~/.codex/config.toml
# ~/.codex/config.toml
[mcp_servers.8pt]
url = "https://8pt.dev/api/mcp"
bearer_token_env_var = "EIGHTPT_API_KEY"

#Windsurf, Trae and other clients

Any client that supports remote MCP (Streamable HTTP) can connect: add a server named 8pt to its MCP config, with the URL https://8pt.dev/api/mcp, with the header Authorization: Bearer <your API Key>. Check each client’s docs for where the config file lives; the format is usually the same as Cursor’s:

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

#Print the config with the CLI

If you have the 8pt CLI, it can print the config for each client so you can copy and paste it:

Terminal
npm i -g @8pt-dev/cli
8pt login
8pt mcp claude   #  or codex,cursor

#Lock in the 8pt look

Run once in the project root to write the 8pt design system into AGENTS.md, CLAUDE.md, .cursor/rules/8pt.mdc and .github/copilot-instructions.md. From then on the model checks 8pt before building UI and works from 8pt templates, components and themes:

project root
npx @8pt-dev/cli init

#Check the connection

Just ask in the chat, for example: use 8pt to find a pricing component with a monthly / yearly toggle and put it on the pricing page. Once connected, the model calls search_components to search,get_component to fetch the source, then adapt it into your project.

#Available tools

ToolWhat it does
design_uiDesign a page or screen to the 8pt rules (call this first)
search_componentsSearch components by Chinese or English description
get_componentFetch a component’s full integration prompt and source
list_templates / get_templateList or fetch page templates
list_skills / get_skillList Skills or fetch all of a Skill’s files
get_themeFetch a theme’s CSS variables
search_iconsSearch icon SVGs by name

#FAQ

What if 8pt MCP returns 401?

Check three things: the header is Authorization: Bearer followed by the full key; the key hasn’t been revoked; and the account has an active Builder plan.

How many API keys can one account have?

Up to 5. Create one per computer or editor and revoke any you no longer use.

Which editors does 8pt MCP support?

Any client that supports remote MCP (Streamable HTTP), including Claude Code, Cursor, Codex, Windsurf and Trae. For tools without MCP, use copied prompts or the 8pt CLI.

What’s the difference between MCP and the CLI?

MCP lets the model search and fetch 8pt content itself during a chat; the CLI is you running commands in the terminal to install components, templates, themes and Skills into your project. Both use the same API key.

Related reading