Xtractlytractly

Claude Code · Cursor · Codex · Cline · Any MCP client · REST API

Give your AI agentyour design system

The Agent Bridge is an MCP server for your Xtractly library. Add it to Claude Code, Cursor, Codex, Cline or any MCP client, and your agent can list your saved components, read their code, pull your theme's design tokens and save new variants back — so it codes from your actual UI, not its best guess.

Install ExtensionRead the docs

Free with an account · Chrome, Edge & Brave

01

Create a token

Generate an Agent Bridge token in Settings in the Xtractly web app.

02

Add the connector

Paste the MCP config into Claude Code, Cursor or your client of choice. The docs have copy-paste snippets.

03

Ask for UI

Ask your agent to build with your components. It reads your library and tokens instead of inventing values.

Built for the code you actually ship

  • Read your library

    Agents can list components and projects and fetch any component's full code.

  • Exact design tokens

    Themes come through as real CSS variables, so the agent uses your colours and type instead of plausible-looking hex values.

  • Save back

    Agents can create components and variants, or make targeted edits, directly in your library.

  • Your agent, your model

    Xtractly runs no AI of its own — generation runs on your agent subscription. Reads are free; saves count against a weekly allowance on Free.

Frequently asked questions

Who pays for the AI?

You, through the agent you already use — Xtractly runs no AI models. When an external agent drives Xtractly over MCP, the generation runs on your own agent subscription. Reading is free and unmetered; saving back to your library counts against the weekly Agent Bridge allowance.

Which clients are supported?

Any client that speaks MCP — including Claude Code, Cursor, Codex and Cline.

Is there an HTTP API as well?

Yes. The REST API exposes your library, tokens and projects with an API key, for scripts, build steps and internal tools.

Works well together

A UI component library built from real sites

Learn more about a UI component library built from real sites

Save captures into a personal library with variants, a live Playground and history.

Turn any website into React components

Learn more about turn any website into React components

Capture a section as a React (or Vue/Svelte) component and keep iterating on it.

Copy any website component as real code

Learn more about copy any website component as real code

Click any element on a live site and get it back as HTML, React, Vue or Svelte.

Agent Bridge (MCP) setupXtractly vs DivMagic

Start today for free

Upgrade when you need more — monthly, yearly, or once for life.

Join Xtractly

Start without a card

Free covers inspecting, capturing and 5 exports a month.

Cancel anytime

No hidden fees. Or pay once for Lifetime and skip renewals.

Clear pricing, no surprises

ProMost popular
$4.99/month

Billed monthly. Cancel anytime.

Upgrade to Pro
  • Everything in Free
  • Unlimited exports — code, Figma & design tokens
  • Save captures to your library & edit them in Studio
  • Full page export & copy
  • Bookmarks
  • REST API access & keys
  • Unlimited Agent Bridge saves
  • Every feature we ship going forward
  • Priority support