Bolt.DIY (3.5 Sonnet) vs Bolt.New | Unlimited FREE Bolt.New Experience 🔥

Summary of the Video (Bolt.DIY vs Bolt.New)

• Purpose of the comparison: The creator compares Bolt.DIY (open-source “Bring Your Own API key” version) vs Bolt.New (hosted service). They previously tried a similar comparison using other models and got poor results, so this time they switch to Claude 3.5 Sonnet for a more “fair” test:

  • Claude 3.5 Sonnet (new) for Bolt.DIY
  • Claude 3.5 Sonnet (new) for Bolt.New
  • Why Claude 3.5 Sonnet matters: The video emphasizes that Bolt.DIY’s best output quality occurs when using Claude 3.5 Sonnet (new). Using other models previously produced very bad, unstyled, or non-functional websites.

---

Setup / Requirements (Tutorial-Style Notes)

• Bolt.DIY setup: Runs via a local terminal/dev server (example shown at localhost:5173).
• Browser requirement: The development team recommends using Chrome Canary for expected behavior.
• Model selection in Bolt.New and Bolt.DIY:
  • Bolt.New: select Anthropic → Claude 3.5 Sonnet (new)
  • Bolt.DIY: configure with an Anthropic API key and select the Claude model
• Fair testing method: The creator uses the exact same prompt in both tools (and for image tasks, the same screenshot attachment) to compare outputs.

---

Test 1: Generate a Landing Page (Code Generation)

Prompt / Task

“Create a landing page for a web development agency named Astro Tech”

• Includes styling guidance (mentions Tailwind)
• Expects sections such as:
  • hero
  • cards
  • hover effects
  • gradients / visual polish
  • a contact button

Results

• Bolt.New:
  • Successfully generates a landing page with:
    • hero section
    • cards
    • hover effects + gradient/visual polish
    • a contact section/button (not fully working, as noted in the subtitles)
• Bolt.DIY:
  • Initially throws a React-related error:
    • “ReferenceError: React is not defined”
  • Uses an “Ask Bolt” auto-fix feature that sometimes partially resolves issues (e.g., adding a missing React import/config), but the creator still encounters preview/runtime errors and needs manual re-testing.
  • Follow-up edits requested:
    • add hover animations to cards
    • add dummy images
    • improve visuals
  • Ongoing preview/runtime issues occur until they manually run the dev server (via npm run ...).
• Quality comparison:
  • Compared to the creator’s earlier Claude-vs-other-model experiment, results are much better this time.
  • Bolt.New is described as slightly more consistent, but Bolt.DIY still reaches good results after fixes.

---

Test 2: Convert a Dashboard Screenshot into Code (Image-to-Code)

Prompt / Task

• Provide the exact same screenshot and ask each tool to generate the UI.

Results

• Bolt.New:
  • Produces a dashboard layout that closely matches the screenshot, including:
    • colors
    • tags/names
    • column/category layout
    • placeholder charts (charts weren’t fully implemented, but the structure looks close)
    • search box + CTA button + placeholder text/images
• Bolt.DIY:
  • Repeatedly fails with React setup/runtime errors, including:
    • “Could not autodetermine entry point”
    • “React is not defined”
  • Attempted fixes don’t reliably resolve the issue; the creator reports it “kept throwing errors after errors.”
• Fallback attempt:
  • The creator tries forcing Bolt.DIY to output HTML/CSS/JavaScript (Tailwind styling) instead of React.
  • The HTML/CSS/JS version works, but:
    • it doesn’t match the intended React workflow
    • React-based execution still doesn’t work reliably for this task.
• Conclusion from the screenshot test:
  • Bolt.New clearly outperforms Bolt.DIY for the screenshot → React dashboard workflow due to fewer runtime/build failures.

---

Test 3: Trello-like Kanban Board (Interactive App + Drag/Drop)

Prompt / Task

“Create a simple Kanban boards app like Trello… add task and drag and drop tasks between multiple boards”

• Same prompt is given to both tools.

Results

• Bolt.DIY:
  • Generates boards and drag-and-drop works initially
  • Supports adding new tasks via a plus button
  • Missing feature noted: no option to add a new board
  • Styling/UI may require further prompt iterations
• Bolt.New:
  • Shows the same React error pattern for some attempts (as noted in the subtitles)
  • Eventually runs with drag-and-drop enabled after fixes
  • Additional issues reported:
    • can’t edit task text
    • styling differences (appears to use styled-components instead of Tailwind)
  • Follow-up prompts are suggested to correct styling/UX.

---

Overall Conclusions Stated in the Video

• Model choice: Claude 3.5 Sonnet (new) is recommended for good results—other models previously caused significantly worse outputs.
• Bolt.New vs Bolt.DIY:
  • Bolt.New is described as a bit better overall, with more consistent optimizations/features.
  • Bolt.DIY can still be excellent (especially with Claude 3.5 Sonnet), but may suffer from more recurring React build/runtime errors depending on the prompt/task.
• Cost/practical advantage:
  • Bolt.DIY is free aside from the API key, letting users use their own LLM and potentially avoid platform costs.
  • Bolt.New is hosted and priced (only briefly referenced via Bolt.New free token limits).

---

Main Speakers / Sources

• Main speaker: The video’s author/creator (single presenter guiding setup, prompting, and comparisons).
• Systems being evaluated: Bolt.DIY, Bolt.New, Anthropic Claude 3.5 Sonnet (new)
  • Earlier mention of OpenAI GPT-4o and Google Gemini Flash 2.0 appears from the creator’s prior comparison.