# MCP connection

Let your agent work with the system behind the interface.

Frontfriend’s MCP server exposes design-system context and supported design workflows to authenticated agents. It connects your brand foundations, design rules and component knowledge to the agent working in your application.

## Authenticate once

Use the Frontfriend CLI’s supported authentication flow:

```bash
npx frontfriend login
npx frontfriend mcp --help
```

Open the provided verification link and complete sign-in. Do not paste a personal credential into documentation, a prompt or committed project files.

## Connect your client

Use `frontfriend agents install` to generate the client connection, and inspect `frontfriend mcp --help` for the options supported by your installed version. The `mcp` command starts the local stdio proxy. It refreshes authentication from your `frontfriend login` credential and connects your client to the Frontfriend server. Confirm that your client can list the Frontfriend tools before beginning a design task.

Use Claude Code or Codex with the generated client configuration. For other MCP clients, verify their support for the authentication and tool capabilities your workflow requires.

## Ask for the right facts

Component tools include `list_components`, `get_component_api`, `get_component_source` and `get_add_command`. Use these for components that are not yet installed. Request the explicit Application target rather than mixing primitive-specific APIs.

The registry provides source-derived API metadata and composition rules. Inherited primitive props remain linked to their upstream source instead of being guessed from a screenshot.

## Read the design rules

Use `get_rules_index` to discover the available rule areas, then `get_rules` to read the relevant rules. The response combines shared chapters, application rules and enabled starter packs for the selected system view. Use `search_rules` to discover candidates, then fetch their context before building.

Rules in force are returned in full for the selection; other guidance is paginated. Keep the application and release or snapshot selection consistent with the components you are inspecting. Read [Design rules](/docs/design-rules/) for scope, maturity and review behavior.

## Design workflows

Install [Design Skills](/docs/design-skills/) for guided design and audit flows. Keep generated project context current through the documented sync workflow. See [Agent context](/docs/agent-context/).

## Access and limitations

MCP calls are scoped to authorized workspace data. Review generated proposals and confirm the intended scope before applying changes.