Halide

Here is the rewritten story tailored for a solo developer:

Inspiration

The current experience of building UI with AI involves far too much friction. It usually means context-switching between a chat window, an IDE, a browser tab, and a terminal. You copy code from the chatbot, paste it into your editor, wait for the build, and then realize the AI broke the layout. I realized I was using AI as a static dictionary rather than a true co-developer.

I was inspired by the concept of chemical development in classic film photography—the idea that you could take a raw, invisible prompt and instantly "develop" it into a clear, tangible interface. I wanted to build a workspace that completely removes the friction between intent and validation.

What it does

Halide is an agentic developer sandbox powered by GPT-5.6 and Codex. It provides a unified workspace where the prompt, the code editor, and the live rendering canvas sit side-by-side.

But Halide isn't just a code generator—it acts as an autonomous QA engineer. Once Codex synthesizes your UI component, Halide runs a secure local engine that parses the generated DOM to automatically verify semantic structure, accessibility (ARIA labels), DOM node limits, and security boundaries (blocking external embeds and malicious scripts). If the tests pass, you get a satisfying burst of confetti; if they fail, Codex is immediately aware of the context.

How I built it

I architected Halide focusing on extreme performance and a tight human-AI loop:

• Frontend: Built with React 19 and Vite, utilizing a custom split-pane workspace layout. The UI uses a strict dark-mode glassmorphic design system heavily inspired by modern HCI principles.
• Backend Validation Engine: I wrote a lightweight Node.js/Express server that uses linkedom for blazing-fast server-side DOM parsing. This allows me to statically analyze the Codex-generated HTML before it ever reaches the browser.
• AI Integration: I leveraged the OpenAI Node SDK to connect directly to gpt-5.6. I built a robust prompt-policy layer that intercepts vague requests and forces the user to clarify scope (e.g., "Do you want to change the entire dashboard, or just the primary accents?") before spending model tokens.

Challenges I ran into

The hardest challenge was prompt gating and safety. When giving an AI complete control over rendering UI, you risk users prompting for off-topic content or the model hallucinating external tracking scripts. I had to build a custom promptPolicy.ts engine utilizing regex-based intent classification to gently reject non-implementation requests. Additionally, writing the static assessment engine to accurately catch inline handlers (onclick=) and remote asset injections without breaking legitimate CSS was a delicate balancing act.

Accomplishments that I'm proud of

I am incredibly proud of the Fallback Presentation Mode. If a user or judge doesn't have an API key configured, the application elegantly falls back into a deterministic presentation mode. Judges can still click the presets, interact with the UI, and run the simulated test suite without dealing with environment variables. But the moment you click the "API Key" button and provide a valid OpenAI key, the app seamlessly elevates into "Live Codex Mode", instantly wiring up the real GPT-5.6 engine.

What I learned

I learned a tremendous amount about structuring system instructions for Codex. I discovered that simply asking the model for code isn't enough; you must explicitly constrain the response boundaries (e.g., forbidding markdown fences, enforcing maximum character limits) to ensure a deterministic pipeline. I also learned how critical Visibility of System Status is—adding the live pulse animations and the terminal logs made the AI feel much more collaborative and transparent.

What's next for Halide

Right now, Halide excels at single, isolated component generation. The next step is expanding the sandboxed iframe to support multi-page routing, allowing Codex to orchestrate entire single-page applications. I also want to implement a visual diffing tool, so when Codex alters a component, the user can see exactly which CSS properties were manipulated before accepting the changes.

Built With

• codex
• css3
• express.js
• gpt-5.6
• html5
• javascript
• node.js
• openai
• react
• typescript
• vite