Skip to content
UI Kit
Accent color
MCP server for ClaudeAnthropic · Web, desktop, Cowork and Claude Code

Build websites with Claude over MCP

A custom connector in the settings, or one command for Claude Code. Then your assistant builds with 350 components of the UI Kit.

Set it upCopy the config

Server address

https://ai-website.com/mcp
  • Streamable HTTP, no sign in
  • 14 tools, all read only
  • Free, components under MIT

What Claude does with the UI Kit

Claude connects to the UI Kit as a custom connector. You add one address in the settings, and from then on Claude can search 350 components, read their code, plan a whole website and review a finished page, in the web app, in the desktop app and in Cowork.

Claude Code gets the same server with one command in the terminal. There the kit helps with the part Claude Code does best, writing the page into your project, with components it understands down to every prop.

The connection only reads and needs no account at ai-website.com. Claude calls the server from the servers of Anthropic, so nothing has to run on your machine, and your conversations stay with Claude.

  • Plans a whole website in one answer with plan_website and turns it into pages
  • Builds artifacts from real kit components and their props
  • Writes the pages into your project in Claude Code, with the same tool names

Setup

Connect Claude in 3 steps

The pictures show where to click. Menu names can shift a little with new versions, the way stays the same.

  1. Step 1, Open the connectors

    In Claude open Settings and then Connectors. On Team and Enterprise an owner adds the connector under Organization settings, Connectors, and members connect it.

  2. Step 2, Add a custom connector

    Name it UI Kit by ai-website.com, paste the address and leave authentication empty. The server needs no sign in.

  3. Step 3, Turn it on in a chat

    In a new chat open the tools menu under the input and switch the UI Kit on. Claude now calls the tools by itself when your request needs them.

Config

Ready to copy

In the chat the tools menu lists the UI Kit with its tools. In Claude Code, /mcp shows the server as connected.

claude mcp add --transport http ai-website-ui-kit https://ai-website.com/mcp

Example prompts

Try it in Claude

Copy a prompt, put in your own facts and send it. Good prompts name the goal, the content and the language.

Build a landing page with AI

Use the UI Kit by ai-website.com. Build a landing page for Nordlicht Yoga, a small studio in Bremen that starts a beginner course in January. The goal is sign ups for a free trial class. Plan the sections first, then use components and variants of the kit, write all copy in English and check the page with review_page at the end.

Open in ClaudeFlow

Relaunch a whole website with AI

Use the UI Kit by ai-website.com. Plan a relaunch of the website of Tischlerei Hansen, a carpenter in Kiel with eight people. Pages for home, services, projects, about and contact. Use plan_website with the blueprint for trades, give every page a title and description, pick components and variants for each section and tell me the install command. Copy in English.

Open in ClaudeFlow

Redesign one section with AI

Use the UI Kit by ai-website.com. Our pricing section has three plans in plain boxes and few people click. Compare the variants of the pricing component, pick the one that fits a monthly and yearly plan best, keep our prices and texts and give me the new code. Tell me why you chose it.

Open in ClaudeFlow

Tools

What Claude can call

Claude picks the tools on its own. All fourteen only read.

Find

  • search_componentsFinds components by English or German words, filtered by category and group.
  • list_categoriesGroups and categories with component names and variant counts.
  • searchSearches components, blueprints, guides and docs in the shape ChatGPT expects.
  • fetchFetches one result of search in full.

Build

  • get_componentDescription, variants, props, accessibility, dependencies and the install command.
  • get_component_codeThe source file with license header, in parts for long files.
  • get_variantReady code of one variant with realistic props in English or German.
  • get_themeTokens for light and dark mode, seven accents, radius and type scale.
  • get_install_stepsSteps for Astro, Next.js or Vite with npm, pnpm or bun, up to the first page.
  • get_docsA page of the docs as Markdown, or the list of pages.

Plan

  • plan_websiteA complete plan from a brief, pages, SEO fields, sections with component, variant and copy hints.
  • get_blueprintBlueprints for 23 kinds of websites, from bakery to SaaS.

Check

  • review_pageA checklist for a finished page by page type and area.
  • get_guidelinesGuides on structure, conversion, copy, design, accessibility, SEO, speed, forms and law.

Tips

  • Start with the prompt build_website, Claude offers it in the plus menu of the chat once the connector is on.
  • Ask for German or English copy, the kit answers in both languages.
  • In Claude Code add the local server too, then components land in your project with one approval.

When it sticks

The connector does not show up in the chat
Open the tools menu of a new chat and switch it on there. Connectors start switched off in existing chats.
I cannot add a custom connector
In a Team or Enterprise organization only owners add custom connectors. Ask an owner to add it under Organization settings.
Claude Code lists the server as failed
Check that the command has --transport http. Without it Claude Code tries to start the address as a program.

FAQ

Questions about Claude

Overview of the MCP server
Does it work in the free plan of Claude?

Custom connectors depend on your plan at Anthropic. Where your plan offers them, the UI Kit works like any other connector, and Claude Code works with every plan that includes it.

Do I need Claude Desktop for this?

No. The connector runs on the servers of Anthropic, so it works in the web app, the desktop app and Cowork alike.

Does the server see my code or my chats?

No. Your assistant only sends the question it asks the kit, such as a search for a pricing section. The server answers and stores nothing from the request.

What does the MCP server cost?

Nothing. The server, the components and the CLI are free, the code is under the MIT license. You pay only for the AI assistant you already use.

Other clients

The same kit in every AI

One address, many assistants. Pick the next one or set up your whole team.

Build your next website with Claude

Connect once, then one sentence about your business is enough.

Set it up nowAll components

Often searched

Jump to

Copied to the clipboard