A project is a workspace with one chat thread and the components it has produced. You create a project by describing what you want, or by converting a capture from the extension.
Generating a component
From Projects, type a prompt. Be concrete about layout, states and content — "a settings row with a label, a description line and a switch on the right" beats "a settings component".
Xtractly creates the project and runs a generation. This spends one credit (see Plans & credits).
When it finishes, an assistant message appears with a live preview attached. The most recent component becomes the active one.
Components come out as React + Tailwind, structured to drop into a modern
Next.js project — @/components/ui/* and @/lib/utils imports are kept intact,
so a shadcn‑style setup renders them as‑is.
Iterating
Keep chatting in the left panel. Each message is a new generation on the same project:
Every result is kept — use the history dropdown in the preview header to jump back to an earlier version of the component.
The preview
The right pane has three tabs:
| Tab | What it's for |
|---|---|
| Demo | The component running live (Sandpack). |
| Code | Read‑only file tree + syntax‑highlighted source, copy per file. |
| Playground | The same files, editable, with a live preview and version history. |
Above the tabs: a copy button (grabs the main component file) and a refresh for the preview.
Starting from a capture
When you send an element from the extension's AI Assistant, or convert a bookmark, it arrives as the project's first message — the AI rebuilds it as a clean component instead of you starting from a blank prompt. The original page URL is remembered so you can trace a component back to where it came from.
Choosing a model
Each project has a model (set in the project header). The default is a fast general model; switch to a stronger one for complex layouts. Available models include GPT‑4.1 / 4o, Claude Sonnet / Opus / Haiku, and Gemini 2.5 Pro / Flash.
Next
- Library, Playground & versions — save, edit and export
- Agent Bridge (MCP) — read and write these components from your editor