Install the UI kit MCP locally

How the connection works#

The aiw CLI is also an MCP server. MCP, the Model Context Protocol, is the open standard AI assistants use to call tools. Claude, Cursor, GitHub Copilot, Windsurf, Codex, Gemini and many more speak it, and all of them start the same server with npx -y ai-website mcp.

The server runs on your machine, in the folder of your project. Through it the assistant searches components, installs them as source, builds the page and checks it in the browser. Your code stays on your machine, only the components come from the registry of the kit.

npx -y ai-website mcp

Node 22.12 or newer is all it needs, see requirements. With a global install (npm i -g ai-website) the command is shorter, aiw mcp.

Set up your assistant#

Pick your assistant. Added once, the kit is ready in every conversation.

Claude Code#

Anthropic

One command in the terminal registers the server for every project on this machine.

claude mcp add ai-website --scope user -- npx -y ai-website mcp

In Claude Code, /mcp then lists the server ai-website with its tools.

Claude Desktop#

Anthropic

Settings, Developer, Edit config opens claude_desktop_config.json. Add the server under mcpServers and restart the app.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

The tools of ai-website then appear in the tools menu of a new chat.

Cursor#

Anysphere

Put the server into ~/.cursor/mcp.json for every project, or into .cursor/mcp.json for one project.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Under Settings, MCP the server shows a green dot and its tools. The agent uses them in chat.

GitHub Copilot in VS Code#

GitHub, in VS Code

VS Code reads the servers of a project from .vscode/mcp.json, under the key servers. Copilot uses them in agent mode.

{
  "servers": {
    "ai-website": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Switch the Copilot chat to Agent, the tools button then lists the tools of ai-website.

Windsurf#

Windsurf

Cascade keeps its servers in ~/.codeium/windsurf/mcp_config.json, under mcpServers.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Refresh the server list in Cascade, ai-website then shows up with its tools.

Codex by OpenAI#

OpenAI

The Codex CLI and the Codex extension share ~/.codex/config.toml. One command writes the entry for you.

codex mcp add ai-website -- npx -y ai-website mcp

In config.toml the entry then sits under [mcp_servers.ai-website], codex mcp list shows it.

Gemini CLI#

Google

The Gemini CLI reads its servers from ~/.gemini/settings.json, or from .gemini/settings.json in a project.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

In the Gemini CLI, /mcp then lists ai-website with its tools.

ChatGPT#

OpenAI

ChatGPT connects to MCP servers on the internet, not to programs on your machine. It gets the kit through the public server of ai-website.com, which is on its way.

codex mcp add ai-website -- npx -y ai-website mcp

Until then Codex, the coding agent of OpenAI, uses every tool locally.

Any other MCP client#

Zed, Cline, Continue, JetBrains AI and more

Every client that speaks MCP over stdio runs the same command. Enter npx as the command and -y ai-website mcp as its arguments.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

With a global install (npm i -g ai-website) the command is simply aiw mcp.

{
  "mcpServers": {
    "ai-website": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Public server#

Without any install, connect any assistant to https://ai-website.com/mcp. The setup for every client, with pictures, is on the page of the MCP server.

Connect a project#

aiw mcp init writes the .mcp.json of a project with every server the work needs, Playwright and Chrome DevTools for the browser, Context7 and Astro Docs for current docs, and the CLI itself. Claude Code reads this file directly, other assistants take the same entries into their own file. The rules of the stack go into CLAUDE.md as a section of their own, which you hand to other assistants as their rules file too. Your own text in it stays.

aiw mcp init

aiw new does this when it creates a project. Options such as --servers and --no-rules are listed under aiw mcp init.

The tools#

Every command is also a tool, with aiw_ in front. The assistant picks them on its own, you never have to name them.

• aiw_doctoraiw doctor
• aiw_newaiw new
• aiw_addaiw add
• aiw_outdatedaiw outdated
• aiw_updateaiw update
• aiw_componentsaiw components
• aiw_registry_buildaiw registry build
• aiw_themeaiw theme
• aiw_fonts_addaiw fonts add
• aiw_fonts_subsetaiw fonts subset
• aiw_media_optimizeaiw media optimize
• aiw_media_ogaiw media og
• aiw_media_videoaiw media video
• aiw_lintaiw lint
• aiw_checkaiw check
• aiw_seo_auditaiw seo audit
• aiw_search_buildaiw search build
• aiw_researchaiw research
• aiw_deployaiw deploy
• aiw_previewaiw preview
• aiw_mcp_initaiw mcp init

Prompts that work#

Good prompts name content, components and variants as precisely as you can. They work the same in every assistant. Copy one and make it yours.

Build a home page for Albers Dental in Portland. A hero in the split variant, three services as features, pricing as a price-list for cleaning and whitening, an FAQ with five questions and a contact form. Use only components from the UI Kit, all texts in English.

Add a pricing section in the toggle variant below the hero, with the plans Start at $19 and Pro at $49 a month, 20 percent less when paid yearly. Pro is highlighted.

Set our brand color #0f766e as the accent for light and dark with aiw theme, import theme.css after kit.css and remove data-accent from the html element.

Build the page, check dist with aiw check at 390, 768 and 1440 and with aiw seo audit. Look at every screenshot and fix what you see until both pass without findings.

Way of working#

1. Describe

   Say who the page is for, which sections it has and in which language. Real content makes better pages than placeholders.

2. Find and install

   The assistant finds matching variants with aiw_components and brings them in with aiw_add.

3. Build

   The page comes together from components with your content in their props. The rules of the stack keep tokens, type and spacing consistent.

4. Check

   aiw_check opens every page at 390, 768 and 1440 pixels, takes screenshots and checks accessibility, links and Lighthouse. aiw_seo_audit checks titles, descriptions and structured data.

5. Look

   Ask for the screenshots and say what should change. Every round ends with a check again.