Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 39 additions & 75 deletions app/quickstart/coding-agent/page.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { pageMeta } from "@/lib/og";
import ContentTabs from "@/components/ContentTabs";

export const metadata = pageMeta(
"Tutorial: Coding Agent",
Expand All @@ -12,79 +11,48 @@ export const metadata = pageMeta(

# Tutorial: Coding Agent

Already using Claude Code or Codex? This tutorial shows you what Omnigent
adds on top: a web UI with file editing and inline comments, mobile access,
session sharing, and the ability to fork or switch agents mid-conversation.
None of this is possible with a native coding agent alone.
If you're already using Claude Code or Codex, Omnigent runs them for you
and adds a web UI, mobile access, session sharing, inline comments, and more.

**Time:** 5 minutes. **Everything runs locally.**

## 1. Start your coding agent

```
omni claude # Claude Code
omni codex # Codex
```

Pick whichever you already use. Either command launches the coding agent
in your terminal and opens a web UI at `http://localhost:6767`. Both are
connected to the same session and stream output in real time.

## 2. Give it a task
1. Launch your agent. Either command starts Claude or Codex in your terminal and opens a web
UI at `http://localhost:6767`. Both interfaces connect to the same session
and stream output in real time, so they can be used interchangeably.

Ask it to do something in your project. For example:

```
Write a Python function that reads a CSV file and returns the top 5 rows sorted by the second column.
```
```
omni claude # Claude Code
omni codex # Codex
```

Watch it work in the terminal. Then follow along in the web UI or the
desktop app. Terminal, browser, and desktop app are three views of the
same session: type in one, and the others update in real time.
2. Give it a task. For example:

<ContentTabs labels={["Web UI", "Desktop App"]}>
<div>
```
Write a Python function that reads a CSV file and returns the top 5 rows sorted by the second column.
```

Open `http://localhost:6767` in your browser. The web UI shows your
conversation on the left and a right panel with four tabs: **Files**
(browse and edit files the agent created), **Agents** (sub-agents if any),
**Shells** (running terminals), and **Todos**. Everything syncs with the
terminal in real time.
3. Open `http://localhost:6767` to follow along in the Omnigent UI. The
[desktop app](/docs/interact/desktop) connects to the same address.

![Omnigent web UI running a coding agent session](/images/docs/single-harness-demo.gif)
![Omnigent web UI running a coding agent session](/images/docs/single-harness-demo.gif)

</div>
<div>

Launch the [desktop app](/docs/interact/desktop) and connect it to
`http://localhost:6767`. You get the same session and the same panels as
the web UI, plus OS notifications and a dock badge when the agent finishes
or needs your input, which is handy when you switch away while it works.

![Omnigent desktop app showing an agent conversation alongside the session workspace](/images/docs/desktop-conversation.png)

</div>
</ContentTabs>

## 3. Try native Omnigent features

Now that your agent has produced some output, try these features in
the web UI:
## 2. Explore Omnigent features

### Comment on the agent's work

Click on a specific part of the agent's output and leave an inline
comment like "make this more concise" or "use pandas instead".
The agent sees exactly what you're referring to and revises it.
No need to describe the location in chat.
Click any part of the agent's output and leave an inline comment. The agent
sees exactly what you highlighted and revises it. Click **Address All** to
have the agent automatically address all your comments.

![Addressing an inline comment on agent output](/images/docs/address-comment.png)

### Edit files directly

Open any file the agent created in the built-in editor. Make changes
yourself with syntax highlighting. The agent can see your edits and
continue from there.
Open any file the agent created in the built-in editor. Make changes yourself
with syntax highlighting, and see a diff of what the agent changed. The agent
can see your edits and continue from there.

![Editing a file in the Omnigent web UI](/images/docs/file-editor.gif)

Expand All @@ -95,35 +63,31 @@ alongside your text. Try pasting a screenshot of a UI bug or a design spec.

### Fork a session and switch agents

Fork your current session to try a different approach without affecting
the original. The fork copies the full conversation history up to that
point, so you can experiment freely.
Fork your current session to try a different approach without affecting the
original. Click the <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><circle cx="18" cy="6" r="3"></circle><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"></path><path d="M12 12v3"></path></svg> icon on any message to fork from that point. The fork copies the full conversation history up to there, so you can experiment freely. You can also fork to a different agent: start in Claude Code and continue with Codex, or vice versa.

### Use the built-in browser (desktop app)

Sessions in Omnigent belong to you, not to a specific agent, so a fork
doesn't have to continue with the agent it started with.
**Started in Claude Code? Fork the session and continue the fork with
Codex (or vice versa).** The new agent picks up the full conversation
history and keeps going, so you can compare how each one tackles the same
problem from the same starting point.
The [Omnigent desktop app](/docs/interact/desktop) includes an embedded browser
pane your agent can drive directly: navigate to a URL, click elements, type into inputs, and take screenshots. The pane opens automatically when the
agent needs it. Use it for tasks like testing a local web app, scraping a page,
or verifying a UI change.

## 4. Add a policy in plain language
## 3. Add a policy in plain language

Type this into the chat:

```
Don't send any PII like emails or credit card numbers to the model. Ask me first if a message contains some.
```

The agent attaches Omnigent's built-in PII policy to the session. From
now on, every outgoing model request is scanned, and anything containing
PII is held for your approval before it leaves your machine. Try it: paste
a log file with a fake email address and watch the policy step in. This
is enforcement at the platform layer, something no coding agent can do
on its own. Cost budgets, access controls, and more work the same way.
See [Contextual Policies](/docs/policies/overview).
Omnigent attaches a PII policy to the session. Every outgoing model request
is scanned, and anything containing PII is held for your approval before it
leaves your machine. Cost budgets, access controls, and more work the same
way. See [Contextual Policies](/docs/policies/overview).

## What's next

- [Try Polly](/quickstart/polly) to see multi-agent coding orchestration in action.
- [Collaborate from anywhere](/quickstart/collaborate) to deploy a server and share sessions with teammates.
- [Build a custom agent](/docs/use/custom-agents) with your own tools, prompts, and policies.
[Try Polly](/quickstart/polly) to coordinate multiple agents across different AI
providers (Claude Code, Codex, Cursor) on the same task, whether that's
splitting the work or having them review each other's output.
150 changes: 94 additions & 56 deletions app/quickstart/polly/page.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { pageMeta } from "@/lib/og";
import ContentTabs from "@/components/ContentTabs";

export const metadata = pageMeta(
"Tutorial: Polly (Multi-AI Coding)",
Expand All @@ -12,72 +11,60 @@ export const metadata = pageMeta(

# Tutorial: Polly (Multi-AI Coding)

Polly is a multi-agent coding orchestrator. It breaks your task into
sub-tasks and delegates each one to a different AI agent, with
cross-vendor code review built in. This tutorial shows you how it
looks in practice.
Polly is a multi-agent coding orchestrator. You give it a task; Polly
splits it into sub-tasks and uses intelligent routing to pick the right
agent for each task (Claude Code, Codex, Cursor, and others). Then a
different agent reviews the results: if Claude Code writes the code,
Codex checks it. Each sub-agent gets a clean slate with no prior conversation history, so it stays focused.

**Time:** 5 minutes. **Everything runs locally.**

## 1. Run Polly
## 1. Start Polly

```
omni polly
```
1. Launch Polly. Either command starts Polly in your terminal and opens a web UI
at `http://localhost:6767`. Both interfaces connect to the same session and
stream output in real time, so they can be used interchangeably.

This starts Polly and opens a web UI at `http://localhost:6767`
(bare `omni` starts Polly too, when a Claude credential is configured).
```
omni polly # explicit
omni # same, when a Claude credential is configured
```

<figure>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="/images/docs/polly-default-launch.gif"
alt="Running omni from the terminal launches Polly"
style={{ width: "100%", borderRadius: "8px" }}
/>
<figcaption>
Start Polly with <code>omni polly</code>, or just <code>omni</code>.
</figcaption>
</figure>

## 2. Give it a task
<figure>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="/images/docs/polly-default-launch.gif"
alt="Running omni from the terminal launches Polly"
style={{ width: "100%", borderRadius: "8px" }}
/>
<figcaption>
Start Polly with <code>omni polly</code>, or just <code>omni</code>.
</figcaption>
</figure>

```
Refactor the authentication module into separate files for OAuth, JWT, and session handling. Add tests for each.
```
2. Give Polly a task, for example:

Polly breaks this into sub-tasks and delegates each one to a different
AI agent. Claude Code implements one piece, Codex implements another in
parallel, and a different agent reviews each PR.
```
Refactor the authentication module into separate files for OAuth, JWT, and session handling. Add tests for each.
```

## 3. Watch it in the web UI or desktop app
Polly breaks this into sub-tasks and delegates each one to a different AI
agent. Claude Code implements one piece, Codex implements another in
parallel, and a different agent reviews each PR.

<ContentTabs labels={["Web UI", "Desktop App"]}>
<div>
## 2. Watch the agents work

Open `http://localhost:6767` in your browser. It shows the same session
as your terminal, updating in real time.
Claude Code and Codex work on different parts of the task at the same time.

</div>
<div>
Open `http://localhost:6767` or launch the [desktop app](/docs/interact/desktop)
and connect to the same address.

Launch the [desktop app](/docs/interact/desktop) and connect it to
`http://localhost:6767`. It shows the same session as your terminal, and
adds OS notifications and a dock badge when Polly or a sub-agent needs
your attention, which is useful while sub-agents work in parallel.

</div>
</ContentTabs>

The right panel has four tabs: **Files**, **Agents**, **Shells**, and
**Todos**.

Click the **Agents** tab to see every sub-agent Polly dispatches, with
live status (working, idle, finished).
Click the **Agents** tab to see every sub-agent Polly dispatches, with live
status (working, idle, finished).

- Click any sub-agent to switch to its view and see its conversation, files, and terminal output.
- Switch to the **Shells** tab to see all running shells side by side.
- Intervene at any point: send a message to a sub-agent, or switch back to Polly to see the orchestrator's view.
- Switch to the **Shells** tab to see all running shells side by side.

<figure>
{/* eslint-disable-next-line @next/next/no-img-element */}
Expand All @@ -92,12 +79,63 @@ live status (working, idle, finished).
</figcaption>
</figure>

This is where multi-AI orchestration becomes tangible: you can watch
Claude Code and Codex working on different parts of the same task
simultaneously, each in its own git worktree.
## 3. Turn on Smart Routing

Smart Routing picks the best model for each sub-task based on complexity:
a short, well-scoped task goes to a faster model; an ambiguous or
cross-cutting refactor goes to a stronger one. Polly applies this per
sub-agent spawn, so each worker gets the model suited to its slice of
the work.

To enable it, click the **Smart Routing** toggle in the chat composer. A chip appears below each routed message showing which model was picked and why.

Smart Routing requires a server-side LLM connection. If your server isn't
configured with one, the toggle is hidden and Polly falls back to the default model.

## 4. Explore Omnigent features

### Comment on the agent's work

Click any part of the agent's output and leave an inline comment. The agent
sees exactly what you highlighted and revises it. Click **Address All** to
have the agent automatically address all your comments.

![Addressing an inline comment on agent output](/images/docs/address-comment.png)

### Edit files directly

Open any file the agent created in the built-in editor. Make changes yourself
with syntax highlighting, and see a diff of what the agent changed. The agent
can see your edits and continue from there.

![Editing a file in the Omnigent web UI](/images/docs/file-editor.gif)

### Paste an image

Drag a screenshot, mockup, or diagram into the chat. The agent sees it
alongside your text. Try pasting a screenshot of a UI bug or a design spec.

### Fork a session and switch agents

Fork your current session to try a different approach without affecting the
original. Click the <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><circle cx="18" cy="6" r="3"></circle><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"></path><path d="M12 12v3"></path></svg> icon on any message to fork from that point. The fork copies the full conversation history up to there, so you can experiment freely. You can also fork to a different agent: start in Claude Code and continue with Codex, or vice versa.

### Use the built-in browser (desktop app)

The [Omnigent desktop app](/docs/interact/desktop) includes an embedded browser
pane your agent can drive directly: navigate to a URL, click elements, type into inputs, and take screenshots. The pane opens automatically when the
agent needs it. Use it for tasks like testing a local web app, scraping a page,
or verifying a UI change.

## 5. Use Polly's built-in skills

Type any of these into the Polly chat to go further:

- **`/fanout`**: run independent tasks in parallel. Each gets its own sub-agent and git worktree, and opens its own PR.
- **`/cross-review`**: send an implementer's diff to a different-vendor reviewer. Blocking issues loop back as fixes until clean.
- **`/investigate`**: delegate read-only work (debugging, audits, code understanding) to sub-agents and get a synthesized report.

See [Polly reference](/docs/use/builtin-agents/polly) for the full details
on skills like `/fanout`, `/cross-review`, and `/investigate`.
See the [Polly reference](/docs/use/builtin-agents/polly) for full details.

## What's next

Expand Down
Loading