Run Claude Code and Codex together
A hands-on AgentGrid tutorial with a Claude Code builder, a separate Codex reviewer, and a small pagination bug you can reproduce.
In this guide
Use Claude Code to make a change and Codex to review it in a separate conversation. AgentGrid keeps both workers, their output, and your terminal on one canvas. A lead agent coordinates the handoffs; you inspect the result before it ships.
This guide uses a deliberately broken pagination function. It is a practice exercise with a known bug, so you can check the outcome yourself. It is not a benchmark or a claim that one model always catches another's mistakes.
Before you start
- Download and install AgentGrid, then sign in to the desktop app.
- In Settings -> Agents, install and sign in to Claude Code and Codex. See Coding harness setup if either is missing.
- Have Git and Node.js available in your terminal. This exercise uses Node's built-in test runner and needs no npm packages.
AgentGrid uses your own AI subscriptions or API keys. Provider usage and limits still apply. See pricing for the current AgentGrid free tier and optional Pro plan.
1. Set up a small project
Create an empty folder named agentgrid-review-practice. Open a terminal in it and run:
git init
node --versionIn AgentGrid, create a space and set its project folder to this folder. Open a Claude Code or Codex agent from the spawn menu; this will be your lead. The Quickstart shows these steps.
Create paginate.mjs with this intentionally incorrect implementation:
export function paginate(items, page, pageSize) {
const start = page * pageSize
return items.slice(start, start + pageSize)
}Create __tests__/paginate.test.mjs:
import assert from 'node:assert/strict'
import test from 'node:test'
import { paginate } from '../paginate.mjs'
test('page one starts with the first item', () => {
assert.deepEqual(paginate(['a', 'b', 'c'], 1, 2), ['a', 'b'])
})Run node --test. The test should fail: the function returns ['c'] for page one. This establishes the bug before an agent changes anything.
In this authored exercise, page one should return a and b. The initial function starts at index 2 and returns only c.
Diagram by AgentGridSave the starting point in Git:
git add paginate.mjs __tests__/paginate.test.mjs
git commit -m "Add pagination practice exercise"If Git asks for your identity, configure it before continuing. The initial commit gives the builder a base for a dedicated worktree and gives the reviewer a clear diff.
2. Give the lead a builder task
Paste this into the lead's conversation:
Read any project instructions first. Use AgentGrid's tools to create a
dedicated worktree for this exercise and launch a visible Claude Code builder
with its working directory set to that worktree. Use its configured model.
Fix paginate(items, page, pageSize). Acceptance criteria:
- Page numbers start at 1.
- A partial last page returns the remaining items.
- An empty array or a page past the end returns an empty array.
- The input array is unchanged.
- page and pageSize must be positive integers; otherwise throw RangeError.
Have the builder add tests for these requirements and run node --test.
Wait for it to finish. Report the worktree path, changed files and actual
test result. Do not merge, publish or deploy the exercise.The builder should appear as a separate worker on the canvas. Open it to inspect its conversation. Check that the reported working directory matches the dedicated worktree, and that the lead reports a completed test run rather than just a plan to run one.
3. Ask Codex for an independent review
After the builder finishes, send this to the same lead:
Launch a separate visible Codex reviewer using its configured model. Set its
working directory to the builder's worktree. Give it the original acceptance
criteria, starting commit and current diff, including any untracked tests.
Ask it to inspect the implementation and tests independently. It may run
node --test but must not edit files. Ask for concrete inputs and expected vs
actual outputs for each finding, with file and line references. A clean
review is valid; do not invent a finding just to demonstrate a review loop.
Wait for its verdict. If it finds a defect, send the exact findings to the
same builder. After the builder finishes the revision, ask the same reviewer
to recheck it. Finish with the final diff, test result and unresolved risks.
Wait for my approval before merging or publishing anything.Here, "independent" means a separate review conversation against your requirements. Both workers still see the same files. The reviewer prompt asks it to avoid edits; it does not create a filesystem permission boundary. Wait for each stage to finish so the reviewer sees a stable revision.
The exercise separates implementation, independent review, and your own check of the result.
Diagram by AgentGrid4. Check the result yourself
Open a terminal in the reported worktree and run node --test. Compare the implementation and tests with these examples:
| Input | Expected result |
|---|---|
paginate(['a', 'b', 'c'], 1, 2) | ['a', 'b'] |
paginate(['a', 'b', 'c'], 2, 2) | ['c'] |
paginate(['a', 'b', 'c'], 3, 2) | [] |
paginate([], 1, 2) | [] |
paginate(['a'], 0, 2) | Throws RangeError |
paginate(['a'], 1, 1.5) | Throws RangeError |
Also check that the original array stays unchanged, and that tests cover invalid values for both numeric arguments. Passing the first test alone only proves that the original example was fixed. A green test run and a clean review are evidence to inspect, not a guarantee that every edge case is covered.
If the handoff stalls
- A harness is unavailable: use Settings -> Agents to finish installation or sign-in, then ask the lead to retry that worker.
- The lead reports too soon: ask it to wait for the worker's completed turn and read the actual output.
- A revision starts another team: ask the lead to reuse the existing builder and reviewer so their conversations retain the earlier findings.
- You resume later: ask the lead to list its team and identify the workers by title before continuing. See session recovery.
Use the pattern on your own project
Replace the pagination task with one small change and explicit acceptance criteria. Keep the builder and review stages separate. For a UI change, ask the lead to open the running app on the canvas so you can try the result before approving it.
Continue with Orchestrating agents for roles, model selection and worker reuse, or try the interactive homepage demo to explore the canvas before installing.