# Project export: ClaimDone This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: OpenAI Build Week - Tagline: Turn 1 - 3 accident photos and a short description into a reviewed claim, then watch Computer Use submit your claim in an insurer portal. - Devpost: https://devpost.com/software/claimdone - GitHub: https://github.com/janikdotzel/claimdone - Video: https://www.youtube.com/embed/bSIkn1L5J44?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 1 GitHub contributor(s) — Janik Dotzel (5 commits) ## Devpost submission (written by the team) ### Inspiration After a stressful incident, people must collect evidence, remember important details, and translate an ordinary explanation into an unfamiliar insurance form. ClaimDone makes that first step feel as simple as sharing a few photos and explaining what happened. ### What it does ClaimDone turns one to three accident photos plus a short text or voice description into a clear insurance-claim. The multimodal claim agent reviews the visible evidence and the customer statement. Once the claim is complete, Computer Use opens a dummy insurer website, navigates from its home page to the claim form and fills only the approved claim values. How I built it with Codex and GPT-5.6 The runtime AI pipeline uses: GPT-5.6 for multimodal image and statement analysis through the OpenAI Responses API gpt-4o-mini-transcribe for voice memos gpt-5.4-mini Computer Use for the restricted insurer-portal handoff Codex was my used for all of the development. I used it to plan the product flow, implement the frontend and backend, create the restricted Computer Use workflow, review the responsive interface in a browser, diagnose failures, write tests, and prepare the repository and demo. GPT-5.6 Sol extra high was used for deep planning. GPT-5.6 ULTRA for milestone-based goals, and GPT-5.6 Terra supported fast iteration and day-to-day questions. A key workflow lesson was to define the product in Plan mode first, when I don't know what exactly to build. Then give longer Codex goals with explicit milestone stops. After every milestone I reviewed the working experience, gave feedback, and continued after approval. That produced a much smaller and more coherent result than giving a long-running agent an underspecified destination. Accomplishments I'm proud of Real Computer Use navigation and form filling inside a safe synthetic portal One simple customer flow with only four states: input, analyzing, needs information, and ready Observable agent activity that remains useful without exposing hidden reasoning P.S. I learned that Codex works best for ambitious builds when product uncertainty is resolved before implementation. Planning, precise goals, and review checkpoints made the agent dramatically more effective. ## README (from the GitHub repository) # ClaimDone ClaimDone turns one to three accident photos and a short written or spoken description into a reviewed insurance claim, then uses Computer Use to complete a synthetic insurer portal. ## Run locally You need: - Node.js 24 - an OpenAI API key - Google Chrome for the Computer Use handoff Clone the repository and install the dependencies: ```bash git clone https://github.com/janikdotzel/claimdone.git cd claimdone npm install cp .env.example .env.local ``` Open `.env.local` and add your server-side API key: ```bash OPENAI_API_KEY=your_openai_api_key ``` To watch the isolated Chrome window while Computer Use runs, add this optional setting: ```bash CLAIMDONE_SHOW_COMPUTER_USE_BROWSER=true ``` Start ClaimDone: ```bash npm run dev ``` Open the presenter experience at [http://127.0.0.1:3001/demo](http://127.0.0.1:3001/demo). Three synthetic accident photos and a sample description are already prepared, so you can select **Analyze accident** immediately. ## Built with Codex and OpenAI ClaimDone was planned, implemented, reviewed, debugged, and documented with Codex. The project began as a much broader insurance product, but that first direction was too complex for a focused hackathon demo. The most important improvement was changing how Codex was used before rebuilding it. ### Planning before implementation We used Codex Plan mode with GPT-5.6 Sol at high reasoning effort to turn an open-ended idea into a deliberately small product. The planning process defined the four user-facing states, the one-question limit, the sandbox boundary, the presenter experience, and explicit non-goals such as dashboards, persistence, queues, authentication, and real insurer submission. This let us review the product direction before generating the application. Questions and visual references were resolved while changes were still inexpensive. ### Building with milestone goals Once the desired experience was clear, we created a precise Codex goal for implementation with GPT-5.6 Sol. The goal was divided into approval milestones covering the static experience, interactive flow, live AI integration, Computer Use handoff, and final polish. Codex stopped after every milestone. We ran the app, reviewed it in the browser, gave concrete feedback, and approved the next stage only when the current one felt right. This kept a long-running agent aligned without losing the speed of autonomous implementation. ### Fast iteration and review GPT-5.6 Terra at high reasoning effort was the main model for everyday product questions, smaller frontend and user-flow improvements, debugging, and final review. Codex also helped: - simplify the original production-oriented repository into this standalone demo; - implement the customer flow and presenter-only agent activity view; - build and restrict the Computer Use browser loop; - diagnose safety blocks and provider failures; - review spacing, responsive behavior, accessibility, and demo pacing in the browser; - write focused tests and prepare the repository, README, Devpost submission, and demo script. The result came from a lightweight Codex setup with a small number of useful skills and tools, rather than a large collection of third-party extensions. ### Runtime model roles | Model | Role in ClaimDone | | --- | --- | | `gpt-5.6` | Reviews the accident photos and customer statement, extracts claim details, and decides whether one essential detail is missing. | | `gpt-4o-mini-transcribe` | Converts a short voice memo into text before the claim analysis. | | `gpt-5.4-mini` | Uses the built-in Computer Use tool to navigate and complete the restricted local insurer sandbox. | The application is built with Next.js 16, React 19, TypeScript, CSS Modules, the OpenAI Responses API, Playwright Core, and Zod. Claim data stays in memory, and the insurer portal is entirely synthetic. ## License ClaimDone is available under the [MIT License](LICENSE). ## Detected evidence (automated analysis) Indexed codebase: 55 recognized source files, 311 KB. - CSS (language) — detected in the code - Next.js (technology) — detected in the code - OpenAI (technology) — detected in the code - React (technology) — detected in the code - TypeScript (language) — detected in the code ## Codebase structure (from repository index) ### Files (63 of 63) ``` .env.example .gitignore .npmrc .nvmrc eslint.config.mjs HACKATHON_SUBMISSION.md LICENSE next-env.d.ts next.config.ts package.json README.md src/app/api/analyze/route.ts src/app/api/demo/analyze/route.ts src/app/api/demo/portal-handoff/route.ts src/app/api/portal-handoff/route.ts src/app/brand-mark.tsx src/app/claim-experience.test.tsx src/app/claim-experience.tsx src/app/demo/demo-lens.tsx src/app/demo/demo.module.css src/app/demo/page.tsx src/app/globals.css src/app/layout.tsx src/app/mock-analysis.ts src/app/page.module.css src/app/page.tsx src/app/portal/page.test.tsx src/app/portal/page.tsx src/app/portal/portal-handoff-context.tsx src/app/portal/sandbox/claims/new/page.test.tsx src/app/portal/sandbox/claims/new/page.tsx src/app/portal/sandbox/claims/page.test.tsx src/app/portal/sandbox/claims/page.tsx src/app/portal/sandbox/layout.test.tsx src/app/portal/sandbox/layout.tsx src/app/portal/sandbox/page.test.tsx src/app/portal/sandbox/page.tsx src/app/portal/sandbox/sandbox.module.css src/lib/analysis-client.test.ts src/lib/analysis-client.ts src/lib/analysis-schema.ts src/lib/demo-analysis-schema.test.ts src/lib/demo-analysis-schema.ts src/lib/portal-field-values.test.ts src/lib/portal-field-values.ts src/lib/portal-handoff-client.test.ts src/lib/portal-handoff-client.ts src/lib/portal-handoff-schema.test.ts src/lib/portal-handoff-schema.ts src/server/analyze-handler.test.ts src/server/analyze-handler.ts src/server/claim-analyzer.ts src/server/computer-use-portal.test.ts src/server/computer-use-portal.ts src/server/openai-claim-analyzer.test.ts src/server/openai-claim-analyzer.ts src/server/portal-handoff-handler.test.ts src/server/portal-handoff-handler.ts src/test/demo-fixtures.ts src/test/setup.ts SUBMISSION_CHECKLIST.md tsconfig.json vitest.config.ts ``` ### Dependencies - package.json: @testing-library/jest-dom@6.9.1, @testing-library/react@16.3.2, @testing-library/user-event@14.6.1, @types/node@24.10.1, @types/react@19.2.17, @types/react-dom@19.2.3, eslint@9.39.5, eslint-config-next@16.2.10, jsdom@29.1.1, next@16.2.10, openai@6.47.0, playwright-core@1.57.0, react@19.2.7, react-dom@19.2.7, typescript@6.0.3, vitest@4.1.10, zod@4.4.3 ### Recent commits (newest first) - simplify judge setup guide - finalize hackathon submission docs - add Evidence-to-Claim logo - remove nvm requirement from setup - surface missing analysis configuration - Merge pull request #4 from janikdotzel/codex/readme-cleanup - streamline hackathon README - Merge pull request #3 from janikdotzel/codex/demo-ui-review - restore presenter card spacing - add presenter motion choreography - reveal Computer Use only on handoff - allow current Node 24 releases - refine presenter demo flow - Merge pull request #2 from janikdotzel/codex/repository-tidy-up - chore: prepare repository for Build Week submission - Merge pull request #1 from janikdotzel/codex/hackathon-demo-replacement - feat: replace ClaimDone with hackathon demo - chore: snapshot legacy ClaimDone implementation - docs: checkpoint INT-002 acceptance candidate - fix(api): preserve disconnect receive after body replay ## Key source files (fetched from GitHub, selected and truncated for size) ### HACKATHON_SUBMISSION.md ```markdown # ClaimDone Build Week submission This document is the single source of truth for hackathon logistics and the demo narrative. Product setup and technical behavior are documented in [`README.md`](README.md). Last reviewed: July 20, 2026. ## Product story ClaimDone turns one to three accident photos and a short written or spoken description into an editable insurance-claim preview. If one essential fact is missing, the agent asks exactly one question. Once the user approves the claim, Computer Use navigates a synthetic insurer portal, fills the approved fields, verifies them, and stops before submission. The two demo moments are: 1. **Visible agent reasoning:** `/demo` exposes a concise, validated activity ledger for each photo, the customer statement, completeness checks, corrections, and the final decision. 2. **Visible Computer Use:** the presenter view replays screenshots captured from the actual isolated browser run, including portal navigation, field entry, and final verification. The customer view remains deliberately simple. The presenter lens explains what happened behind the scenes without exposing chain-of-thought or technical logs. ## Recommended demo outline Aim for about 2 minutes and 15 seconds; the submitted video must stay under three minutes and include narration. 1. **Problem, 0:00–0:15** — Accident reporting is stressful and insurer forms are repetitive. 2. **Evidence, 0:15–0:35** — Show the three synthetic photos and short description already staged on `/demo`. 3. **Agent review, 0:35–0:55** — Run the analysis. Point out that the agent checks each source and asks only for the missing date and time. 4. **Human correction, 0:55–1:10** — Add the missing detail and show the activity ledger update to a complete decision. 5. **Computer Use, 1:10–1:45** — Start the portal handoff. Show the isolated browser or captured replay navigating from the insurer home page to the form and filling the reviewed values. 6. **Safety, 1:45–2:00** — Emphasize that the sandbox has no submit control, the agent is path- and action-restricted, and nothing reaches a real insurer. 7. **Built with Codex, 2:00–2:15** — Briefly show how Codex helped replace the legacy prototype, iterate on the design, test the states, and implement the Computer Use boundary. The closing line can be: “Three photos, one short description, and a reviewed claim ready for the insurer portal—without hiding control from the user.” ## Build provenance and key decisions This repository contains a clear before-and-after history for the pre-existing project: - `4c3fb1b` — snapshot of the legacy production-oriented ClaimDone implementation; - `ec14e06` — replacement with the standalone minimal hackathon demo; - pull request #1 / `dc652f4` — reviewed merge into `main`. Codex was used for product simplification, implementation, visual browser review, tests, safety debugging, documentation, and repository integration. The current design intentionally uses: - one Next.js appli [truncated — 715 more characters] ``` ### SUBMISSION_CHECKLIST.md ```markdown # ClaimDone — OpenAI Build Week submission checklist Last updated: July 20, 2026. Submission deadline: **July 21, 2026 at 5:00 PM PT / July 22 at 02:00 CEST**. ## Next action Complete the remaining OpenAI Build Week submission fields on Devpost, preview the entry, and explicitly submit it to the hackathon. Required Devpost `/feedback` Session ID: ```text 019f69f5-252c-7fd1-a0fe-0e9ca08aea16 ``` ## Demo video - [x] Record and edit the English demo video. - [x] Keep the final video under three minutes. Verified duration: **2:49**. - [x] Upload the video to YouTube. - [x] Confirm that the video link is reachable. - [x] Confirm that the video is public. YouTube metadata reports `isUnlisted: false`. - [x] Remove the YouTube age restriction and confirm that the video plays inside the Devpost embed. - [x] Add the YouTube URL to the Devpost project. **Video:** [ClaimDone — AI Insurance Claims with Codex & Computer Use | OpenAI Build Week](https://www.youtube.com/watch?v=bSIkn1L5J44) Final playback check: - [ ] The working product is clearly visible. - [ ] The narration is in English. - [ ] The narration explains what ClaimDone does. - [ ] The narration explains how Codex was used to build it. - [ ] The narration explains how GPT-5.6 is used in the product. - [ ] No API keys, personal data, or private notifications are visible. - [ ] Audio is understandable at normal volume. ## Repository and documentation - [x] Working application implemented. - [x] Repository published at [github.com/janikdotzel/claimdone](https://github.com/janikdotzel/claimdone). - [x] Repository is public. - [x] Synthetic sample evidence is included. - [x] Customer-facing UI is in English. - [x] Add an open-source license: MIT. - [x] Update `README.md` so `/demo` is the primary newcomer and judge route. - [x] Mention `/` only as the optional simplified customer view. - [x] Keep `CLAIMDONE_SHOW_COMPUTER_USE_BROWSER` documented as an optional presenter setting. - [x] Expand the README explanation of how Codex accelerated the workflow and where key decisions were made. - [x] Clearly document the runtime roles of GPT-5.6, `gpt-4o-mini-transcribe`, and `gpt-5.4-mini` Computer Use. - [x] Remove the finished local recording script; it is no longer needed for judging or project setup. - [x] Remove the generated local `next-env.d.ts` development-only diff before the final commit. - [x] Confirm that `.env.local` and API keys are absent from tracked files and the final diff. - [x] Commit and push all approved submission-documentation changes. ## Final technical verification - [ ] Test setup from a clean checkout. - [ ] Run `npm ci`. - [ ] Create `.env.local` from `.env.example` and add a test API key locally. - [x] Run `npm run lint`. - [x] Run `npm run typecheck`. - [x] Run `npm test` — 15 files and 121 tests passed. - [x] Run `npm run build`. - [ ] Run `npm run dev`. - [ ] Open `http://127.0.0.1:3001/demo`. - [ ] Complete the image-analysis and missing-information flow. - [ ] C [truncated — 2108 more characters] ``` ### package.json ``` { "name": "claimdone", "version": "0.1.0", "private": true, "description": "A deliberately minimal ClaimDone hackathon demo.", "engines": { "node": ">=24.14.0 <25" }, "packageManager": "npm@11.9.0", "scripts": { "build": "next build", "dev": "next dev --hostname 127.0.0.1 --port 3001", "lint": "eslint . --max-warnings 0", "start": "next start --hostname 127.0.0.1 --port 3001", "test": "vitest run", "typecheck": "next typegen && tsc --noEmit" }, "dependencies": { "next": "16.2.10", "openai": "6.47.0", "playwright-core": "1.57.0", "react": "19.2.7", "react-dom": "19.2.7", "zod": "4.4.3" }, "devDependencies": { "@testing-library/jest-dom": "6.9.1", "@testing-library/react": "16.3.2", "@testing-library/user-event": "14.6.1", "@types/node": "24.10.1", "@types/react": "19.2.17", "@types/react-dom": "19.2.3", "eslint": "9.39.5", "eslint-config-next": "16.2.10", "jsdom": "29.1.1", "typescript": "6.0.3", "vitest": "4.1.10" } } ``` ### src/app/page.tsx ```typescript import { ClaimExperience } from "./claim-experience"; export default function HomePage() { return ; } ``` ### src/app/layout.tsx ```typescript import type { Metadata } from "next"; import type { ReactNode } from "react"; import { PortalHandoffProvider } from "./portal/portal-handoff-context"; import "./globals.css"; export const metadata: Metadata = { description: "A minimal demo that turns accident photos and a short statement into a claim preview.", title: "ClaimDone", }; export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) { return ( Skip to main content {children} ); } ``` ### src/app/demo/page.tsx ```typescript import { ClaimExperience } from "../claim-experience"; export default function DemoPage() { return ; } ``` ### src/app/portal/page.tsx ```typescript "use client"; import Image from "next/image"; import Link from "next/link"; import { BrandMark } from "../brand-mark"; import styles from "../page.module.css"; import { usePortalHandoff } from "./portal-handoff-context"; export default function PortalHandoffPage() { const { preparedHandoff, setPreparedHandoff } = usePortalHandoff(); return (
ClaimDone

