Atheros Builder

Atheros AI Coding Studio lets you browse, generate, and customize production-ready UI components with AI — token-driven, accessible, and ready to drop into your project.

1. Browse the gallery

Head to Explore to browse components across 20+ categories (dashboards, charts, chat, auth, pricing, and more) and multiple frameworks. Use search, category filters, and framework filters to narrow things down. Every component has a live preview, and free components include full source code — copying it requires no account (premium components need Atheros AI Pass or Ultra).

2. Clone and modify with AI

Found something close to what you need? Click Clone & Modify with AI to get your own copy in the workspace, where you can edit code directly or describe changes in plain language and let AI apply them.

3. Create from scratch

Go to Dashboard → Create, describe the component you want, pick a framework (React + Tailwind, React + CSS Modules, or Vanilla JS) and optionally a design system, and the AI generates a complete, multi-file component with design tokens, dark mode, and responsive styles.

Plans

The Free plan includes 30 credits a month — up to 10 AI generations a day — using Gemini 3.5 Flash-Lite, subject to the shared free-tier quota. Paid plans unlock premium models (Claude, GPT, Gemini Pro) and more credits — see Pricing or the Credits & Billing section below.

Components are self-contained UI building blocks stored as source code. Each one ships with metadata, code files, and a live preview.

Component structure

Every component includes:

• Source files — e.g. index.html, style.css, script.js and per-concern CSS/JS modules for Vanilla, or App.tsx and friends for React
• design-tokens.css — colors, typography, spacing, and dark-mode tokens, so the whole component can be re-themed by swapping one file
• component.md — a generated readme describing the component's structure and behavior
• Framework, category, and tags — used for browsing and search
• Dependencies — npm packages required (if any)

Supported frameworks

Framework	Status
React + Tailwind	Available
React + CSS Modules	Available
Vanilla JS	Available
Figma	Available (design source)
Vue, Svelte, React + SASS	Coming soon

Previews, likes, and clones

Components render in an isolated live preview. You can like and bookmark components, and every clone records its lineage — the clone tree on the detail page shows where a component came from and what was built on top of it.

Exporting

From the workspace you can copy individual files or download the raw source. The Export menu also offers the MCP route — copy a ready-made prompt that has a connected coding agent fetch the component with get_component and add it to your project (see API Reference below).

The AI engine generates new components from scratch or modifies existing ones from a natural-language description.

How it works

1. Describe what you want — a new component, or a change to the current one
2. Pick a model or let Auto routing choose one for the task
3. The AI returns the changed files as a diff; the live preview updates instantly
4. Accept the changes or revert — nothing is committed until you decide (auto-accept is available in settings)

Models

Band	Models	Access
Free model	Gemini 3.5 Flash-Lite	All plans — Free plan: 30 credits / month, max 10 generations / day
Budget	Gemini 3.5 Flash-Lite, Gemini 3.8 Flash, GPT-5.6 Luna	Atheros AI Pass and Atheros AI Ultra
Premium	Claude Sonnet 5, Gemini 3.1 Pro, GPT-5.6 Terra	Atheros AI Pass and Atheros AI Ultra
Frontier	Claude Opus 5, GPT-6 Astra, GPT-5.6 Sol, Fable 5.1	Atheros AI Ultra

Besides picking a specific model you can use presets: Auto (classifies the task and balances it across providers, weighting your preferred family from settings — pick “No preference” to route on merit alone), Budget (cheapest capable model), or Ultra (best available model).

Images as input

Attach a screenshot or design image to your prompt — the AI uses it as a visual reference for generation or modification.

Writing good prompts

Vague	Better
"Make it nicer"	"Increase card padding, soften shadows, and round corners to match the rest of the design"
"Add a chart"	"Add a bar chart showing monthly revenue below the stats row, using the existing color tokens"
"Fix the header"	"Make the header sticky with a blur backdrop and collapse it to 56px on scroll"

Reliability

If a generation produces a runtime error in the preview, the workspace automatically asks the AI to repair it (up to two attempts). Your chat history is kept as context, so follow-up prompts can build on previous ones.

The workspace is the editing environment for creating, cloning, and modifying components.

Layout

• Live preview — the component rendered in real time, with viewport and theme toggles
• Code editor — Monaco-based editor with syntax highlighting; edit any file directly and the preview updates immediately
• AI assistant — prompt composer with model selection, image attachments, and chat history

Diffs, versions, and drafts

AI changes arrive as a diff you can review per file, then accept or revert. Accepted changes are saved as versions — the timeline lets you inspect and restore any previous version. Unsaved work is kept as a local draft, and the workspace offers recovery if you close the tab mid-edit.

Component tests

