Synthetix

Inspiration

A webpage can render without doing what its creator intended. A counter that increases by two instead of one may show no console error at all. Synthetix explores how an AI coding workflow can connect generation to observable browser behaviour, rather than stop when the model returns code.

The intended audience is beginners building small web interfaces and developers who want to inspect the evidence behind an AI repair.

What it does

Synthetix has three main workflows:

• Build: describe a website, clarify requirements, compare design directions, review an editable brief, and approve it before generation. The design explorer supports 15 styles. An additional AI pass proposes layout hierarchy, typography, surfaces and purposeful motion.
• Repair: import HTML/CSS/JavaScript, collect runtime diagnostics, describe intended behaviour, review proposed declarative browser tests, and attempt a repair against the approved checks.
• Run locally / Run HTML: inspect and preview submitted web code without AI edits. The desktop version can serve it at a verified loopback address; the online version uses an isolated preview.

The workspace preserves source versions, browser screenshots, test reports and code differences. Users can rerun saved checks, edit source into a new inspection run, restore an earlier version as an untested draft, and export HTML.

How it was built

The application uses Python and Streamlit for the workspace, Playwright and Chromium for browser inspection, and NVIDIA's nvidia/NVIDIA-Nemotron-3-Nano-30B-A3B model through the Nebius Token Factory inference API. The OpenAI-compatible Python client keeps model requests on the server.

The pipeline is: generate or import → run in Chromium → collect console, JavaScript and selected behaviour failures → send the code and evidence to Nemotron → save the proposed repair → rerun the selected checks. Automatic repair is bounded to three attempts, and earlier versions are retained.

The model is used at runtime for requirement extraction, design recommendations, visual refinement, website generation, proposed repair tests and code repair. Streamlit Community Cloud hosts the public Python app, while GitHub Pages provides the project website and embedded app entry point. This submission uses Token Factory inference; it does not claim deployment on Nebius AI Cloud compute or use of Tavily.

Generated pages are treated as untrusted. Browser checks run with network restrictions, timeouts and a filtered process environment. Previews use opaque sandboxed frames and content security policies. These controls are not a complete operating-system isolation guarantee.

Demonstrated results

The 2:23 video contains actual local application captures and real Token Factory calls. Long waits are shortened, synthetic narration is disclosed, and the controlled bug is labelled.

• A newly generated Focus Counter failed a button-name assertion, was repaired once, and then passed all six selected counter checks.
• A separate controlled counter deliberately added two instead of one. Its original browser assertion failed with expected 1 and actual 2. One Nemotron repair changed the logic to +1, and all six selected checks passed. A subsequent manual retest passed again.
• Local hosting preserved the submitted HTML byte for byte and returned an HTTP-verified URL.
• The latest local regression run passed 142 tests. These are controlled application regression tests, not 142 live-model evaluations.

Challenges and current limitations

Model-generated plans and interfaces can still violate requirements. During recording, an imported-code repair-plan request failed schema validation, including after retry. It was rejected rather than executed or reported as successful. A separate validator type-check crash found during that request was fixed and covered by a regression test.

Passing the selected browser assertions does not certify visual quality, accessibility, mobile layout or every possible interaction. The generated Focus Counter preview still contained an overlapping decorative badge, illustrating why manual review remains necessary.

Current scope is a self-contained HTML file with inline CSS and JavaScript. Synthetix does not implement real authentication, payments, databases or email services. Online sessions are temporary, and free hosting can sleep. AI actions in the current public app require the visitor's own Nebius key; inspection and Run HTML do not.

Engineering lessons

The project separates model proposals from user-approved requirements, runtime failures from behaviour failures, and selected checks from untested claims. Saved checkpoints and reports make failures inspectable, including unsuccessful repair or planning attempts. Reliable testing requires explicit, user-visible assertions and fresh browser state.

Next steps

Improve schema adherence and recovery for AI-proposed tests, add more reusable behaviour-check templates, and strengthen visual and responsive review without treating model confidence as proof of correctness.

Built With

• css
• html
• javascript
• nebius
• nemotron
• playwright
• python
• streamlit