Insurer portal sandbox

Sandbox only
{preparedHandoff ? ( <>
Filled by Computer Use

Insurer portal prepared

Computer Use filled this synthetic form for your review.

Completed insurer portal sandbox form filled by Computer Use
Final sandbox view Open filled Demo Mutual portal

Sandbox only. Nothing was submitted.

) : ( <>

No prepared portal yet

Start from a ready claim to let Computer Use fill the insurer portal sandbox.

Sandbox only. Nothing was submitted.

)} setPreparedHandoff(null)} > Back to claim
); } ``` ### src/app/api/analyze/route.ts ```typescript import { createAnalyzeHandler } from "@/server/analyze-handler"; import { createOpenAIClaimAnalyzer } from "@/server/openai-claim-analyzer"; export const runtime = "nodejs"; export const POST = createAnalyzeHandler(createOpenAIClaimAnalyzer); ``` ### src/app/api/portal-handoff/route.ts ```typescript import { createOpenAIComputerUsePortalAutomator } from "@/server/computer-use-portal"; import { createPortalHandoffHandler } from "@/server/portal-handoff-handler"; export const runtime = "nodejs"; export const maxDuration = 60; export const POST = createPortalHandoffHandler( createOpenAIComputerUsePortalAutomator, ); ``` ### src/app/portal/sandbox/layout.tsx ```typescript import type { ReactNode } from "react"; import styles from "./sandbox.module.css"; export default function InsurerPortalSandboxLayout({ children, }: Readonly<{ children: ReactNode }>) { return (
Demo Mutual
Synthetic sandbox
{children}
); } ``` [45 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]