← All guides

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

  1. Download and install AgentGrid, then sign in to the desktop app.
  2. In Settings -> Agents, install and sign in to Claude Code and Codex. See Coding harness setup if either is missing.
  3. 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:

Code
git init
node --version

In 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:

Code
export function paginate(items, page, pageSize) {
  const start = page * pageSize

  return items.slice(start, start + pageSize)
}

Create __tests__/paginate.test.mjs:

Code
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.

Pagination example with items a, b and c, page 1 and page size 2. The initial calculation starts at index 2, selecting c. Starting at index 0 selects the expected a and b.

In this authored exercise, page one should return a and b. The initial function starts at index 2 and returns only c.

Diagram by AgentGrid

Save the starting point in Git:

Code
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:

Prompt
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:

Prompt
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.

Three-stage workflow: a Claude Code builder makes the change, a separate Codex reviewer reviews the diff, then you run tests and inspect the result.

The exercise separates implementation, independent review, and your own check of the result.

Diagram by AgentGrid

4. Check the result yourself

Open a terminal in the reported worktree and run node --test. Compare the implementation and tests with these examples:

InputExpected 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.