Introducing Fragments

You ask your agent to tighten the sidebar. The page in front of you looks right. But that sidebar also appears on the dashboard, settings and billing pages. Reviewing the change means opening them all again.

Fragments brings your app’s pages, your agent and the review into one desktop app. Point at a detail, ask for a change, and see what happened across the pages you’ve pictured. Compare before and after, then keep the result or undo the turn.

The work happens in your React project, using your components and tokens. There’s no separate design document to keep in sync.

Fragments working on Meridian, our demo app. Recorded in the app on 7 October 2026 across two sessions. Waits are shortened and parts are sped up.

See your pages together

Open an existing project and start its development server. Fragments finds pages through the app’s links and supported route information. All pages brings the captured pages onto one canvas.

You see the dashboard beside the settings page. A shared sidebar becomes something you can review across the app. Switch width or theme to inspect another view. Use Find to search the text in pictured pages, or Changed to focus on the pages with detected changes.

Some pages need a sign-in or an example URL before they can be pictured. Fragments shows those gaps. A page that hasn’t been captured is still work to review.

Point at the detail

Select a button, heading or sidebar on the running page. Fragments connects the selection to its component and source location where React provides that information. When it cannot locate the source reliably, it says so.

Ask in the same place. In the film, the request is:

Make the shared sidebar more compact, with quieter labels and a clearer active page. Keep the mobile drawer.

The request is attached to the selected component. Choosing Every AppSidebar tells the agent to work on the shared sidebar. The review then shows where the change landed.

Fragments runs your installed Claude Code or Codex, using your own account. Your agent edits the project’s code, and you see the result in the running app.

Keep your components and tokens

Fragments reads the components and tokens already in your project. Design system puts them in view; Checks reports supported departures from them.

A colour written by hand can look exactly like your text token today. It still won’t follow that token when you change the theme. In the film, Fragments identifies that raw colour and replaces it with the token it matches.

The same principle applies to spacing and component choices: review the code against the system your app uses. You can inspect a finding, ask for a fix, or keep an intentional exception. Check coverage depends on the project’s styling, and unavailable checks are reported.

You can bring your own React components. Fragments UI, available as @usefragments/ui, is one starting point.

Review the result before and after

An agent turn leaves a receipt with its file changes, check results and the available page comparisons. Open Before and after to review the visual result.

Compare side by side or swipe between the two pictures. The numbered change list takes you to individual changes. Move between pages, or use Ask about it to continue from the detail you’re reviewing.

The comparison covers pages pictured before and after the turn, at the selected width and theme. A missing earlier picture isn’t an unchanged page. Fragments reports incomplete coverage so you know what still needs a look.

Change your mind

Undo restores the turn’s file changes where it can do so safely. It preserves later edits and reports changes it cannot restore automatically.

That makes trying a different direction practical. Ask for a more compact sidebar, look at it across the app, and put it back if the earlier version reads better.

Undo covers project-file changes recorded in the turn, including newly created files. Installed dependencies and files over 1 MiB sit outside that record. Actions such as a deployment or database change need their own reversal.

Start with a project or a starter

Bring a React app that already runs on your Mac. Or create a new Vite, React and TypeScript project with Fragments UI, shadcn/ui, Base UI or Untitled UI.

Starters include components, light and dark tokens, agent instructions and executable checks. Fragments installs the dependencies, checks the project and builds it before opening it. Setup needs an internet connection to fetch packages.

Get started with Fragments

Fragments isn’t open to everyone yet. Paid plans are coming soon; we’ll share details before they launch.

Mac only for now: Apple silicon, macOS 14 or later. Page pictures and visual comparisons require macOS 15.4 or later.

Sign in to Fragments once, then use your installed Claude Code or Codex to make changes. Pages behind your own app’s login need a separate sign-in inside that project.

Join the waitlist for an email when your place opens.