Echo UI
by Nawwara Studio(Community)
Visitor takeaway
58/100
Fair AI-discovery coverage across description, prompts, keywords, visuals, tool metadata, health, and freshness.
Routing category
Needs category
This listing is missing a primary category, which weakens browse placement and AI recommendation routing.
Connector evidence
Reachable
Tedix can reach this MCP endpoint and can show live capability evidence when tools are discovered.
Directory freshness
19h ago
Catalog metadata was refreshed 19h ago (October 16, 2026).
Description
Echo UI is a design system for React: components that press, click and move, all made from one material, with your own style on top. This plugin brings its workflow to your agent. • Make a style. Share a mood board and ask for a style. Echo's Design Eye reads it as a designer would and hands back the style: a foundation document and a style.json you keep and reuse. • Pick one. Ask which style fits your product. Echo's Style Fit places the product on seven axes, ranks Echo's styles and yours against it, and makes a pick it can argue for. • Feel it. Wearing a style gives a link that makes https://echo-ui.com wear its colours, every component pressing and moving in them. • Build with it. In a project with a terminal, where your agent runs commands, npx echo-ui-cli init --style <name> sets the project up in that style and your agent builds from Echo's components. In a chat, the agent writes the code with them and runs Echo's check on it before handing it over. What it sends, runs and writes • The server. The plugin's tools are Echo's MCP server, at https://mcp.echo-ui.com/mcp. It receives what a tool is called with: a search, a component's name, a style's settings, or code to check. It needs no account and keeps none of what it's sent: code is checked and forgotten. It reads Echo's published catalog and registry from https://echo-ui.com. Cloudflare, which hosts it, keeps request logs, including the address a request came from, for up to 7 days. • In a project with a terminal, the skills run Echo's CLI, npx echo-ui-cli, which npm downloads and which reads Echo's registry from https://echo-ui.com. init, add and style use write into the project. init also adds Echo's block to the project's agent instructions, and Echo's check as a hook in its agent settings; npx echo-ui-cli agent off removes both. Design Eye and Style Fit save styles and decisions in the builder's style library, ~/Documents/styles, on their own computer. • In a chat, nothing is saved anywhere: styles and decisions come back as files to keep. Privacy policy: https://echo-ui.com/privacy. Help, privacy questions and security reports: support@echo-ui.com.
Capabilities
No special capabilities listed
AI Agent Discovery
Echo UI is indexed by Tedix as a structured ai application listing for AI assistants, search crawlers, and users comparing agent-ready apps.
- Echo UI has no primary catalog category yet; Tedix treats this as a routing gap for browse and recommendation surfaces.
- Developer: Nawwara Studio.
- Connector type: AI-Powered App.
- Current connector status: Connected.
- Observed distribution channels: chatgpt.
- Available regions: US, FR, GB, ES, KR, IN.
Use this page to understand whether Echo UI is relevant for general AI app workflows in AI assistants.
For MCP discovery, this listing helps crawlers connect Echo UI to tool, resource, prompt, and server-health signals instead of treating it as a generic directory entry.
The canonical Tedix directory URL is https://tedix.dev/apps/echo-ui/.
Crawlable Profile
Source and availability
Tedix identifies Echo UI from Upstream Mcp tool source; Store sources: ChatGPT app store; Distribution: Ecosystem Directory; Tenant install: A platform catalog operator must create or reconcile the base app before tenants can install this entry.. Availability is reported for US, FR, GB, ES, KR, IN.
- ChatGPT app storeAuth not flagged · RELEASED · US, FR, GB, ES, KR, IN
Auth, tools, and actions
Authentication: Open Access. No special capability flags are currently listed. Current MCP inventory reports 10 tools, 0 resources, and 0 prompts.
- Check code against Echo · Read-only action
Echo's check on a piece of code you've written or are about to write: colours, spacing, radii, shadows and timing off Echo's scales, raw elements where Echo has the component, props a component doesn't take, controls without a name, markup a keyboard or screen reader can't use, restyling Echo from outside, and the screen rules one file can show. The same rules as `npx echo-ui-cli check`, which runs on a whole project with its own theme; this one uses the default theme. Each finding says the Echo way to fix it.
- Check a style · Read-only action
Whether a style.json is one Echo can apply, as `npx echo-ui-cli style check` says it: what stops it, the device it makes (light or dark), what the theme corrects for AA contrast, what the slop police stops (with the question for the builder) or the builder kept, and the decisions it leaves open.
- Rank styles for a product · Read-only action
Style Fit's shortlist: Echo's styles, and the builder's own passed in, measured against where a product sits on the seven axes (warmth, volume, density, formality, era, craft, ornament) and put in order: a style that misses a locked axis last, then least past tolerance first, then nearest. The same arithmetic as `npx echo-ui-cli style fit`. It orders; it doesn't pick.
- Get Echo UI accessibility rules · Read-only action
The accessibility rules a consumer of Echo can still get wrong — names on controls, form errors, announcements, focus and target size — and, with a name, what that component's accessibility was actually tested against. Echo guarantees WCAG 2.2 AA; this is the part the guarantee cannot cover for you. It's for before building a form, a dialog or anything icon-only.
- Get an Echo UI component · Read-only action
The full record for one component: description, install command, usage (imports + smallest working snippet), composition (part tree), examples, accessibility, motion & sound, prop table and anti-patterns. It's for before writing code that uses the component: the anti-patterns are the part a model gets wrong from priors.
- Get usage examples · Read-only action
Just the usage examples for one component, without the rest of its record. For when the component is already chosen and only its calling convention is needed.
- Get Echo UI tokens · Read-only action
The token families: Layer-3 semantic colour roles (--echo-*), sound names, motion's whole vocabulary — the motion tokens, the spring presets, the morph feels and the CSS duration and ease steps — and the shadow recipes. Any name a component's record lists under Motion is here. Echo components are styled and moved only through these: a hex, a duration or a shadow written by hand, or a token name that isn't here, is off Echo's system.
- List Echo UI styles · Read-only action
Echo's own styles, the looks Echo publishes, each with its one line and its fingerprint on the seven axes styles are placed on; or, with a name, one of them in full: its settings, rules, refusals, fonts, decisions and the slop police's word. The builder's own styles aren't here: they're in their library or the conversation, and fit_styles weighs them with Echo's.
Plus 2 additional actions in the full tool inventory.
Verification freshness
- Catalog synced19h ago (October 16, 2026)
- Connector checked16h ago (October 16, 2026)
- MCP scanned16h ago (October 16, 2026)
- Directory updated16h ago (October 16, 2026)
Publisher Intelligence
Public trust signals for visitors and practical recommendations for publishers. Use this section to understand what Tedix can verify today and what would make the app easier for AI agents to find.
Visitor takeaway
58/100
Fair AI-discovery coverage across description, prompts, keywords, visuals, tool metadata, health, and freshness.
Routing category
Needs category
This listing is missing a primary category, which weakens browse placement and AI recommendation routing.
Connector evidence
Reachable
Tedix can reach this MCP endpoint and can show live capability evidence when tools are discovered.
Directory freshness
19h ago
Catalog metadata was refreshed 19h ago (October 16, 2026).
Server Statusecho-ui v0.3.0
https://mcp.echo-ui.com/mcpLast checked: 16h ago
Server 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. - Style only through the Layer-3 semantic vars (`var(--echo-*)`) from `createEchoTheme`. Never hardcode a hex, and never invent a token name — call get_tokens for the real list. - Read a component's anti-patterns before using it. They exist because the obvious thing is wrong for this material system (a screen readout does not ease smoothly; severity is not red/amber/green). Accessibility is part of the grammar, not a review step. Echo guarantees WCAG 2.2 AA, and these are the parts a consumer can still get wrong: - Every control needs a name. `Switch`, `Checkbox`, `Slider`, `Segmented`, `Select`, `RadioGroup` and `Progress` take `aria-label` (or `aria-labelledby` pointing at visible text); `Field`, `Textarea` and `OtpField` take a visible `label`. Without one they do not compile. - An icon-only `HardwareButton` (`iconOnly`) needs `aria-label`: it has no text to read. - Forms: put the help text in `description` and the problem in `error`, both on the field. They are linked to the input and set `aria-invalid` for you. Never signal an error with colour or a red border alone. - Announcements: mount `<Toaster>` once and call `toast()` from `useToast()`. A message rendered into the page when it happens is usually never announced. - Sign-in: `Field` with `autoComplete` (`email`, `current-password`), and `OtpField` for a one-time code — it allows pasting, which people rely on. - State is never colour alone: Echo has one accent, and its components already carry state in shape and words. Do not add a red for danger; use `AlertDialog`, which asks before anything destructive. - Do not remove a focus ring, shrink a target below 24×24px, or set `aria-hidden` on something focusable. Every component is tested against WCAG 2.2 AA: axe, keyboard, focus-visible, forced-colors, target-size, reflow — and each item's `/e/` record carries the same block. Not covered: screen-reader: not yet verified by a person. Catalog source: https://echo-ui.com/r/catalog.json Registry: https://echo-ui.com/e
Technical Details
Tools(10)
Showing 10 of 10 tools
| Flags | Test | ||||
|---|---|---|---|---|---|
check_code | Echo's check on a piece of code you've written or are about to write: colours, spacing, radii, shadows and timing off Echo's scales, raw elements where Echo has the component, props a component doesn't take, controls without a name, markup a keyboard or screen reader can't use, restyling Echo from outside, and the screen rules one file can show. The same rules as `npx echo-ui-cli check`, which runs on a whole project with its own theme; this one uses the default theme. Each finding says the Echo way to fix it. | read-only | Not tested | — | |
check_style | Whether a style.json is one Echo can apply, as `npx echo-ui-cli style check` says it: what stops it, the device it makes (light or dark), what the theme corrects for AA contrast, what the slop police stops (with the question for the builder) or the builder kept, and the decisions it leaves open. | read-only | Not tested | — | |
fit_styles | Style Fit's shortlist: Echo's styles, and the builder's own passed in, measured against where a product sits on the seven axes (warmth, volume, density, formality, era, craft, ornament) and put in order: a style that misses a locked axis last, then least past tolerance first, then nearest. The same arithmetic as `npx echo-ui-cli style fit`. It orders; it doesn't pick. | read-only | Not tested | — | |
get_accessibility | The accessibility rules a consumer of Echo can still get wrong — names on controls, form errors, announcements, focus and target size — and, with a name, what that component's accessibility was actually tested against. Echo guarantees WCAG 2.2 AA; this is the part the guarantee cannot cover for you. It's for before building a form, a dialog or anything icon-only. | read-only | Not tested | — | |
get_component | The full record for one component: description, install command, usage (imports + smallest working snippet), composition (part tree), examples, accessibility, motion & sound, prop table and anti-patterns. It's for before writing code that uses the component: the anti-patterns are the part a model gets wrong from priors. | read-only | Not tested | — | |
get_examples | Just the usage examples for one component, without the rest of its record. For when the component is already chosen and only its calling convention is needed. | read-only | Not tested | — | |
get_tokens | The token families: Layer-3 semantic colour roles (--echo-*), sound names, motion's whole vocabulary — the motion tokens, the spring presets, the morph feels and the CSS duration and ease steps — and the shadow recipes. Any name a component's record lists under Motion is here. Echo components are styled and moved only through these: a hex, a duration or a shadow written by hand, or a token name that isn't here, is off Echo's system. | read-only | Not tested | — | |
list_styles | Echo's own styles, the looks Echo publishes, each with its one line and its fingerprint on the seven axes styles are placed on; or, with a name, one of them in full: its settings, rules, refusals, fonts, decisions and the slop police's word. The builder's own styles aren't here: they're in their library or the conversation, and fit_styles weighs them with Echo's. | read-only | Not tested | — | |
search_components | Find the Echo UI item for a job ("a settings toggle", "confirm a delete") or by name. Leads with the best fit, or says plainly that Echo has nothing for the job yet, then lists every match with its install command. The cheapest way to find out what exists, and the first call before writing Echo code. | read-only | Not tested | — | |
wear_style | What a style gives a project: a link that makes the whole Echo site wear its colours, the commands that put it in a project, and, for a project without a terminal, its theme CSS and a DESIGN.md with its rules. One of Echo's styles by name, or the builder's own style.json. A style the slop police stops isn't worn; the answer says what to ask the builder. | read-only | Not tested | — |
Discoverability Score
Fair
58 / 100
How easily AI agents can find this app from its current catalog metadata.
- Description quality20/20
- Example prompts0/20
- Keyword coverage0/15
- Category clarity0/5
- Tool metadata20/20
- Visual assets8/20
- Endpoint health10/10
- Data freshness15/15
How to Improve
Add at least 2 example prompts. Prompt examples strongly improve app matching and click-through intent.
Increase keyword coverage (discovery + trigger) to improve retrieval for long-tail queries.
Choose a primary catalog category so visitors and AI agents can route this app into the right browse and recommendation surfaces.
Add at least 2 screenshots that show real workflows to increase confidence and conversion.
Technical Details
- Status
- ENABLED
- Type
- AI-Powered App
- Auth
- Open Access
- Listed on
- ChatGPT
- Added
- October 15, 2026
- Last synced
- 19h ago
- Last checked
- 16h ago
- Version
- 0.3.0
- Distribution
- Ecosystem Directory