Skip to content
UI Kit
Accent color
MCP server for ChatGPTOpenAI · Web and desktop, developer mode, Responses API

Build websites with ChatGPT over MCP

An app in developer mode, or one tool entry in the Responses API. 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 ChatGPT does with the UI Kit

ChatGPT connects to MCP servers on the internet, and the UI Kit has one at a fixed address. In developer mode you create an app with that address, and ChatGPT can search 350 components, read their code, plan a website and review a page in any chat.

The server also offers the two standard tools search and fetch, the shape that ChatGPT uses for connectors and deep research. So the kit works in a plain chat as well as in longer research runs that compare components and patterns.

Every tool is marked read only and the server needs no sign in. For your own product the same address works in the OpenAI Responses API, with one entry in the tools of a request.

  • Uses search and fetch, the standard tools of connectors and deep research
  • Writes complete page code from get_variant with realistic props
  • Plans and reviews pages in plain conversation, no editor needed

Setup

Connect ChatGPT 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, Turn on developer mode

    Open Settings, Apps and then Advanced settings. Switch on developer mode, it lets you add apps from your own MCP servers.

  2. Step 2, Create the app

    Choose Create app. Name it UI Kit by ai-website.com, paste the address as MCP server URL, choose No authentication and tick I trust this application.

  3. Step 3, Pick it in a chat

    In a new chat choose the app with the plus button next to the input. ChatGPT now calls the tools of the kit while it answers.

Config

Ready to copy

The app shows up under the plus button, and an answer lists the tool calls it made, such as search_components.

OpenAI Responses API
{  "model": "<model>",  "tools": [    {      "type": "mcp",      "server_label": "ai_website_ui_kit",      "server_description": "Components, docs and website build knowledge of the UI Kit by ai-website.com",      "server_url": "https://ai-website.com/mcp",      "require_approval": "never"    }  ],  "input": "Plan a website for a bakery in Hamburg with the UI Kit"}

require_approval never is safe here, every tool only reads.

Example prompts

Try it in ChatGPT

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 ChatGPTFlow

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 ChatGPTFlow

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 ChatGPTFlow

Tools

What ChatGPT can call

ChatGPT 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

  • Name the kit in your prompt, for example “with the UI Kit by ai-website.com”, then ChatGPT reaches for the app right away.
  • For a long plan ask for one page at a time, the answers stay complete.
  • Copy the code into Codex or your editor to build the real project.

When it sticks

I do not see developer mode
Developer mode depends on your plan and, in a workspace, on the admin settings. Ask your admin, or use Codex, which connects with one command.
ChatGPT answers without the tools
Pick the app for this chat under the plus button and name the UI Kit in the prompt.
The Responses API returns an error for the tool
Check that server_url is exactly the address above and that type is mcp. The server answers only POST requests.

FAQ

Questions about ChatGPT

Overview of the MCP server
Can ChatGPT build the whole website?

ChatGPT plans the site, picks components and writes the code of every page. To put the files into a project, copy them or let Codex do it, which uses the same server.

Why is there a link that opens ChatGPT with a prompt?

It saves typing. The link fills in the prompt, you check it and send it. With the app turned on, ChatGPT uses the kit for the answer.

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 ChatGPT

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

Set it up nowAll components

Often searched

Jump to

Copied to the clipboard