ZAAI Code Lab
DX26 logo UI Prototype

AI Developer Experience,
as result-first chat.

A Next.js prototype of a coding-agent shell. The live demo runs a scripted ZAAI-com todo-app chat with product decisions, generated artifacts, parallel agent work, visible failures, and a PR handoff.

Open live demo

The todo app chat, mapped.

Four panes, one active thread, and a result-first demo player driving the ZAAI-com todo-app run.

DX26 todo-app chat mid-run with answered feature choices, a proposed tech stack card, and design directions (light theme).
Live DX26 todo-app thread mid-run, with compact cards and active product decisions.

Built around the todo app run.

Six interaction patterns from the current live script, each one a swap-point for a future production system.

  • Result-first chat

    The main thread stays readable while action cards hold artifacts, diagnostics, and deeper reasoning in nested detail views.

  • Repo-scoped threads

    The live seed anchors a chat to ZAAI-com, the ZAAI Apps product set, the todo-app repo, and the main branch.

  • Scripted decisions

    The todo run asks for v1 features, visual direction, navigation, and completion behavior before it shows implementation output.

  • Parallel agent fan-out

    A single chat can summarize specialist agents for schema, auth, tasks, sharing, realtime sync, and test coverage.

  • Artifacts in the thread

    Stack notes, schema diagrams, API summaries, UI gallery output, coverage, infrastructure, and PR handoff cards all render inline.

  • Visible failure state

    A migration-order failure is promoted as a loud top-level blocker instead of being buried inside logs.

A tour of the result-first shell.

Six features from the live ZAAI-com todo-app run, captured straight from the deployed app.

A repo-scoped workspace

Every chat sits inside a familiar shell. The left rail holds repos, trees, branches, and agent chats; the right rail tracks the working tree as the run stages and edits files.

DX26 left rail with the repo tree, branch selector, and agent chats (light theme).
DX26 changes rail tracking staged and unstaged files in the working tree (light theme).

Decisions with inline previews

Before it scaffolds anything, the agent asks the questions that matter and renders the options inline. Pick a navigation pattern from real previews instead of describing one in prose.

A DX26 chat card offering three navigation-pattern previews to choose from (light theme).

Parallel agent fan-out

A single request can split into specialist sub-agents. Here one prompt fans out to six, covering schema, auth, tasks, sharing, sync, and tests, then reports back as one card.

A DX26 card fanning one request out to six specialist sub-agents (light theme).

Drill into any result

The thread stays compact, but every card opens. Expand the tech stack for the full reasoning, a stack table, and a copy-paste setup, all without leaving the chat.

A DX26 result card opened into a full detail drawer with a stack table and setup (light theme).

Failures surface loudly

When something breaks, it is promoted to a bright, colored card with a plain explanation and a link to diagnostics, never buried in a wall of logs.

A DX26 alert card surfacing a failed database migration with a link to diagnostics (light theme).

A reviewable PR handoff

The run ends where review begins. The final card hands the work off as a pull request, with the file count and CI status ready to check.

A DX26 card handing the run off as pull request 42 with CI passed (light theme).

Result cards, up close.

DX26 keeps the main thread readable while detailed work expands into focused cards and drawers.

DX26 backend result card showing six specialist sub-agents completed across schema, auth, tasks, sharing, sync, and tests (light theme).
One request fans out to six specialist agents, then returns as a compact backend result.
DX26 proposed tech stack drawer showing detailed reasoning, stack table, setup command, and follow-up layers (light theme).
A compact card opens into a full detail drawer without leaving the chat.

A 30-second tour

  1. 1

    Open the todo thread

    The live demo lands in GitHub.com / ZAAI-com / todo-app with Build the Todo app selected on the main branch.

  2. 2

    Play the result-first run

    Use the demo player or /play to stream the zaai-todo-result-first script into the active chat.

  3. 3

    Review the handoff

    Follow the decisions, generated artifacts, test report, migration blocker, and final PR card in one thread.

Built with

  • Next.js 16
  • React 19
  • TypeScript 6
  • Tailwind v4
  • Catalyst (Tailwind Plus)
  • assistant-ui
  • Headless UI
  • Motion
  • lucide-react
  • Zustand 5
  • Bun package manager
  • Render static deploy

The assistant-ui runtime is wired into the chat surface. The app is still a static prototype: real UI, scripted data.

Intentionally not here.

The prototype keeps production integrations out of scope so the interaction model can move quickly.

  • No real AI API yet. The agent output is driven by scripted mock events.
  • No real GitHub API or git working tree. Seed data hydrates the org, repo, branch, thread, and file-state views.
  • No backend database. The deployed app is a static export with UI state persisted in localStorage.
  • No formal test suite or test CI for the prototype repo. Render auto-deploys the static app on commit.

Screens from the live todo app chat.

Captured from the deployed DX26 app at 1440 by 900 with the active ZAAI-com todo-app thread.

DX26 chat card asking the user to choose between three navigation-pattern previews (light theme).
Inline previews turn product decisions into visible choices.
DX26 todo-app chat mid-run with answered feature choices, a proposed tech stack card, and design directions (light theme).
The result-first script mid-run, with compact cards and active decisions.

Questions worth asking.

What is DX26?
DX26 is a Next.js prototype for a result-first coding-agent chat product. The live route shows a ZAAI-com todo-app thread where a scripted agent plans and builds a collaborative todo app inside a four-pane engineering shell.
What does result-first mean here?
The chat keeps the primary result visible and pushes deeper work into action cards, drawers, artifacts, and diagnostics. The todo app run shows this through stack, schema, API, tests, UI, failure, and PR cards instead of a wall of raw logs.
What does the todo app chat demonstrate?
It starts with product choices, then proposes a Next.js, Postgres, and WebSocket stack, compares design directions, fans out backend work to six agents, shows test coverage, renders UI screens, surfaces a migration blocker, and ends with a PR handoff.
Is the live demo connected to real services?
No. The shell, assistant-ui integration, controls, local state, and rendering are real, but the AI work, GitHub data, git status, and todo app artifacts are scripted prototype data.

Try the result-first chat.

Open the deployed ZAAI-com todo app route.

Open live demo