Build on the agent
Embedding the agent itself? Start with the
agent architecture — the three-layer harness
(@alphacro/agent → @alphacro/coframe-agent → apps) — then
stand up an agent with real snippets.
Build with editor-web
Coframe Agent isn’t just an app — it’s a platform you can build on. Start an edit session from your backend, stream the agent’s work in real time, embed the editor inside your own product, or collect visual annotations from your users. Everything here is backed by typed, published packages and HTTP endpoints, with live examples you can run.
Start here
Section titled “Start here”Choose an integration
Connecting an external app over the network? The integration guide maps each thing you might want to build to the package or endpoint that does it.
Extend with plugins
Adding a new capability — a tool, a hook, planning state? The plugin system is the extension surface beneath the harness.
Run the examples
Every integration page ends with a live demo that talks to a real Coframe Agent backend — see the request, the response, and the events as they stream in.
What you can build
Section titled “What you can build”- Delegate edits from your backend — start a session, hand off an instruction, and collect the result. No persistent connection required.
- Stream the agent live — subscribe to messages, tool calls, and approvals over a WebSocket with auto-reconnect.
- Embed the editor — drop the full editor UI into your own app as an
iframe and drive it over a typed
postMessagechannel. - Collect visual annotations — let your users point at a live page and leave feedback, then receive it in your app.
- Build a completely custom UI — connect to the same session backend the Coframe Agent frontend uses and render your own interface.
What’s under the hood
Section titled “What’s under the hood”Coframe Agent is backed by a stack of purpose-built packages:
| Package | What it does |
|---|---|
| @alphacro/agent | Layer 1: the unopinionated harness — durable dual-mode sessions, backends, model-as-string, MCP. |
| @alphacro/coframe-agent | Layer 2: the opinionated Coframe agent — company prompt, common tools, planning spine, delegation. |
| agent-planning | Structured task breakdown and requirement traceability. |
| agent-delegation | Sub-agent spawning, coordination, and result collection. |
| agent-skills | Skill discovery, installation, and lifecycle management. |
| agent-tools | File editing, variant application, URL fetching, and more. |
| agent-annotations | Visual annotation capture and serialization. |
| kernel-browser | Kernel Browser lifecycle, CDP proxy, and preview streaming. |
| vitest-ws-reporter | Real-time test result streaming over WebSocket. |
| agent-workspace | File system abstraction for consistent behavior across hosts. |
Components
Section titled “Components”Live, interactive references rendered from the real Coframe Agent React components — the same source the application ships, imported the same way Storybook does.