Prompt → shape → preview → verify → refine. Built for the OpenAI Build Week Challenge.
Building an interface normally means context-switching between an idea, a chat window, an editor, a browser, and a test runner. That friction interrupts creative momentum.
Halide keeps the whole loop in one calm, legible workspace. Codex is the intelligence layer: it receives intent, proposes the implementation, helps iterate on the existing artifact, and supports verification. The person remains the editor and decision-maker; the agent accelerates the craft.
Halide is not a chat box placed next to an editor. Its interaction model is designed around a tight human–AI making loop powered directly by Codex and GPT-5.6:
- Agentic UI Generation (GPT-5.6): When a user submits a prompt (e.g., "Design a glassmorphic auth form"), Halide routes the request and the current component source code to a secure local Express server. The server uses the
openaiSDK to call GPT-5.6, instructing it to act as an implementation engine that returns a self-contained, responsive HTML/CSS UI component. - Context-Aware Iteration (Codex): Because Halide passes the live editor state back to the model with every request, Codex can perform pinpoint edits (e.g., "Change the primary button to a gradient") without losing the surrounding context or breaking existing styling.
- Intent Validation: We implemented a strict prompt-gating policy (
promptPolicy.ts). If a user asks a vague question ("Make the dashboard nicer"), the system intercepts it and asks clarifying questions before spending Codex tokens, ensuring generation requests are always focused and intentional. - Autonomous QA Engineer: Once Codex generates the code, Halide doesn't just render it. It runs a local semantic, security, and accessibility parser (
halide-engine.mjs) against the generated DOM. It ensures Codex didn't hallucinate unsafe scripts or external embeds, and checks if Codex included proper ARIA labels.
| Moment | What the maker sees | Why it matters |
|---|---|---|
| 1. Start with intent | A focused Codex conversation with a single, obvious prompt field | Lowers the barrier to a useful first action. |
| 2. Keep authorship | The generated HTML is visible and directly editable | Builds trust—nothing important is hidden behind the model. |
| 3. See the result now | A live, responsive preview beside the source | Shortens the feedback loop and makes iteration feel tangible. |
| 4. Verify with confidence | A dedicated console for test feedback | Separates “it looks right” from “it behaves right.” |
| 5. Celebrate progress | Clear success states and a restrained moment of delight after a passing run | Makes system status unmistakable without becoming noisy. |
Halide’s visual language follows modern product-design patterns, but every choice is grounded in usability rather than decoration. The workspace is fully responsive, stacking intelligently on mobile and tablet devices while retaining all functionality.
| Principle | How Halide applies it |
|---|---|
| Visibility of system status | Generation activity, preview state, console output, and passing checks make progress easy to read. |
| Recognition over recall | Named presets, familiar editor/preview/console conventions, and clear icon labels reduce memory load. |
| Progressive disclosure | The primary flow is prompt → preview; testing and diagnostic tools remain available without competing for attention. |
| User control and freedom | Source stays editable at all times, so a person can accept, adjust, or discard an idea. |
| Visual hierarchy | A restrained dark workspace, clear panel boundaries, typography contrast, and one cyan action accent direct attention to the next action. |
Prerequisite: Node.js 20 or later.
npm installTo use Live Codex Mode:
- Start the server:
npm run dev
- Open
http://localhost:5173. - Click the API Key button in the top navigation bar to securely enter your OpenAI API key. The app will immediately switch to "Codex live" mode.
- (Alternatively, you can create a
.envfile withOPENAI_API_KEY=sk-...)
If no API key is provided, Halide elegantly falls back to a deterministic Presentation Mode, allowing judges to experience the UI and layout without credentials!
- Launch Halide and note the three clear work zones: Codex conversation, editable source, and live result.
- Click the API Key button to input your OpenAI API Key, activating the live GPT-5.6 engine.
- Choose Glassmorphic Auth or Habit Tracker from the preset rail to show immediate, high-fidelity transformation.
- Ask Codex for a change (e.g. "Add a subtle drop shadow to the card"); the interface confirms the generation state, communicates with the backend, and preserves a readable conversation trail.
- Select Run Tests to surface real-time DOM parsing, security validation, and semantic checks on the generated code.
- React 19 + Vite for a fast development and production build loop
- Express / Node.js Backend for secure API routing and local DOM analysis (
linkedom) - OpenAI Node SDK for connecting to GPT-5.6
- Lucide for a coherent, familiar icon system
- Canvas Confetti for a purposeful success acknowledgement
Halide is an experiment in a more humane development environment: AI should make the next useful action clearer, preserve creative control, and provide evidence that a change works. That is the bar we are setting for a Codex-powered builder.