Skip to content

feat: add Grok support and new Claude models - #474

Merged
ysamcode merged 17 commits into
mainfrom
develop
Jul 28, 2026
Merged

feat: add Grok support and new Claude models#474
ysamcode merged 17 commits into
mainfrom
develop

Conversation

@ysamcode

@ysamcode ysamcode commented Jul 28, 2026

Copy link
Copy Markdown
Collaborator

Summary

Add xAI Grok as a bring-your-own-key AI provider and refresh the Claude model lineup with Opus 5 (new default) and Fable 5. Also includes agent reliability and UX improvements: graceful run timeouts, faster responses, removal of the low-yield post-build self-review pass, persisted turn errors, and a live status indicator in the chat — plus fraction width support in sizing inputs.

Changes

AI providers & models

  • Add xAI Grok as an AI provider with Grok 4.5 and Grok 4.3 models, API key validation against the xAI Console (with clear messages for blocked/disabled keys), and Grok branding in settings and the model picker
  • Add Claude Opus 5 and Fable 5; make Opus 5 the default model
  • Mark Opus 4.8 as legacy — hidden from settings and pickers unless a project already has it enabled

Agent reliability & performance

  • End long agent runs gracefully before the Vercel function timeout, so changes are saved and the user gets a resumable "ran out of time" message instead of a silent cutoff
  • Reduce thinking latency on new Claude models and raise the per-turn token budget so builds no longer get truncated mid-thought
  • Remove the automatic post-build visual self-review pass — with current models it nearly always found nothing to fix, while costing a full extra agent turn and 10–20 seconds after every build (old chats containing review turns still render and replay correctly)
  • Exclude auto-review turns in old chats from the history sent to the model, fixing runs that replied "no changes needed" to a new request
  • Persist agent errors to chat history so reloaded transcripts show why a run failed
  • Scale tall page captures to stay within vision-model image size limits
  • Show a friendly message when attached images exceed the request size limit

UI

  • Show a rotating live status with elapsed time in the chat while the agent is working, instead of a static "Working…"
  • Improve the API key validation error layout in agent settings

Builder

  • Support Tailwind fraction values (e.g. 1/2, 2/3) in sizing inputs, surfaced to AI agents and autocomplete

Other fixes

  • Render background images set by the AI: apply the background design and classes when setting or binding a background image, and support image URLs in design payloads (bgImageVars), instead of only setting the CSS variable
  • Scale proxied images proportionally instead of cropping them

Test plan

  • Connect an xAI API key in Settings → Agent and verify validation feedback (valid, invalid, and blocked keys)
  • Run a build with Grok 4.5 and confirm it completes
  • Verify the model picker defaults to Opus 5 and lists Fable 5 and Sonnet 5
  • Confirm Opus 4.8 is hidden on a fresh project but still shown where already enabled
  • Run a long build and confirm the live status ticks in the sidebar and the run ends gracefully if it hits the time budget
  • Confirm a build ends right after the changes land — no extra "Reviewing the result…" step
  • Ask the agent for a change right after a completed build — it should perform the change, not reply "no changes needed"
  • Ask the AI to set a background image on a section and confirm it displays
  • Enter a fraction width like 1/2 in the sizing panel and confirm it applies

tristan-mouchet and others added 10 commits July 27, 2026 14:59
Server-side resizing used fit: 'cover', which crops to the requested
box and fights the rendered element's CSS object-fit (e.g. a single
?width= param returned a distorted sliver). Switch to fit: 'inside' so
images scale proportionally, and extract an isResizableBitmap helper to
gate the sharp path.
A failed agent run (e.g. provider out of credits) only set a transient
store-level error, so the turn was saved as an empty assistant message
and reloaded transcripts gave no clue why the AI never replied. Record
the humanized error on the turn itself so it persists to ai_chats and
renders in the bubble after reloads.
- Add Grok 4.5 and Grok 4.3 to the model picker with cost estimates
- Reuse the OpenAI Chat Completions provider against the x.ai base URL
- Validate xAI keys via /v1/api-key: per-endpoint ACLs 403 the models
  list even for keys that work for chat, and blocked teams (usually
  missing credits) get an actionable message
- Show key verification errors in an alert with a Save anyway button
  instead of a cramped inline row
Replayed as history, the review instruction ("reply with at most one
short sentence", "do not make changes for the sake of it") reads like a
standing order — weaker models then answer later requests with "Looks
good — no changes needed." instead of doing the work. Review turns are
self-contained, and their fixes reach the next turn via the fresh page
snapshot injected per request.
Vercel kills the chat function at maxDuration without running
catch/finally, so long builds were silently truncated mid-stream with
no error and no change snapshots. Raise the route limit to 800s (Pro
GA maximum) and stop the tool loop at a 740s wall-clock budget so runs
end cleanly: snapshots and usage are emitted and the user gets a
resumable "ran out of time" error.

Also fix the vercel.json functions glob, which was missing the
(builder) segment and matched no routes.
- Add Fable 5 ($10/$50) and Opus 5 ($5/$25) with cost estimates
- Make Opus 5 the default model
- Mark Opus 4.8 legacy: hidden from settings and pickers unless the
  project's stored allowlist already includes it
Current Claude models run adaptive thinking at high effort by default,
spending most of a turn reasoning silently while thinking bills as
output tokens — one Fable 5 build burned the full 8192-token cap in a
single truncated 91s turn. Request medium effort via output_config
(visual building doesn't need deep reasoning, matching the OpenAI
provider's low reasoning_effort) and raise DEFAULT_MAX_TOKENS to 16384
so thinking plus large batch payloads fit.
Replace the static "Working…" with rotating phrases and a ticking
elapsed-time counter, so long silent thinking stretches still show
visible progress between tool rows.
- Scale tall page captures to fit vision-model size limits (Anthropic
  rejects sides over 8000px), which failed the self-review on long pages
- Explain 413 responses as attached images being too large instead of
  surfacing a bare status code
ysamcode added 4 commits July 28, 2026 08:27
Typing a fraction like 1/2 in the width setting previously produced an
invalid arbitrary class (w-[1/2]). Fractions now map to native Tailwind
utilities (w-1/2, min-w-5/12), and whole fractions like 12/12 normalize
to the full keyword (w-full) since Tailwind no longer ships n/n classes.
MCP instructions and the design reference did not mention fraction
widths, so agents had no way to discover them. Also add common width
fractions to the class autocomplete suggestions.
MCP instructions and the design reference did not mention fraction
widths, so agents had no way to discover them. Also add common width
fractions to the class autocomplete suggestions.
The post-build screenshot critique nearly always returns "looks good"
now that main models produce solid first passes — and the reviewer is
deliberately a cheaper, weaker tier that mostly rubber-stamps stronger
builders' work. Each pass still cost a full extra agent turn (system
prompt, tools, full-page screenshot) and 10-20s of "Reviewing the
result" after the build already finished.

Old chats keep working: the review flag, compact rendering, and
model-history exclusion stay, and providerOfModel still resolves the
legacy review-only model ids found in persisted turns.
feat: support fraction widths like 1/2 and 12/12
bgGradientVars was the only var channel wired to the backgroundImage
design property, so image URLs passed the same way never displayed.
Handle bgImageVars alongside it and wrap bare URLs in url(...) so the
values are always valid CSS.
@ysamcode
ysamcode merged commit 5405c47 into main Jul 28, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature request A new feature request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants