plugin.json

{
  "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
  "name": "echo-ui",
  "version": "0.3.0",
  "description": "Echo UI's design system in your chat and your code: turn a mood board into a style, pick the style that fits your product, feel it on Echo's own site, and build screens from tactile React components that press, click and move, checked against Echo's rules as they're written.",
  "author": {
    "name": "Nawwara Studio",
    "url": "https://echo-ui.com"
  },
  "homepage": "https://echo-ui.com",
  "license": "MIT",
  "keywords": [
    "design-system",
    "react",
    "components",
    "ui",
    "styles",
    "accessibility"
  ],
  "extensions": {
    "com.openai": {
      "interface": {
        "displayName": "Echo UI",
        "shortDescription": "Tactile components, your style",
        "longDescription": "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.\n\n\u2022 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.\n\u2022 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.\n\u2022 Feel it. Wearing a style gives a link that makes https://echo-ui.com wear its colours, every component pressing and moving in them.\n\u2022 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.\n\nWhat it sends, runs and writes\n\n\u2022 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.\n\u2022 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.\n\u2022 In a chat, nothing is saved anywhere: styles and decisions come back as files to keep.\n\nPrivacy policy: https://echo-ui.com/privacy. Help, privacy questions and security reports: support@echo-ui.com.",
        "developerName": "Nawwara Studio",
        "category": "Developer Tools",
        "capabilities": [
          "Read"
        ],
        "websiteURL": "https://echo-ui.com",
        "supportURL": "https://echo-ui.com/contact",
        "privacyPolicyURL": "https://echo-ui.com/privacy",
        "termsOfServiceURL": "https://echo-ui.com/terms",
        "defaultPrompt": [
          "Turn the images I've shared into an Echo style I can reuse.",
          "Which Echo style fits a budgeting app for students?",
          "Build a settings screen with Echo UI, and check it."
        ],
        "brandColor": "#8B6FE8",
        "brandColorDark": "#8B6FE8",
        "composerIcon": "./assets/logo.svg",
        "logo": "./assets/logo.svg",
        "logoDark": "./assets/logo.svg"
      },
      "review": {
        "test_cases": {
          "positive": [
            {
              "description": "Find the component for a job",
              "prompt": "Which Echo UI component should I use for a settings toggle?",
              "tools_triggered": "search_components, get_component",
              "expected_behavior": "Recommends echo-switch (Switch), reads its record, and gives its install command, npx echo-ui-cli add switch."
            },
            {
              "description": "Check code against Echo's rules",
              "prompt": "Check this against Echo UI's rules: <button style={{ color: '#ff0000' }}>Save</button>",
              "tools_triggered": "check_code",
              "expected_behavior": "Reports two problems, each with Echo's fix: a raw <button> where Echo has HardwareButton (npx echo-ui-cli add hardware-button), and a colour written by hand, to be replaced with a theme role, var(--echo-*)."
            },
            {
              "description": "Pick a style for a product",
              "prompt": "Which Echo style fits a calm meditation app for adults?",
              "tools_triggered": "fit_styles, list_styles",
              "expected_behavior": "Places the product on Echo's seven axes, ranks Echo's styles against it, reads the best, and recommends one with its reasons."
            },
            {
              "description": "Wear a style without a terminal",
              "prompt": "Wear Echo's own style, for a project with no terminal.",
              "tools_triggered": "wear_style",
              "expected_behavior": "Gives the link that makes Echo's site wear the style's colours, the npx echo-ui-cli init --style echo command for later, and the theme CSS and DESIGN.md to add to the project by hand."
            },
            {
              "description": "Check a style of the builder's own",
              "prompt": "Is this a style Echo can apply? {\"version\":1,\"name\":\"night-desk\",\"title\":\"Night Desk\",\"essence\":\"A dark desk lamp over warm orange controls.\",\"fingerprint\":{\"warmth\":2,\"volume\":3,\"density\":3,\"formality\":3,\"era\":3,\"craft\":3,\"ornament\":2},\"seed\":{\"accent\":\"#E8743B\",\"chassis\":\"#1C1B22\"}}",
              "tools_triggered": "check_style",
              "expected_behavior": "Says Night Desk is a style Echo can apply, on its dark device; how Echo adjusts its accent; its readability notes; and what it hasn't decided yet (no decisions, no typeface)."
            }
          ],
          "negative": [
            {
              "description": "Weather",
              "prompt": "What's the weather in Paris tomorrow?"
            },
            {
              "description": "Code that isn't an interface",
              "prompt": "Write a Python script that renames my photos by date."
            },
            {
              "description": "A booking",
              "prompt": "Book me a table for two tonight."
            }
          ]
        },
        "commerce": false,
        "commerce_description": "Echo UI's plugin sells nothing and takes no payments.",
        "demo_recording_url": "https://youtu.be/eM4pKsdU5Gc"
      },
      "apps": "./.app.json"
    }
  }
}