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:
npx frontfriend login
npx frontfriend mcp --helpOpen 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 for scope, maturity and review behavior.
Design workflows
Install Design Skills for guided design and audit flows. Keep generated project context current through the documented sync workflow. See Agent context.
Access and limitations
MCP calls are scoped to authorized workspace data. Review generated proposals and confirm the intended scope before applying changes.