Xtractly turns any website into your component library. There are two halves that work together:
- The browser extension — a floating toolbar you use while browsing to grab elements, assets, colours and fonts from real pages.
- The web app — where captures become projects, an AI turns prompts into React components, and your library lives.
You can start with either one. This page gets you from zero to your first component.
Create an account
Go to xtractly.com and sign up. A free account includes a daily allowance of AI credits — enough to try everything here.
You'll land in Projects. This is the home for AI‑built components; the library and settings are in the left sidebar.
Install the extension
Install Xtractly for your browser from the Chrome Web Store (Chrome, Arc, Edge and other Chromium browsers) or the Firefox Add‑ons site.
Open any website and click the Xtractly icon, or the floating pill in the bottom‑right corner, to open the toolbar.
Open the account button in the toolbar and sign in. The extension picks up your web‑app session automatically — no separate password.
Note
The extension and the web app share one login. If you sign out of the site, the extension signs out too.
Your first component
The fastest path is a prompt. Be concrete about layout, states and content:
In Projects, type what you want to build and send it.
Xtractly spins up a project and generates a React + Tailwind component. When it finishes you'll see a live preview.
Switch between Demo, Code, and Playground at the top of the preview. Keep chatting in the left panel to refine it.
Happy with it? Use the copy button to grab the component, or open the Playground to tweak the code and export.
Or start from a real page
Browse to a site with UI you like. Open the Xtractly toolbar and click Extract.
Hover to highlight an element, use the arrow keys to walk up to its parent, and click to capture it. The markup lands on your Clipboard in the toolbar.
From there, paste it into your codebase directly, or send it to the AI Assistant to clean it up and make it a proper component.
Where to next
- The extension — every tool in the toolbar
- Projects & the AI builder — how generation and iteration work
- Agent Bridge (MCP) — pull components from Cursor or Claude Code