TypeUI logoTypeUI

Use TypeUI with Visual Studio Code

Follow this guide to connect Visual Studio Code to TypeUI so GitHub Copilot can use design systems, UI prompts, and layout variations while it edits UI in your project.

Open Visual Studio Code

Open the project where you want GitHub Copilot to build UI.

Add TypeUI to VS Code

Click the button below to install TypeUI in VS Code:

Install in VS Code

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

Run in 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:

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

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

Choose a theme

Browse the Design Skills page to compare available themes.

Paper theme previewPaperBento theme previewBentoEnterprise theme previewEnterpriseNeobrutalism theme previewNeobrutalismClean theme previewCleanMono theme previewMonoGlassmorphism theme previewGlassmorphismMinimal theme previewMinimalVibrant theme previewVibrantPremium theme previewPremium

After you choose a theme, ask GitHub Copilot to use it:

I like the Bento style. Let's use it.

Start building UI

Build me a checkout page.

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

Review and refine

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.

Three pricing cards prompt preview
TypeUITypeUIPro

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

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

Once Visual Studio Code is connected to TypeUI, you can keep working in the same flow: choose a theme, ask for the interface you need, review the generated variations, and tell GitHub Copilot which direction to continue with.

CursorOpenCode