TypeUI logoTypeUI

Use TypeUI with Grok

Follow this guide to connect Grok to TypeUI while it edits UI in your project.

Open Grok

Open the project where you want Grok to build UI, then start Grok:

Run in terminal
grok

Add TypeUI MCP

In Grok, open the MCP tab:

Plain text
/mcps

Add TypeUI as a remote MCP server:

  • Name: typeui
  • URL: https://mcp.typeui.sh/mcp
  • Transport: HTTP or Streamable HTTP

If Grok asks you to authenticate, sign in with TypeUI through the MCP OAuth flow.

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 Grok to use it:

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

Start building UI

Plain text
Build me a landing page.

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

Review and refine

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

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

Once Grok 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 Grok which direction to continue with.

CursorOpenCode