Run the built-in compliance tests from the toolbar. Vanilla components are checked for accessibility (WCAG contrast, ARIA, focus states), best practices, design-system token usage, and typography; React components get React-specific accessibility, best-practice, pattern, and performance suites.

Results distinguish errors (real problems that fail the suite) from warnings (style guidance that doesn't block).

Fixing failing tests

The Fix button repairs failures in two stages:

1. Deterministic fixes run first — instant and free. Mechanical issues (missing attributes, comment cleanup, viewport/meta problems) are corrected exactly, and out-of-range colors are mathematically adjusted to meet WCAG contrast while keeping their hue.
2. AI fixes handle the rest. Each attempt is verified by re-running the tests; attempts that make things worse are discarded automatically.

Design system switcher

Apply a design system from the toolbar: Quick apply swaps the component's design-tokens.css instantly, while AI re-theme restyles the component more deeply to match the target system.

Design systems make components consistent across your product. A design system bundles color, typography, spacing, and shape tokens with a DESIGN.md spec describing the visual language.

Using a design system

• Pick a design system when creating a component — the AI generates directly in that visual language
• Or apply one to an existing component from the workspace toolbar: Quick apply regenerates design-tokens.css from the system's tokens, AI re-theme rewrites styling more deeply to match

Because every component keeps its styling in design-tokens.css, re-theming is non-destructive — layout and behavior stay untouched.

Creating your own

Manage design systems in Dashboard → Design Systems: create one from scratch, or import an existing style definition (creating your own requires Atheros AI Pass or Ultra). Public design systems can be browsed by everyone; yours stay private until you publish them.

Updating with AI

The design.md editor has an Update with AI field: describe one change — "make the palette warmer", "add a dark theme" — and the AI applies exactly that change, leaving everything you did not mention as written. Changes to the document are parsed back into the Overview tab automatically.

Projects group the components that belong to one app or site, and hold the credentials for programmatic access.

Organizing components

Create a project in Dashboard → Projects, pick its framework and (optionally) its design system, then link components to it — from the project page or straight from the workspace toolbar. The project page gives you an overview of everything that belongs together.

API keys and integrations

Each project has an Integrations tab where you can generate a project API key. The key authenticates the Atheros MCP server (see API Reference below), letting coding agents like Claude Code search and fetch components in your project directly from your editor. Requires Atheros AI Ultra, and is read-only for now. Configuration snippets are generated for you — copy or download them from the Integrations tab.

Credits are the currency for AI-powered features. Generation and modification consume credits; browsing, previewing, and copying code are always free.

How credits are charged

Costs are usage-based: each model has per-token rates, so the charge depends on the model you pick and the size of the component being generated or modified. The exact cost of every generation is shown after it completes, and failed generations are not charged. Your remaining balance is always visible in the workspace.

Plans

Plan	Price	Credits	Models
Free	$0	30 / month	Gemini 3.5 Flash-Lite
Atheros AI Pass	$15 / month	500 / month	Budget + Premium models
Atheros AI Ultra	$39 / month	2,000 / month	All models, including Frontier models

Yearly billing — both paid plans can also be billed annually: Atheros AI Pass is $144 / year and Atheros AI Ultra $374 / year — about 20% less than paying month to month. Use the Month / Year toggle on the Pricing page; if you already subscribe monthly, picking a yearly plan there switches you over via the Stripe billing portal.

Free tier quota — the Free plan includes up to 10 AI generations per day (50 per month) on Gemini 3.5 Flash-Lite (within your 30 monthly credits). Free generations also draw from a shared monthly free-tier budget across all free users; when your quota or the shared budget is used up, generation pauses until it resets — or upgrade to Atheros AI Pass to keep going.

Credit packs

Need more than your monthly allowance? One-time credit packs top up any plan:

Pack	Price
1,000 credits	$10.00
1,500 credits	$14.70
2,000 credits	$19.30
3,000 credits	$28.40
5,000 credits	$46.00
7,500 credits	$67.00
10,000 credits	$87.00

All packs are also available on the Pricing page.

Tracking usage

Dashboard → Usage shows your per-generation history with model, token counts, and credits charged. Invoices and subscription management live in Dashboard → Billing.

Everything you build with Atheros is meant to ship. Here's what you may do with each kind of component.

Components you generate

Components generated from your own prompts are yours. Use them in personal, commercial, and client projects without restriction or attribution. Keep in mind AI outputs aren't guaranteed unique — similar prompts can produce similar components for other users.

Free catalog components

Free components may be used, modified, and shipped in unlimited personal, commercial, and client projects — no account or attribution required.

Some premium components launch with a free window — a countdown on the component page shows how long the full source stays free for everyone. When the timer ends the component is treated as premium; anything you cloned while the window was open stays yours.

Premium catalog components (AI Pass / Ultra)

While subscribed, clone any premium component and use it in unlimited end products, including client work. Components you've cloned stay licensed after you cancel — ending your subscription never breaks projects you've already shipped; it only stops you from cloning additional premium components.

The one rule: ship products, not component libraries

For all catalog components (free and premium), you may not:

• resell or redistribute components as components — standalone, in template marketplaces, asset packs, or component libraries
• publicly republish premium components (or trivial derivatives of them)
• share accounts or project API keys to bypass the paywall
• use the catalog to build or seed a competing library or platform

Publishing your own components

Publishing a component publicly lets other Atheros users view and clone it — the clone tree records lineage back to your original. You can unpublish at any time; clones made while it was public remain valid.

The full legal text lives in the Terms & Conditions.

Programmatic access is powered by the Atheros MCP server — usable from any MCP-compatible client such as Claude Code, Cursor, Codex, or your own agents.

Access: the MCP server requires Atheros AI Ultra. Free and Pass accounts are refused.

Read-only today. Discovery tools work now. The authoring, version, design-system and project-write tools are listed below and marked write — they are not enabled yet, and a call to one is refused. Treat MCP as a read path into your components.

Coming soon: write access over MCP for Atheros AI Ultra, and MCP access for Atheros AI Pass. Both arrive without a reconnect — an existing project key picks up write access when it is enabled.

Authentication

There are two kinds of key, and the difference matters.

Project keys — minted in Dashboard → Projects → your project → API keys. A project key is confined to the project it was issued for: it reads and writes that project only, and the rest of your account is invisible to it. This is the key to hand a coding agent, and the one to give a contractor working on a single project.

Account keys — minted in Settings → Connections or Dashboard → API keys. An account key reaches every project you own but is permanently read-only on every plan, including Ultra. It carries no project context, so pass a project slug to tools like get_builder_md when you need one.

Both are shown once, at creation. Store the key somewhere safe — you can rotate or revoke it later, but you cannot read it back.

Point your MCP client at the server:

{
  "mcpServers": {
    "atheros": {
      "url": "https://mcp.atheros.ai/v1",
      "headers": {
        "Authorization": "Bearer <your-api-key>",
        "x-atheros-client": "cursor"
      }
    }
  }
}

Or, for Claude Code:

claude mcp add atheros --transport http https://mcp.atheros.ai/v1 --header "Authorization: Bearer <your-api-key>"

Name the server after the project when you connect more than one: MCP clients key their config by server name, so reusing a single name replaces the previous project's entry. The generated snippets do this for you — a project key gets atheros-<project-slug>, and an account key, which spans every project, keeps the bare atheros.

The x-atheros-client header is optional. It identifies which agent is connecting so the connection shows up in Settings → Connections; both the project API keys tab and the connect wizard generate this config for you with the key already filled in.

Rate limits. Ultra connections are limited to 60 requests per minute and 10,000 per day, counted per user across all your keys. search_components returns at most 50 results per call, and reading the source of more than 200 distinct components in a day is refused.

Available tools

Tools marked write require write access, which is not enabled at launch. Template tools additionally require an admin account.

Area	Read	Write
Discovery	search_components, get_template, list_frameworks, list_starter_kits, list_template_categories	—
Your components	list_my_components, get_component, get_component_versions	—
Components	—	create_component, save_component, clone_component, publish_component, delete_component, restore_component, restore_version
Design systems	list_design_systems, get_design_system, list_my_design_systems	create_design_system, import_design_md, update_design_system, delete_design_system
Projects	list_projects, get_project, get_builder_md	create_project, update_project, delete_project, add_component_to_project, remove_component_from_project
Design-system checks	validate_component, validate_project	—
Templates (admin)	—	create_template, update_template, add_template_variant, save_variant, request_template_deletion, restore_template
Account	get_me, get_credit_balance, get_credit_usage	—

Key management is not available over MCP on any connection: keys are minted, rotated and revoked only in the dashboard, so a prompt-injected agent can never mint itself a credential.

Design-system enforcement

Each project can pin a design system, and the server holds agents to it. Call get_builder_md to load your project's framework, design tokens, and component inventory into context, and validate_component to check generated code against those tokens — it reports raw hex colors, off-scale spacing, and raw font families, with an auto-fix prompt that maps each to the nearest token. Enforcement also runs at the write boundary: save_component and create_component reject error-level violations before saving, so off-token code never lands as a new version. Pass force: true to override a specific save.

A typical agent workflow

1. get_builder_md — load your project's framework, tokens, and existing components.
2. search_components for something close to what you need, then get_template to pull its source. For a component you built yourself, list_my_components then get_component.
3. Have your agent adapt the code locally to your stack.
4. validate_component against your design tokens to check the result.

Once write access is enabled, the workflow continues: clone_component brings a component into your project, and save_component saves your changes back as a new version.