# TypeUI

TypeUI gives AI coding tools UI guidance, design-system material, and layout ideas. Use it when an agent is building or revising screens.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 2159
- Author: bergside
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/bergside/typeui
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/mcp/typeui

## What it does

TypeUI connects an MCP server to an AI coding tool. The agent can then draw on interface guidance, UI prompt material, and different layout directions while it builds a screen or changes an existing one. You describe the result in plain language and ask for a page, section, or set of alternatives.

It works with Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, and Zed. The connection uses the hosted endpoint `https://mcp.typeui.sh/mcp`, so the client must be able to reach that address. In Claude Code, add it with `claude mcp add --transport http typeui https://mcp.typeui.sh/mcp`.

## Requirements
- Remote server: `https://mcp.typeui.sh/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http typeui https://mcp.typeui.sh/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add typeui --url https://mcp.typeui.sh/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "typeui": {
            "url": "https://mcp.typeui.sh/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "typeui": {
            "type": "http",
            "url": "https://mcp.typeui.sh/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http typeui https://mcp.typeui.sh/mcp
```

## When to use it
- build a screen from an interface brief
- shape a page section for a new layout
- ask for several UI composition options
- give an agent design-system guidance

## Example prompts
- Use TypeUI guidance to build a profile page from these requirements: `...`
- Ask TypeUI for three layout options for the settings screen.
- Build this interface using TypeUI guidance for the UI and design system.

## Similar
- [frontend-ui-engineering](https://affpapa.org/en/nevibecode/skills/frontend-ui-engineering.md) — skill · 67400 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/julianoczkowski-frontend-design.md) — skill · 5500 installs
- [frontend-skill](https://affpapa.org/en/nevibecode/skills/frontend-skill.md) — skill · 3000 installs
- [ui-skills](https://affpapa.org/en/nevibecode/skills/ui-skills.md) — skill · 2900 installs
- [popular-web-designs](https://affpapa.org/en/nevibecode/skills/popular-web-designs.md) — skill · 918 installs
- [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · 726 installs

From the same set: [bergside/typeui](https://affpapa.org/en/nevibecode/by/bergside/typeui.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md