Use TypeUI with OpenCode

Open the project where you want OpenCode to build UI.

Create or update opencode.json in your project root:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "typeui": {
      "type": "remote",
      "url": "https://mcp.typeui.sh/mcp",
      "enabled": true
    }
  }
}

If OpenCode asks you to authenticate, sign in with TypeUI. You can also start authentication manually:

opencode mcp auth typeui

Browse the Design Skills page to compare available themes.

PaperBentoEnterpriseNeobrutalismCleanMonoGlassmorphismMinimalVibrantPremium

After you choose a theme, ask OpenCode to use it:

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

Build me a checkout page.

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

Run your app and review the changes. Ask OpenCode 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 OpenCode which one to use:

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