Skip to content
UI Kit
Accent color
MCP server for VS CodeGitHub Copilot, Microsoft · Copilot in agent mode

Build websites with GitHub Copilot over MCP

The command MCP Add Server, a line in mcp.json or one terminal command. 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 VS Code does with the UI Kit

GitHub Copilot in VS Code uses MCP servers in agent mode. Add the UI Kit once, through the command MCP Add Server, a line in mcp.json or one command in the terminal, and Copilot can search 350 components, read their code and plan your pages.

Copilot then works with real building blocks instead of guessing markup. It reads the props of a component before it writes it, follows the blueprint for your kind of website and checks the finished page against the review list of the kit.

The server only reads and asks for no sign in. Your workspace stays on your machine, Copilot only sends the questions it asks the kit, such as a search for a pricing section.

  • Builds pages across many files in agent mode
  • Checks a finished page with review_page and fixes what it finds
  • Takes theme tokens from get_theme into your CSS

Setup

Connect VS Code 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, Run MCP Add Server

    Open the command palette with Ctrl Shift P, on a Mac with Cmd Shift P, and run MCP: Add Server.

  2. Step 2, Choose HTTP and paste the address

    Pick HTTP, paste the address, and give it the ID ai-website-ui-kit. Choose Global for every workspace, or Workspace for this one.

  3. Step 3, Use it in agent mode

    Switch the Copilot chat to Agent. The tools button lists the tools of the UI Kit, and Copilot calls them while it works.

Config

Ready to copy

MCP: List Servers shows the server as running, and the tools button in agent mode lists its tools.

{  "servers": {    "ai-website-ui-kit": {      "type": "http",      "url": "https://ai-website.com/mcp"    }  }}

Writes the entry into your user profile.

Example prompts

Try it in VS Code

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.

Flow

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.

Flow

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.

Flow

Tools

What VS Code can call

VS Code 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

  • The key in .vscode/mcp.json is servers, not mcpServers. Portable files such as .mcp.json use mcpServers.
  • Commit .vscode/mcp.json and the whole team gets the kit.
  • Name the variant you want, such as hero split, Copilot then fetches exactly that with get_variant.

When it sticks

The tools do not appear
Switch the chat from Ask or Edit to Agent. Only agent mode calls MCP tools.
VS Code asks whether to trust the server
That is expected the first time. The server only reads, confirm and it starts.
The server shows an error
Check that type is http and the key is servers. Then run MCP: List Servers and restart it from there.

FAQ

Questions about VS Code

Overview of the MCP server
Does it work with other Copilot plans?

MCP tools run in agent mode wherever your plan includes it. In an organization an admin can turn MCP on or off for everyone.

Can the server write files into my project?

The public server only reads. Your assistant writes the files itself, or you add the local server of the aiw CLI with npx -y ai-website mcp, which installs components with your approval.

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 VS Code

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

Set it up nowAll components

Often searched

Jump to

Copied to the clipboard