TypeUI

An MCP server and plugin to build UI with the agent: curated design systems, UI prompts and layout variations

MCP serverOfficial

Medium risk

We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.

Why this level

  • Calls a remote service
  • Produces UI code that gets applied to the project
All reasons and checks

bergside/typeui

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add mcp/typeui

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal

claude mcp add --transport http typeui https://mcp.typeui.sh

Or add to the file .mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

Install in Cursor

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Add to the file ~/.cursor/mcp.json, for all projects

{
  "mcpServers": {
    "typeui": {
      "url": "https://mcp.typeui.sh"
    }
  }
}

If the file already exists, add the server inside the mcpServers key. For a single project, put the same block into .cursor/mcp.json.

Install in VS Code

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Run in a terminal

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

Or add to the file .vscode/mcp.json, in the project

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

If the file already exists, add the server inside the servers key.

Run in a terminal

codex mcp add typeui --url https://mcp.typeui.sh

Or add to the file ~/.codex/config.toml, for all projects

[mcp_servers.typeui]
url = "https://mcp.typeui.sh"

If the file already exists, append the block to the end.

Run in a terminal

gemini mcp add -s user -t http typeui https://mcp.typeui.sh

Or add to the file ~/.gemini/settings.json, for all projects

{
  "mcpServers": {
    "typeui": {
      "httpUrl": "https://mcp.typeui.sh"
    }
  }
}

If the file already exists, add the server inside the mcpServers key.

Add to the file ~/.config/devin/mcp_config.json, for all projects

{
  "mcpServers": {
    "typeui": {
      "serverUrl": "https://mcp.typeui.sh"
    }
  }
}

If the file already exists, add the server inside the mcpServers key. Legacy Cascade keeps the MCP config in ~/.codeium/windsurf/mcp_config.json.

Formerly Windsurf.

Add to the file cline_mcp_settings.json, for all projects

{
  "mcpServers": {
    "typeui": {
      "type": "streamableHttp",
      "url": "https://mcp.typeui.sh"
    }
  }
}

If the file already exists, add the server inside the mcpServers key. Open the settings file in Cline: MCP Servers tab, Configure MCP Servers.

Add to the file .roo/mcp.json, in the project

{
  "mcpServers": {
    "typeui": {
      "type": "streamable-http",
      "url": "https://mcp.typeui.sh"
    }
  }
}

If the file already exists, add the server inside the mcpServers key.

A fork of Roo Code, same .roo folders.

Add to the file opencode.json, in the project

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

If the file already exists, add the server inside the mcp key.

Add to the file ~/.config/zed/settings.json, for all projects

{
  "context_servers": {
    "typeui": {
      "url": "https://mcp.typeui.sh"
    }
  }
}

If the file already exists, add the server inside the context_servers key.

Checked against the repository on Sep 25, 2026, commit 2a977f1.

Text for your agent

Connect the remote TypeUI server at https://mcp.typeui.sh. In Claude Code you can install the plugin: claude plugin marketplace add bergside/typeui, then /plugin install typeui@bergside.

Other ways from the author
{
  "mcpServers": {
    "typeui": {
      "serverUrl": "https://mcp.typeui.sh"
    }
  }
}

The remote TypeUI MCP server.

This is third-party code. Review the repository files before installing.

What it does

TypeUI connects the agent to a set of curated design systems and prompts for building screens and sections. The agent gets ready prompts and layout variations to make UI cleaner and faster. The server runs remotely, there is a plugin for Claude Code and connection guides for many tools. The design skills ship in DESIGN.md and SKILL.md formats.

Who it is for. For frontend developers and designers who build UI together with the agent.

Good fit when

  • You need to quickly build a screen or section from a design system
  • You want several layout variations to choose from
  • You need thought-out prompts for UI

Not a fit when

  • The task is not about UI
  • You cannot connect a remote service

Example request

Use TypeUI to build a pricing section in the chosen design system and show a couple of variations

Limitations

The server is remote, so it depends on the availability of the typeui.sh service, which should be checked from Russia separately. Some features are documented on the website rather than in the repository itself.

How to disable. Remove the typeui server from your MCP config or uninstall the typeui plugin via /plugin.

MCP

Transport
http
Authentication
not required

Security check

  • Calls a remote service
  • Produces UI code that gets applied to the project

README in short

The README presents TypeUI as a tool for building UI with the agent through curated design systems, prompts and layout variations. Connection is shown for many tools: a Cursor plugin, the remote server for Grok, Z.ai, Mistral, OpenClaw and others, with guides on the site. For Claude Code the repository is packaged as a plugin, and the server URL is in the config. The design skills are available in DESIGN.md and SKILL.md formats.

FAQ

Is it a server or a plugin?

It is a remote MCP server; for Claude Code there is a wrapper plugin, and for other tools there are connection guides.

In what format are the skills?

The design skills are available in DESIGN.md and SKILL.md formats.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium riskNo VPN needed142.9KRepository stars
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium riskNo VPN needed124.8KRepository stars
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk72.1KRepository stars
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.7KRepository stars
Foxx AITypeUI

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.