OpenUI MCP Studio

Local stdio MCP for UI briefs to React + shadcn with review, proof, and ship.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "openui-mcp-studio": {
      "command": "npx",
      "args": [
        "-y",
        "openui-mcp-studio"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

artist palette

ShadcnBrief

brief in, React + shadcn out, proof attached

What You Get • Install • How It Work • Ecosystem

ShadcnBrief takes a one-paragraph brief and produces a styled React + shadcn surface — with screenshots, accessibility checks, and proof attached. Open-source MCP studio, batteries included.

Code

┌──────────────────────────────────────┐
│  LOCAL-FIRST          ████████ 100%  │
│  SOURCE-TRACEABLE     ████████ 100%  │
│  TYPING REQUIRED      ░░░░░░░░   0%  │
│  VIBES                ████████ ZERO  │
│                                FILLER│
└──────────────────────────────────────┘

MCP-driven UI generator. Brief, render, diff, ship.

What You Get

Surface	What
`studio apps`	Brief → preview → diff → export. All local.
`packages`	Reusable shadcn-aligned components, themed for proof workflows.
`mcp services`	Hand a brief to any agent through an MCP server.
`contracts`	Schemas for brief, render, and proof — versioned, diffable.
`tooling`	Snapshot tests, a11y checks, design-token guardrails.

[!IMPORTANT] Local-first by default. No silent telemetry. No cloud round-trip. Your data stays on your machine until you explicitly ship it somewhere.

Install

bash

git clone https://github.com/xiaojiou176-open/shadcn-brief.git
cd ShadcnBrief
# follow the per-stack quickstart in INSTALL.md or docs/

Three commands. No curl | sh. No login. Read what you run.

Install break? Open your favorite agent and say "Read AGENTS.md and bootstrap ShadcnBrief for me." Agent fix own brain. Long version: docs/.

How It Work

The repo is seven layers — exactly the seven commits in git log. New work goes in as small named PRs. No 50-file mystery commits.

Layer	What
`chore: scaffold`	License, governance, hygiene gates, CI scaffolding.
`feat(core)`	The primary engine. The reason ShadcnBrief exists.
`feat(modules)`	Packages, adapters, services, plugins. The second floor.
`feat(contracts)`	Schemas, configs, public boundaries. Other code talks here.
`test:`	Receipts. Everything in this layer must run.
`feat(ops)`	Scripts, infra, CI helpers, build glue.
`docs:`	Public docs surface. The pretty face.

git log reads like a building floor plan. Look once, know the whole shape.

Ecosystem

ShadcnBrief lives in the open family: three open platforms. local-first, source-first, builder-first.

Repo	What
OpenCampus	Canvas + Gradescope + EdStem on one calm desk
OpenVibeCoding	AI codes overnight, you ship in the morning
ShadcnBrief (you here)	brief in, React + shadcn out, proof attached

Cross-family taste: BeamMe · BrewMe · OpenVibeCoding · proofyard.

Star This Repo

If ShadcnBrief saves you a click, an hour, or a headache — star costs zero. Fair trade. ⭐

Also by Yifeng[Terry] Yu

OpenCampus — Canvas + Gradescope + EdStem on one calm desk
OpenVibeCoding — AI codes overnight, you ship in the morning
BeamMe — beam your agent config to any planet
BrewMe — wake up, news already brewed
proofyard — every claim ships with its receipt

License

MIT — small print, big freedom.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about OpenUI MCP Studio

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "openui-mcp-studio": { "command": "npx", "args": ["-y", "OpenUI MCP Studio"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

OpenUI MCP Studio AllMCPs Directory Badge

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/openui-mcp-studio?style=directory)](https://allmcps.com/mcp/openui-mcp-studio)

HTML Embed

<a href="https://allmcps.com/mcp/openui-mcp-studio"><img src="https://allmcps.com/api/badge/openui-mcp-studio?style=directory" alt="OpenUI MCP Studio on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to OpenUI MCP Studio →Install in Claude Desktop Install in Cursor Install in VS Code