Echo UI

What you can ask

• Turn the images I've shared into an Echo style I can reuse.Copy

  Example path check_style · Echo design eye skill

• Which Echo style fits a budgeting app for students?
• Build a settings screen with Echo UI, and check it.

MCP connector

Server URL

https://mcp.echo-ui.com/mcpCopy

Login

None

Protocol

MCP 2025-11-25

Instructions

A neo-skeuomorphic React component library you install into your own source tree with npx echo-ui-cli. Molded caps in recessed wells, emissive readouts, real press travel. Motion (GSAP) and sound (zero-dep WebAudio synth) are first-class token families alongside color and type.

Working rules:

The Base UI package is @base-ui/react (per-component imports, e.g. @base-ui/react/dialog), NOT @base-ui-components/react (the old name). Training data may be stale.

Set the project up once with npx echo-ui-cli init. It installs echo-ui-core (and echo-ui-cli as a dev dependency), writes echo.json, echo-lock.json and echo-theme.css, adds a marked Echo block to CLAUDE.md or AGENTS.md, a check hook to .claude/settings.json and three skills (building with Echo; Design Eye, which reads a moodboard into a style the project can wear; and Style Fit, which picks the style it wears), and prints the lines to paste. It never edits your source code, and add refuses to run before it.

Components render with no colour until the theme is on the page. init writes echo-theme.css into the Echo folder — import it once from your global CSS or your root layout (or call createEchoTheme().css from echo-ui-core/theme to build it at runtime). Give the page the device's ground (body { background: var(--echo-well); color: var(--echo-text); font-family: var(--echo-font-sans); }), dark or light as the chassis makes it, and wrap the app in SoundProvider from echo-ui-core/sound — without it every component is silent. It starts muted until the person turns sound on, and remembers their choice; defaultMuted={false} starts with sound. Put <EchoCheck /> from echo-ui-core/check once in the root layout: in development it says in the console what's still missing, and in production it renders nothing.

Echo components are client components. In the Next.js App Router, a file that passes them a function (onSave, onSubmit, onClick) must start with "use client".

Echo is a REGISTRY, not an npm component package. Components are installed with npx echo-ui-cli add <component> and then live in the consumer's own source tree, importing each other by relative path inside one Echo folder. Never suggest npm install for a component. The one npm package is echo-ui-core, the grammar they all import (theme, sound, motion, tactile, presence).

Installed files still receive Echo's later fixes. npx echo-ui-cli diff reports every installed item as up to date, behind, edited, or edited and behind; npx echo-ui-cli update brings them forward and merges Echo's change into files somebody edited; where an edit and Echo's change meet in the same lines, it leaves that item and prints the lines between git's conflict markers, to bring together before running it again. Never tell a user to re-run add --overwrite to upgrade — that discards their edits without showing them what it is discarding.

Show all

Tools

Skills

3 in the ChatGPT listing

• Echo design eyeRead a moodboard or design references as a senior brand, product and UX/UI designer would, and turn each style in it into a design foundation a product can wear with Echo UI: the document, its evidence, and a style.json Echo applies.
• Echo style fitPick the visual style a product wears with Echo UI, from the builder's own style library (~/Documents/styles) and Echo's.
• Echo uiBuild or change a product's interface with Echo UI, the tactile React design system: a screen, a component, a look from a moodboard, or Echo's check on code.