How to evaluate AI-generated React code
A good preview is evidence of visual output, not evidence of a maintainable application. Review the source, interactions, failure states, recovery path, and exported project before accepting generated React code.
Proof-first funnel
Proof signals for higher-confidence decisions
Use these checkpoints before committing spend.
Before / After
Before/after workflow
Capture the goal, generate, review, iterate, and verify before export.
- Plan and cost expectations before build
- Review checkpoints before each restore
- Export only after the acceptance script passes
Restore + Export
Reversible edits and handoff
Keep checkpoints, require scoped rollbacks, and export with manifest, quality report, and deployment instructions.
- One restore creates one explicit new checkpoint
- Restore history stays visible for auditability
- Export includes manifest, report, and deployment files
Spend + Artifacts
Cost clarity and output traceability
Confirm expected credits before run, compare with actual usage, and review exported files before shipping.
- Expected usage shown before generation
- Actual usage and refunds after completion
- Post-build artifacts checked in a clean environment
The short answer
Require a coherent file graph, resolved imports, meaningful TypeScript, accessible controls, responsive behavior, predictable state, explicit environment boundaries, reversible edits, and a clean local production build.
At a glance
Minimum acceptance matrix
| Area | Pass condition | Common failure |
|---|---|---|
| Imports | Every local path resolves and export styles match | Missing files or default/named mismatch |
| Types | External input is parsed and app state is explicit | Broad any or unchecked JSON |
| Accessibility | Named controls, keyboard flow, visible focus | Clickable icons with no label |
| Responsive | No clipped content at supported widths | Desktop-only fixed dimensions |
| Export | Clean install, typecheck, build, and run | Preview-only dependency or config |
1. Start with the file graph
Find the real entry point, route ownership, shared UI primitives, feature modules, hooks, utilities, and data boundaries. Every internal import must resolve to a real file, and default versus named imports must match the corresponding export.
2. Read types at trust boundaries
Generated TypeScript should validate external data instead of sprinkling broad any types through fetch responses, forms, storage, and environment values. Check that optional and error states are represented rather than asserted away.
3. Exercise interactions, not screenshots
Click every primary action, submit empty and valid forms, open and close overlays, change filters, navigate with the keyboard, refresh on nested routes, and verify loading, empty, success, and failure states.
4. Audit accessibility in the rendered UI
Inputs need names, icon-only buttons need accessible labels, dialogs need focus management, headings need a meaningful outline, color cannot be the only signal, and motion should respect reduced-motion preferences.
5. Check responsive composition
Test narrow phones, tablets, small laptops, and wide desktops. Look for horizontal overflow, clipped controls, unreadable tables, touch targets that collapse, and fixed panels that trap content below the fold.
6. Review security and environment assumptions
Search for embedded secrets, client-side authorization decisions, unsafe HTML, unvalidated URLs, permissive redirects, direct database credentials, and dependencies or APIs that only work inside the builder preview.
7. Make one narrow edit
Ask the builder to change a single element or behavior. Then diff the project. A trustworthy edit should preserve unrelated copy, state, routes, and styling instead of regenerating the entire application.
8. Export and build from clean state
Move the result outside the builder. Install with the documented package manager, run type checking and linting, build for production, start the output, and repeat critical interactions without preview-only infrastructure.
Technical example
Make import resolution a mechanical check
Generated applications often look correct until a local import points to a file that was never returned. A quality gate should reject that output before handoff.
const unresolved = imports.filter((path) => !generatedPaths.has(path));
if (unresolved.length > 0) {
throw new Error(`Missing generated files: ${unresolved.join(", ")}`);
}First-party evidence
Inspect the same surfaces Squid checks
This checklist is grounded in Squid's implemented file-graph, preview, accessibility, recovery, and export checks. Use the public workspace and methodology to reproduce the review on a real generated project.
Evidence links are maintained by Squid Agent. Product behavior can change; repeat the documented checks against the current project and review date.
FAQ
Frequently asked questions
Direct answers to the questions buyers and builders ask before committing a project to an AI app builder.
What should I check first in generated React code?
Start with the entry point and internal import graph. If files are missing or exports do not match imports, the rest of the review cannot be trusted.
Is a successful preview enough?
No. A preview may include hidden platform files, cached dependencies, or runtime behavior that the exported project does not reproduce.
Should generated code have zero accessibility warnings?
Treat automated warnings as a baseline. Passing mechanical checks still requires keyboard, screen-reader, contrast, focus, and interaction review.
How do I test whether edits are safe?
Request one narrow change, diff every file, run the acceptance suite, and verify unrelated UI and behavior remain unchanged.
What must an export include?
Source, package metadata, lockfile or package-manager guidance, build configuration, environment documentation, run instructions, and any framework support files the preview supplied implicitly.
Keep researching
Related guides and comparisons
Build an app you can inspect, restore, and keep.
Define your acceptance criteria, confirm expected credits, lock the first checkpoint, and run through the checklist before you export.