Skip to content
UI Kit
Accent color
MCP server for Gemini CLIGoogle · Terminal agent

Build websites with the Gemini CLI over MCP

One command with gemini mcp add, or one entry in settings.json. Then your assistant builds with 350 components of the UI Kit.

Server address

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

What Gemini CLI does with the UI Kit

The Gemini CLI adds MCP servers with one command. Run gemini mcp add with the address of the UI Kit, and Gemini can search 350 components, read their code, plan a website for your business and review the page it wrote.

Gemini works in your terminal, right next to your project. The kit gives it the parts and the rules, Gemini writes the files, and you follow every tool call in the output as it happens.

The server only reads and needs no account. If you prefer files to commands, the same entry fits into settings.json, for one project or for every project on your machine.

  • Turns the prompts of the kit into slash commands you call by name
  • Writes pages into the project right next to the terminal
  • Shows every tool call in the output as it happens

Setup

Connect Gemini CLI 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, Add the server

    Run the command in your terminal. It writes the entry into the settings of the Gemini CLI.

  2. Step 2, Or edit settings.json

    Put the entry into ~/.gemini/settings.json for every project, or into .gemini/settings.json in one project. httpUrl means Streamable HTTP.

  3. Step 3, Check with /mcp

    Start gemini and type /mcp. The list shows the UI Kit as connected, with its tools and prompts.

Config

Ready to copy

/mcp lists the UI Kit as ready, with 14 tools and 5 prompts.

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

Example prompts

Try it in Gemini CLI

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 Gemini CLI can call

Gemini CLI 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

  • Use httpUrl, not url, for this server. url stands for the older SSE transport.
  • Try /build_website in the Gemini CLI, the prompts of the kit appear as commands.

When it sticks

/mcp shows Disconnected
Check that the key is httpUrl. With url the CLI tries the older SSE transport, which this server does not offer.
The command gemini mcp is unknown
Update the Gemini CLI to a current version, or write the entry into settings.json by hand.

FAQ

Questions about Gemini CLI

Overview of the MCP server
Does it also work in the Gemini app?

This page covers the Gemini CLI, which reads MCP servers from its settings. Any Gemini surface that adds remote MCP servers uses the same address.

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.

Build your next website with Gemini CLI

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

Often searched

Jump to

Copied to the clipboard