Public
Remixed
Chat-driven HTML codegen using the Celeris API
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

Celeris Coder

Chat-driven HTML code generation on the Celeris API. The UI has three columns: chat and generation telemetry, syntax-highlighted HTML, and a live sandboxed preview.

CELERIS_API_KEY is read only on the server in celeris.ts.

Measured API behavior

Several of these observations contradict the docs and were established by probing.

Context window8,192 tokens
max_tokens256 | 512 | 768 | 1024
StreamingAbout 256 tokens per SSE event
Tool callingWorks, though absent from the API reference
continue_final_messageWorks while streaming
ThroughputRoughly 1,000–2,800 tok/s observed per call

Celeris-1 is a diffusion model, so output lands in blocks rather than typing out one token at a time. The UI intentionally shows those blocks as they arrive.

Generation

The model now generates the whole page in one continuous stream: body markup, an internal separator, then JavaScript. The server wraps that stream as a complete HTML document, so both the code panel and preview always receive one HTML artifact.

The separator exists only because Celeris's inbound proxy rejects request bodies containing common XSS signatures, including scripting and styling tags, doctype declarations, inline style attributes, and event-handler attributes. WAF-safe output can be sent back through continue_final_message, letting generation exceed the 1,024-token per-call cap. The server adds the document shell and script wrapper after generation, where it never travels back to Celeris.

Follow-up messages append to a running instruction list and regenerate the page. Completed HTML cannot be sent back for editing because the proxy would reject it.

Generated JavaScript is syntax-checked only to surface a warning. Invalid JavaScript is preserved unchanged in the HTML and code panel.

Files

AGENTS.md                     Project instructions and file map
README.md                     Architecture and measured API behavior
index.ts                      Hono server, static files, SSE generation endpoint
celeris.ts                    Celeris client, continuation, and HTML assembly
debug_single.ts               Standalone generation probe
frontend/
  index.html                  Browser shell and highlight.js theme
  index.tsx                   React entrypoint
  favicon.svg                 App icon
  components/
    App.tsx                   SSE consumption and three-column layout
    ChatPanel.tsx             Messages, call telemetry, and summary stats
    CodePanel.tsx             HTML syntax highlighting with embedded JS
    PreviewPanel.tsx          Sandboxed live preview and warnings

Gotchas

  • Do not put literal blocked tag spellings into the Celeris system prompt.
  • A failed continuation keeps the rounds that already succeeded.
  • The preview iframe allows scripts, forms, and modals without allow-same-origin.
  • Longer output can contain diffusion artifacts such as duplicated words or unmatched tags.
  • The HTTP endpoint is public, so anyone with its URL can spend Celeris credits.