中文 Log in Get started

8pt, right inside
your model

The 8pt CLI and MCP hand every component, template, theme, icon and Skill to your model. Describe what you need in the terminal, Claude Code, Codex, Cursor or Trae, and it finds the right pieces in the library itself.

Get an API keySetup docs

Install and log in

  1. 01

    Install globally once

    npm i -g @8pt-dev/cli
8pt login
  2. 02

    Lock in the 8pt look

    Run in the project root to write the 8pt design system into AGENTS.md, CLAUDE.md, Cursor and Copilot rules: the model checks 8pt before building any UI and uses only 8pt templates, components and themes.

    8pt init
8pt install-skill
  3. 03

    Start using it

    Search and install components into your project; the source and integration prompt go to components/8pt/<slug>/.

    8pt search "pricing toggle"
8pt add pricing-toggle

The package is @8pt-dev/cli, and the command is 8pt. To skip the global install, use npx @8pt-dev/cli <Command>. 8pt login opens your browser, creates an API key and saves it locally. To skip login in CI or scripts, use --api-key <key> or the environment variable API_KEY_8PT.

Connect Claude Code

  1. 01

    Get an API key

    After logging in, create one inSettings › API Key . Available on the Builder plan.

  2. 02

    Add 8pt MCP

    Replace <your API Key> with the key you just created.

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

    Lock in the 8pt look

    Run once in the project root and the model calls design_ui before building any UI, using only 8pt templates, components and themes.

    npx @8pt-dev/cli init
  4. 04

    Just ask

    Say build a website for a budgeting app and the model matches templates and components to the 8pt rules, with a map of which component goes in which section.

Your API key stays on your machine. Never commit it to a repository.

Connect Codex

  1. 01

    Get an API key

    After logging in, create one inSettings › API Key . Available on the Builder plan.

  2. 02

    Add 8pt MCP

    Replace <your API Key> with the key you just created.

    # ~/.codex/config.toml
# Set it in your terminal first:export EIGHTPT_API_KEY=<your API Key>
[mcp_servers.8pt]
url = "https://8pt.dev/api/mcp"
bearer_token_env_var = "EIGHTPT_API_KEY"
  3. 03

    Lock in the 8pt look

    Run once in the project root and the model calls design_ui before building any UI, using only 8pt templates, components and themes.

    npx @8pt-dev/cli init
  4. 04

    Just ask

    Say build a website for a budgeting app and the model matches templates and components to the 8pt rules, with a map of which component goes in which section.

Your API key stays on your machine. Never commit it to a repository.

Connect Cursor

  1. 01

    Get an API key

    After logging in, create one inSettings › API Key . Available on the Builder plan.

  2. 02

    Add 8pt MCP

    Replace <your API Key> with the key you just created.

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

    Lock in the 8pt look

    Run once in the project root and the model calls design_ui before building any UI, using only 8pt templates, components and themes.

    npx @8pt-dev/cli init
  4. 04

    Just ask

    Say build a website for a budgeting app and the model matches templates and components to the 8pt rules, with a map of which component goes in which section.

Your API key stays on your machine. Never commit it to a repository.

Connect Trae

  1. 01

    Get an API key

    After logging in, create one inSettings › API Key . Available on the Builder plan.

  2. 02

    Add 8pt MCP

    Replace <your API Key> with the key you just created.

    // Trae → Settings → MCP → Add manually (JSON)
{
  "mcpServers": {
    "8pt": {
      "url": "https://8pt.dev/api/mcp",
      "headers": { "Authorization": "Bearer <your API Key>" }
    }
  }
}
  3. 03

    Lock in the 8pt look

    Run once in the project root and the model calls design_ui before building any UI, using only 8pt templates, components and themes.

    npx @8pt-dev/cli init
  4. 04

    Just ask

    Say build a website for a budgeting app and the model matches templates and components to the 8pt rules, with a map of which component goes in which section.

Your API key stays on your machine. Never commit it to a repository.

Connect other clients

  1. 01

    Get an API key

    After logging in, create one inSettings › API Key . Available on the Builder plan.

  2. 02

    Add 8pt MCP

    Replace <your API Key> with the key you just created.

    // Any MCP client that supports Streamable HTTP
{
  "name": "8pt",
  "transport": "http",
  "url": "https://8pt.dev/api/mcp",
  "headers": { "Authorization": "Bearer <your API Key>" }
}
  3. 03

    Lock in the 8pt look

    Run once in the project root and the model calls design_ui before building any UI, using only 8pt templates, components and themes.

    npx @8pt-dev/cli init
  4. 04

    Just ask

    Say build a website for a budgeting app and the model matches templates and components to the 8pt rules, with a map of which component goes in which section.

Your API key stays on your machine. Never commit it to a repository.

Then just ask your model

Connect once and 8pt’s tools show up in your model’s tool list.

design_ui

Call before building UI: returns design rules plus matching templates, components and themes for the request

search_components

Search components by description; returns name, category and preview URL

get_component

Fetch a component’s full source and adaptation prompt

list_templates

List page templates

get_template

Fetch template source

list_skills

List available Skills and access

get_skill

Fetch every file of a Skill

get_theme

Fetch theme variables

search_icons

Search icons by meaning and return SVGs

What do you want to do?

Everyday CLI commands. Full reference in theDocs.

Find and install components

Search by description and install the source and integration prompt in your project.

8pt add <slug>

Install a Skill

Writes every file of a Skill into the Claude, Codex and Cursor skills folders.

8pt skill <slug>

Get a template

Fetch a page template’s build prompt and HTML.

8pt template <slug>

Use a theme

Fetch a theme’s CSS variables for your stylesheet.

8pt theme <slug> --out theme.css

Find icons

Fetch SVGs by name, all on a 24px grid with currentColor.

8pt icons <Name>

Lock in the look

Write the 8pt design system into your project rules so the model builds UI only from 8pt assets.

8pt init

Setup steps and notes for every tool are in theMCP Docs. The CLI, MCP and API keys need the Builder plan.