Web Preview
Preview what you are working on in crystl. Select elements to send instructions to your agent.
crystl has a built-in browser column that sits beside your shards and shows the thing you are building. It is made for local dev servers first: your agent starts the server, the page appears next to the terminal, and you watch each change land without switching windows. The column runs WebKit, the same engine as Safari.
The point is the loop. Arm the crosshair, click what looks wrong, type a note, and press Enter. Your agent gets the element, a picture of it, and your words. No screenshot, no "it's the button on the left, no, the other one".
A strip under the address bar counts what went wrong on the page: console errors, failed requests, and navigation failures. One click hands the whole list to your agent. And login state is kept per project, so one project's staging login never shows up in another project's column.
Everything in a capture that came from the page is marked as data, not instructions. Your agent treats page text as evidence to read, never as a command to follow. Full details are in the Web Preview docs and the CLI reference.
Why it matters
Click, note, Enter
Arm the crosshair and click the element that is wrong. Type what you see, press Enter, and your agent gets the element, a cropped picture, and your note beside it.
Errors, handed over
A strip counts console errors, failed requests, and navigation failures. One click hands the whole list to your agent, so it can check the console before it says a page works.
Logins kept per project
Each project has its own cookies and site storage. One project's staging login never shows up in another project's column, and reopening the folder restores them.
Agent commands
crystl web open loads a page, snapshot writes a PNG of it, capture reads a capture, and errors prints the page's error list. Free on every tier.
Open in browser, one click away
The column is not a replacement for your browser. Your devtools, extensions, and password manager live in Chrome or Safari, and open in browser is one click in the column header.
try it yourself
A free account and a download. macOS only, for now.
get startedgetting started guide →Frequently asked questions
- How do I open the web preview?
- Three ways. Cycle the right sidebar's views with Cmd + ] and Cmd + [. Use the picker at the end of the address bar, which lists the dev servers running on this Mac. Or have an agent run crystl web open
, or crystl web open --server for a listening port. - What does my agent get from a capture?
- Two things. A one-line handoff naming the capture, and, when it runs crystl web capture, a markdown file: a cropped picture of the element, its selector, its HTML, its computed styles, the source file and line when your framework reports them, and your note beside it. Page content is marked as data, not instructions.
- Can my agent read the page's errors?
- Yes. A strip under the address bar counts console errors, failed requests, and navigation failures. The for agent button hands the whole list over in one click, and crystl web errors reads it from the agent's side; --clear removes the entries it printed.
- Does it keep my logins?
- Yes, per project. Each gem has its own cookies and site storage, so one project's staging login never shows up in another project's column. Closing a gem keeps its logins, and reopening the folder restores them.
- What engine does the column run?
- WebKit, the same engine as Safari, so sites load as they would in Safari. The column is not a replacement for your browser: no extensions, no devtools panel, no tabs. Your devtools live in your browser, and open in browser is one click away in the column header.
Crystl's Book of Spells
Master crystl with a grimoire of powerful prompts. Summon heroes, assemble a party, revive shards, and complete epic quests.
open the book →More features
Gems & Shards
Gems, shards, and the crystal rail keep every project one click away.
just-ask control
Ask for what you need and your agent does the clicking: text staged for copying, a button that runs the command, a task added, work booked for tomorrow.
Floating Cards
See what every agent needs from you, the moment it needs it.
Agent Activity Panel
One live view of every agent across all your gems: who's working, who's idle, and where tokens are going.
Schedule Agents
Launch a fresh agent at a set time (once, daily, or weekdays). Pick the gem, agent, model, and prompt; crystl fires it on schedule.
Automation (Sequences)
Automate the work you keep doing by hand. Write the job down once and let a schedule, a file landing, or a watched URL run it for you.
Parallel Sessions
Run several agents in the same project, each in its own git worktree.
Hero Shards
Summon a single hero as a shard (its own agent, model, and persona) without a quest party.
View Modes
Read a session as a terminal, as a conversation beside it, or as a conversation filling the window. The terminal keeps running either way.
History Navigator
Browse, jump through, and search every session: conversation and tool calls.
Token Tracking
Track token burn per shard, estimate turns left, and reclaim context window by disabling heavy plugins and skills.
Accounts & Usage
Run Claude Code and Codex on more than one login, and see how much of each plan's limits you have used.
Workbench
A slide-out task list in every project, backed by a WORKBENCH.md the agent reads and writes with you.
Markdown Editor
Read any .md rendered, with Mermaid diagrams drawn, and switch to the source to edit. Agents can open docs for you from the CLI.
Keys
Agents check which API keys they can reach and ask for a missing one on a masked card. Values go to your Keychain, never to the agent.
Prompt Integration
Facet Inserts give you one-click access to saved prompts, commands, and shortcuts.
Agent Files in Your Project Folder
Your agent setup as plain markdown committed with your code. Every agent reads the same files, every clone gets them, and nothing is locked inside crystl.
Agent File Editor
Create, edit, and manage CLAUDE.md, rules, skills, and agent config files with a block editor, file chooser, and project optimizer.
Project Optimizer
Scan your project for gaps in agent configuration (missing files, incomplete docs, oversized code, and setup issues) with one-click fixes.
Skills Library
Browse and import agentic skills that teach agents like Claude Code or Codex new tricks: code review, testing, deployment, and more.
cavrn terminal
The terminal as structured data: every turn, tool call, result, and table captured as agent-readable metadata. Drawn fast on the GPU with Metal.
Remote Development
Full crystl integration over SSH: approval cards, file relay, and click-to-open on remote machines.
Open Models
Run open models locally or hosted, orchestrate them with frontier agents, and cut token costs.
Agent Orchestration
One agent spawns, supervises, and merges the work of many: a control room for a team of agents.
crystl quest
Assemble a party of specialized agents. Each brings unique skills, coordinates in shared chat, and executes in parallel.
Screenshot Bar
Drag recent screenshots into the terminal. Spotlight-powered, always up to date.
Copy Bar
A one-click copy bar under the terminal. Agents stage text, you click Copy. Editable, up to 10 tabs, free.