git clone <your-fork-url> ui-mcp
cd ui-mcp
npm install
npm run build

{
  "mcpServers": {
    "ui-mcp": {
      "command": "node",
      "args": ["dist/server.js"]
    }
  }
}

npm run smoke   # builds, boots the server in-memory, and exercises every tool

cd demo
npm install
npm run dev        # generates components from the registry, then starts Vite at http://localhost:5173

// input
{ "query": "scroll reveal headline", "complexity": "insane" }

// output (truncated)
Found 3 matching patterns for "scroll reveal headline". Showing the top 3:

## Text Scramble Reveal on Scroll
**Complexity:** insane • **Frameworks:** react • **Interaction:** scroll
**Tags:** text, scramble, decode, scroll, reveal, monospace, raf
...
### Code
```tsx
import { useEffect, useRef, useState } from "react";
...

### 2. `get_component`

Get component(s) of a given type.

**Input**

| field | type | required | description |
| --- | --- | --- | --- |
| `type` | `hero \| nav \| card \| modal \| scroll-section \| cursor \| overlay \| loader \| text-reveal \| background` | ✅ | Component kind |
| `interaction` | `scroll \| hover \| entrance \| ambient` | – | Preferred interaction |
| `complexity` | `clean \| elevated \| insane` | – | Preferred complexity (nearest returned if exact missing) |

**Example**

```jsonc
// input
{ "type": "modal", "complexity": "elevated" }

// input
{ "type": "stagger", "library": "framer-motion" }

// output (truncated)
## Framer Motion Stagger Children (0.08s)
**Type:** stagger • **Library:** framer-motion
### Config
```json
{ "config": { "staggerChildren": 0.08, "delayChildren": 0.1 }, "variants": { ... } }

const container = { hidden: {}, visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } } };
...

---

## Example prompts inside Claude Code

- *"Use ui-mcp to find a magnetic cursor pattern and add it to my landing page."*
- *"Get me an `insane` complexity background component from ui-mcp for the hero."*
- *"Build a pricing section — grab the pricing card pattern from ui-mcp first."*
- *"I need a page transition. Pull the Framer Motion `page-transition` config from ui-mcp."*
- *"Find a scroll-jacked horizontal section in ui-mcp and wire it up with my project's content."*
- *"Get the `text-reveal` component (elevated) from ui-mcp and use it for the section heading."*

---

## Contributing — add a pattern

The registry lives in `src/registry/`:

- `patterns.ts` — patterns surfaced by `get_ui_pattern`
- `components.ts` — components surfaced by `get_component` (must set `componentType`)
- `motion.ts` — configs surfaced by `get_motion_config`

Add a new entry to the relevant array following the `RegistryEntry` shape (`src/types.ts`):

```ts
{
  id: "my-pattern",                 // unique kebab-case id
  name: "My Pattern",
  tags: ["..."],                    // drives fuzzy search — be generous
  complexity: "elevated",           // "clean" | "elevated" | "insane"
  framework: ["react"],
  componentType: "card",            // components only — enables get_component
  interaction: "hover",             // optional
  description: "One sentence on what it is.",
  implementation_notes: "How it works / gotchas.",
  code: `/* full, standalone, copy-pasteable TSX */`,
  tailwind: "the key classes used",
  motion: {                          // optional, if animated
    library: "framer-motion",
    config: { /* ... */ },
    variants: { /* ... */ },
  },
  sources: ["aceternity", "godly"],
}