Codex: A Data File to a Live Next.js + Recharts Dashboard

The Stack

Tested Against

Prerequisites

• Codex with the @build-web-apps and @vercel plugins
• A Next.js repo and a data/metrics.json file
• A Vercel login for the preview deploy

Steps

1. 1

   Ask Codex to build the dashboard and ship a preview

   Use @build-web-apps to build a dashboard in this Next.js repo that reads data/metrics.json and renders it with Recharts: a line chart for the trend and KPI cards for the totals. Run the local build, then use @vercel to deploy a preview and hand me the link.

2. 2

   What CI checks: the data is valid JSON and the build is wired

   The shell spine in the post is jq empty data/metrics.json then npm run build. CI runs the deterministic half: it confirms data/metrics.json parses as JSON (the equivalent of jq empty, done with node for portability) and the build is wired (next build, recharts present). The full next build and the deploy are fenced.

   mkdir -p data
   cat > data/metrics.json <<'EOF'
   { "trend": [ {"month":"Jan","value":120}, {"month":"Feb","value":150}, {"month":"Mar","value":170} ], "totals": { "users": 440, "revenue": 12800 } }
   EOF
   cat > package.json <<'EOF'
   {
     "name": "dashboard",
     "private": true,
     "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
     "dependencies": { "next": "^15.0.0", "react": "^19.0.0", "react-dom": "^19.0.0", "recharts": "^2.13.0" }
   }
   EOF
   cat > checkdash.mjs <<'EOF'
   import { readFileSync } from 'node:fs';
   let ok = true;
   function check(label, cond){ console.log(label + ': ' + (cond ? 'yes' : 'NO')); if(!cond) ok=false; }
   let data = null;
   try { data = JSON.parse(readFileSync('data/metrics.json', 'utf8')); check('data/metrics.json is valid JSON', true); }
   catch { check('data/metrics.json is valid JSON', false); }
   check('data has a trend series and totals', !!data && Array.isArray(data.trend) && !!data.totals);
   const pkg = JSON.parse(readFileSync('package.json', 'utf8'));
   check('build script is next build', String((pkg.scripts||{}).build||'').includes('next build'));
   check('next is a dependency', !!(pkg.dependencies && pkg.dependencies.next));
   check('recharts is a dependency', !!(pkg.dependencies && pkg.dependencies.recharts));
   if(!ok){ console.log('dashboard build-readiness check FAILED'); process.exit(1); }
   console.log('dashboard build-readiness check OK');
   EOF
   node checkdash.mjs

3. 3

   Let Codex build and deploy (the model + account step, not checked by CI)

   Codex designs the charts, runs the full next build, and @vercel deploys the preview with the link. The design and the deploy are non-deterministic and account-gated, so CI never runs them. The badge covers valid data plus a wired build, not the live dashboard.