> ## 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

> Install Refero in ChatGPT and Codex, or connect Refero MCP to another AI tool

<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 a searchable catalog of websites and iOS apps, 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

* **A paid Refero plan** — Pro, Team, or Lifetime is required. [See plans](https://refero.design/pricing).
* **A supported AI tool** — ChatGPT, Codex, Claude Code, Cursor, Antigravity, Lovable, Manus, or another tool that supports remote MCP servers.

## Connect your tool

### ChatGPT / Codex plugin

1. Open [Refero in the OpenAI Plugins Directory](https://chatgpt.com/plugins/plugin_asdk_app_6a72258e6f18819183e5c4d8a56b78d9) and install the plugin.
2. Connect Refero and sign in with your Refero account when prompted.
3. Start a new chat and try one of the searches below.

The plugin includes Refero MCP and Refero Skill. You do not need to add an MCP config or install the skill separately.

### Manual MCP setup

Use this alternative for Codex or to connect another MCP-compatible 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>

<Note>
  Refero MCP works best with Refero Skill. If the skill is missing, your agent may offer to run `npx skills add https://github.com/referodesign/refero_skill --skill refero-design`. Refero MCP tells the agent to ask for your approval before running the command. If you decline, Refero MCP continues to work normally.
</Note>

## Try a search

Ask your agent:

```text theme={null}
Search Refero sites for fintech products with strong dashboard design
```

or:

```text theme={null}
Search Refero apps for minimalist productivity tools
```

or:

```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 starts with product discovery and adds three research layers:

* **Sites and apps** for finding web and iOS products by company, domain, industry, category, topic, or visual direction.
* **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 -> sites, apps, styles, screens, and flows
```

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

## Limits

Standard MCP access with Pro, Team, or Lifetime includes up to **8,000 MCP tool calls per monthly usage period** for each licensed user. This is intended for routine design research and protects the service from automated abuse. Most users will not need to monitor it. Unused calls do not roll over.

Need more? See [Integrate Refero](/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 sites, apps, 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>