TypeUI
An MCP server and plugin to build UI with the agent: curated design systems, UI prompts and layout variations
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
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/typeuiDetects 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.shOr 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.
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.
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.shOr 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.shOr 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.
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 variationsLimitations
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.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys