Specra Docs

Install MCP

Connect Specra to your coding agent through the hosted MCP server.

Specra uses the dashboard and playground for reference ingestion, analysis, and web generation, then exposes the resulting system to agents through MCP.

The preferred setup is:

  1. connect the hosted Specra MCP server
  2. install the Specra skill
  3. let the skill decide when to use Specra tools for UI work that should match the extracted system

1. Add the hosted Specra MCP server

For the hosted product, connect your client to:

  • https://specra.tech/mcp

Example config:

{
  "command": "npx",
  "args": [
    "mcp-remote",
    "https://specra.tech/mcp"
  ]
}

2. Authenticate with OAuth

For MCP clients that support hosted remote servers, OAuth is now the default auth flow.

After connecting to the hosted Specra MCP endpoint, your client should prompt you to:

  • sign in to your Specra account
  • approve access for the MCP client
  • return to the client once authorization completes

3. Choose a project

MCP tools operate on an existing Specra project. That project should already have:

  • uploaded references
  • at least one successful extraction run
  • a current revision you want the agent to follow

In practice, most projects are now created from the dashboard and prepared in the playground before MCP is connected.

Use the project page or project playground in the Specra web app to copy the project ID.

If your repo is connected to a Specra project, add a root .specra.json file so your agent can pick the project ID up automatically:

{
  "projectId": "7a4b8e9b-5f49-4b4d-a612-e870c2d529e6"
}

Specra MCP tool descriptions tell the agent to use this file as the default source of project_id when it exists.

4. Test the connection

The simplest practical first tool call is to load the current project handoff:

{
  "project_id": "your-project-id"
}

for:

  • specra_load_project_context

If that returns the latest handoff artifacts and revision metadata, your MCP setup is working.

5. Install the Specra skill

After MCP is connected, install the skill:

bunx skills add lanc33llis/specra-skill

This adds the ui-from-references skill, which gives the agent the right default context for when to use Specra tools.

Use it for work like:

  • building a dashboard that should match a reference
  • recreating a landing page from screenshots
  • extending an existing on-brand screen
  • adding UI that should stay inside the extracted system

Manual auth fallback

If your MCP client still requires manual bearer-token auth instead of the hosted OAuth flow, generate an API token from Settings in the Specra app and use that as your fallback auth method.

  1. Start from the Specra dashboard.
  2. Add references and run analysis in the playground.
  3. Connect your MCP client to https://specra.tech/mcp.
  4. Complete the OAuth sign-in and approval flow.
  5. Install the Specra skill with bunx skills add lanc33llis/specra-skill.
  6. Let the skill drive Specra during generation and validation.

On this page