# Motif

> Motif is a market of production-quality UI for agents: whole-site templates, design styles, page sections, components and visual effects. Every item is tunable (parameters with safe ranges and presets), license-checked and ships as working React + Tailwind code.

Catalogue: 145 items (9 templates, 14 styles, 27 sections, 44 components, 51 effects). Every item has tunable parameters with safe ranges, presets, usage rules for agents, a pinned upstream license, and ships as React + Tailwind v4 code that installs with shadcn.

## Connect

- MCP (Streamable HTTP): https://motifne.net/mcp
  - Claude Code: `claude mcp add --transport http motif https://motifne.net/mcp --header "Authorization: Bearer <api key>"`
- API key: a signed-in user creates one at https://motifne.net/account/keys. Browsing works without it; code, skills and custom orders need it.
- Plain HTTP: GET https://motifne.net/api/agent lists the tools with JSON Schemas; call one with POST https://motifne.net/api/agent/<tool>, a JSON body and the same Authorization header.

## Tools

- search_ui: Search the Motif catalogue of production-quality UI: whole-site templates, design styles, page sections, components (loaders, toasts, inputs, toggles, tabs, dialogs …) and visual effects (shaders, text, backgrounds). Describe what you need in a few words. Returns slugs, prices in credits and poster images.
- get_ui: Everything about one item: what it is for, its tunable parameters (types, defaults, ranges), presets, usage rules, dependencies, license and price in credits.
- preview_ui: Render the item with your parameter values (or a preset) in a headless browser and return screenshots, so you can check it fits before ordering.
- get_quote: Price an order before placing it: either an existing item (slug) or a custom UI built to your brief. Orders are paid in Motif credits from the account of your API key; an item, once bought, stays free for that account.
- place_order: Order an existing item (slug, optionally tuned with preset/values) or a custom UI (brief, optionally starting from an existing item as base). Needs an API key: the price is paid in credits. Items are delivered immediately with code (an item you bought before costs nothing again); custom orders are built by an agent, poll get_order until delivered. Keep the returned order id: it is the only way to get the order back.
- get_order: Status of an order. Once delivered it includes the code: shadcn registry JSON with every file (path + content), an install command, the shared runtime and a skill URL.
- list_skills: Every agent skill Motif offers: general design skills (motion, typography, shaders, scroll, 3D …) and one skill per catalogue item with its tuned parameters. Returns names, descriptions and prices in credits; call get_skill to get one.
- get_skill: Download one skill: every file (SKILL.md, references, assets) as path + content. Needs an API key; the first download costs credits, later ones are free. Save the files under .claude/skills/<name>/.
- get_balance: The credit balance of the account behind your API key, and what things cost.

## Ordering

1. search_ui with what you need, then get_ui for parameters and presets.
2. preview_ui to see it with your values (screenshots).
3. place_order with the slug (and values or a preset). It is delivered at once: the order contains every file (path + content), an install command and a skill URL.
4. Nothing fits? place_order with a brief: an agent builds a custom item that passes the same checks. Poll get_order until it is delivered.

5. Skills: list_skills, then get_skill for every file of one.

Prices are in Motif credits, paid from the account of your API key (https://motifne.net/pricing): an item 10, a skill 10, a custom order 300. Anything bought once stays free for that account. get_balance shows what is left.
Keep order ids: they are the only way to fetch an order again.

## Humans

- Market: https://motifne.net/market
- Studio (the same agent, interactive): https://motifne.net/studio
- Docs: https://motifne.net/docs