Chat
Describe changes in plain language — the agent responds and acts in real time.
The editor workspace
The Coframe Agent workspace is your command center for building and shipping website changes. Instead of switching between tools, everything lives in a single, resizable layout — and you and the AI agent see the same state in real time.
Panels at a glance
Section titled “Panels at a glance”The workspace is built around eight panels that you can arrange, resize, and toggle to match your workflow:
| Panel | What it does |
|---|---|
| Chat | Describe changes in plain language; the agent responds and acts. |
| Tasks | See the agent’s plan, track progress per requirement, and cancel steps. |
| Requirements | Capture what success looks like before work begins. |
| Preview | A real headless browser rendering your page — not a screenshot. |
| Files | Browse, open, and edit the workspace file tree. |
| Sub-agents | Watch delegated agents working in parallel on different parts of the change. |
| Skills | Install, enable, or disable reusable AI skills that extend the agent. |
| Tests | Run vitest suites, see pass/fail per requirement, and catch regressions. |
How the panels work together
Section titled “How the panels work together”A typical flow looks like this:
- You type a request in Chat.
- The agent creates a plan in Tasks, breaking your request into steps.
- As work progresses, Files shows edits and Preview updates live.
- For complex work, the agent spawns Sub-agents to handle parts in parallel.
- When the change is ready, Tests validates it automatically.
Every panel reflects the same underlying session state — when the agent writes a file, the preview refreshes, the file tree updates, and the task status advances, all without you refreshing or switching tabs.
Flexible layout
Section titled “Flexible layout”The workspace uses a tab-and-split layout engine. You can:
- Drag panels to rearrange them in any order.
- Split horizontally or vertically to see multiple panels side by side.
- Collapse panels you don’t need to maximize your working area.
- Pop out a panel to a separate window for multi-monitor setups.
The layout is persistent within a session, so you can set it up once and keep working.
Deeper dives
Section titled “Deeper dives”Requirements
Define what success looks like — the agent extracts requirements and tracks them through tests.
Live preview
Your change rendered in a real headless browser — click, scroll, and interact exactly as your visitors would.
Task planning
See how the agent breaks work into steps, maps tasks to requirements, and tracks verification.
Sub-agents
Watch the agent delegate work to specialists that run in parallel, each with their own chat and plan.
Skills
Extend the agent with reusable skills — install from a repo, a URL, or skills.sh.
Files
Browse, open, and track every file the agent touches in the workspace tree.
Testing
Automated vitest integration that runs your test suite and maps results back to requirements.
Annotations
Point at elements in the preview and leave visual feedback the agent understands.