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

# MCP server

> Query your design system from any coding agent.

After adding the Loracle MCP server, your coding agent can search your component catalog with natural language.

## Before you begin

* An API key from the [Loracle dashboard](https://app.getloracle.com) (**Project Settings > API Keys**)
* A published design system (see the [CLI guide](/cli))

## Set up your IDE

Add the Loracle MCP endpoint to your IDE's configuration. The server is hosted — no local installation required.

<Tabs>
  <Tab title="Cursor">
    Add to `.cursor/mcp.json` in your project root:

    ```json .cursor/mcp.json theme={null}
    {
      "mcpServers": {
        "loracle": {
          "url": "https://mcp.getloracle.com/sse",
          "headers": {
            "Authorization": "Bearer sk_live_..."
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="Claude Code">
    Add to `~/.claude/settings.json`:

    ```json ~/.claude/settings.json theme={null}
    {
      "mcpServers": {
        "loracle": {
          "url": "https://mcp.getloracle.com/sse",
          "headers": {
            "Authorization": "Bearer sk_live_..."
          }
        }
      }
    }
    ```

    Or use the CLI:

    ```bash theme={null}
    claude mcp add loracle --url https://mcp.getloracle.com/sse --header "Authorization: Bearer sk_live_..."
    ```
  </Tab>

  <Tab title="Windsurf">
    Add to `~/.codeium/windsurf/mcp_config.json`:

    ```json ~/.codeium/windsurf/mcp_config.json theme={null}
    {
      "mcpServers": {
        "loracle": {
          "serverUrl": "https://mcp.getloracle.com/sse",
          "headers": {
            "Authorization": "Bearer sk_live_..."
          }
        }
      }
    }
    ```
  </Tab>
</Tabs>

Restart your IDE after saving the configuration.

## Available tools

### get\_components

Search your design system catalog by natural language. Returns matching component names, props, and usage documentation.

```
get_components({ query: "button with loading state" })
```

Your coding agent calls this tool automatically when it needs to find components. You can also ask it directly — for example, "find a date picker component from our design system."

## Next steps

<Columns cols={2}>
  <Card title="Loracle CLI" icon="upload" href="/cli">
    Publish or update your design system catalog.
  </Card>

  <Card title="Storybook addon" icon="pencil" href="/storybook-addon">
    Use AI to build stories inside Storybook.
  </Card>
</Columns>