Use TypeUI with GitHub Copilot

Open your project in Visual Studio Code with GitHub Copilot enabled.

Click the button below to install TypeUI for GitHub Copilot in VS Code:

Install for GitHub Copilot

If the button does not open VS Code, run this command from your terminal:

code --add-mcp '{"name":"typeui","type":"http","url":"https://mcp.typeui.sh/mcp"}'

You can also add TypeUI directly to your workspace by creating .vscode/mcp.json:

{
  "servers": {
    "typeui": {
      "type": "http",
      "url": "https://mcp.typeui.sh/mcp"
    }
  }
}

Sign in with TypeUI if GitHub Copilot asks you to authorize the connection.

Start from a theme, a markdown ZIP, or a Figma import. TypeUI creates an editable draft design system in your workspace.

Choose a themeUse a TypeUI theme as your starting point.Import markdown filesBring existing design-system docs into TypeUI.ProBeta previewImport from FigmaGenerate markdown from a Figma file.

Open View markdown source files and review them before publishing.

Adjust the markdown when you need clearer rules, stronger component guidance, or product-specific language. After publishing, TypeUI MCP uses your saved edits when it helps your AI tool build UI.

Publish when ready so your MCP-connected AI tool can use it.

Use TypeUI to help me build a landing page.

Tell GitHub Copilot what to build. TypeUI helps it choose the right style and layout.

Run your app and review the changes. Ask GitHub Copilot for targeted improvements:

I don't like this pricing section, give me more variations.

TypeUI will now create three pricing variations so you can compare different layouts before choosing one.

TypeUIPro

CardsToggleCompare

After you choose a direction, tell GitHub Copilot which one to use:

I like the comparison one. Let's use it.