> ## Documentation Index
> Fetch the complete documentation index at: https://doc.refero.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Give your AI agent design taste

<img src="https://mintcdn.com/refero/3mg2wNUgsDjR0OfF/images/mcp-hero.png?fit=max&auto=format&n=3mg2wNUgsDjR0OfF&q=85&s=c64cf1de08109c67c40f65e527ee7531" alt="Refero MCP" style={{ width: '100%', borderRadius: '12px' }} width="1136" height="645" data-path="images/mcp-hero.png" />

## Give your AI agent design taste

Refero MCP connects your agent to curated design styles, real product screens, and user flows. It studies before it builds, so output is grounded in shipped product patterns instead of generic model taste.

Models are strong at code and logic, but product design needs references: visual systems, interface patterns, flow sequencing, and the details that make a UI feel intentional. Refero gives agents that research layer.

## What you need

* **Refero Pro** — an active subscription is required. [Get Refero Pro](https://refero.design/pricing).
* **An MCP-compatible tool** — Claude Code, Cursor, Antigravity, Lovable, Codex, Manus, or another tool that supports remote MCP servers.

## Connect your tool

Use this MCP server URL:

```text theme={null}
https://api.refero.design/mcp
```

Depending on your tool and account setup, authorization may happen through OAuth or through a Bearer token from Refero.

<Tabs>
  <Tab title="Claude Code">
    ```bash theme={null}
    claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"
    ```

    If your setup uses OAuth instead of an API token, omit the `--header` part and follow the sign-in flow your MCP client opens.
  </Tab>

  <Tab title="Cursor">
    Add to `.cursor/mcp.json`:

    ```json theme={null}
    {
      "mcpServers": {
        "refero": {
          "url": "https://api.refero.design/mcp",
          "headers": {
            "Authorization": "Bearer <token>"
          }
        }
      }
    }
    ```

    If Cursor offers OAuth for the connector, you can use that instead of a static token.
  </Tab>

  <Tab title="Codex">
    Add to your Codex MCP config:

    ```toml theme={null}
    [mcp_servers.refero]
    enabled = true
    url = "https://api.refero.design/mcp"

    [mcp_servers.refero.http_headers]
    Authorization = "Bearer <token>"
    ```
  </Tab>

  <Tab title="Other">
    | Field          | Value                                    |
    | -------------- | ---------------------------------------- |
    | Server name    | `Refero`                                 |
    | Server URL     | `https://api.refero.design/mcp`          |
    | Authentication | OAuth or `Authorization: Bearer <token>` |

    Refer to your tool's MCP documentation for where to add remote server credentials.
  </Tab>
</Tabs>

## Try a search

Ask your agent:

```text theme={null}
Search Refero styles for developer tool websites with product screenshots
```

or:

```text theme={null}
Search Refero screens for pricing page annual monthly toggle on web
```

or:

```text theme={null}
Search Refero flows for subscription cancellation with retention offer on web
```

## How it works

Refero has three research layers:

* **Styles** for visual direction: typography, color, layout, spacing, surfaces, components, imagery, and do/don't rules.
* **Screens** for concrete UI patterns: page structure, content hierarchy, copy, states, and components.
* **Flows** for journey logic: step count, decisions, friction, recovery paths, and system responses.

```text theme={null}
Your agent -> MCP over HTTP -> Refero API -> styles, screens, and flows
```

All data stays server-side. Only the results your agent requested come back.

## Limits

Refero Pro includes **8,000 MCP tool calls per month** — enough for regular design research and build work.

Need more? See [Refero for Business](/mcp/business) for higher limits, custom integrations, and usage-based pricing. For questions, write to [mike@refero.design](mailto:mike@refero.design).

## Next

<Columns cols={3}>
  <Card title="Tools" icon="wrench" href="/mcp/tools">
    Current tools for styles, screens, images, similar screens, and flows.
  </Card>

  <Card title="Examples" icon="code" href="/mcp/examples">
    Simple workflows for combining the research layers.
  </Card>

  <Card title="Refero Skill" icon="paintbrush" href="/skill/overview">
    Install a research-first design methodology into your agent.
  </Card>
</Columns>