Stop Guessing Which AI Model to Use — Here's How to Choose
You open the AI popover, tap the model name at the bottom, and a dropdown fans out with a dozen model names — gemini-2.5-flash, gpt-4.1, claude-sonnet-5… Each one has a little coloured pill beside it — Pro, Standard, Lite — and maybe you've been picking at random and hoping for the best.
You're not alone. Model selection is the single most common question we get from users. This guide will help you stop guessing and start choosing.
The only thing you need to look at: tiers
We deliberately don't require you to understand the nuances of every model. Instead, every model in the picker is labelled with a tier:
| Tier | Badge colour | What it's great at | Trade-off |
|---|---|---|---|
| Lite | Grey | Quick fixes, colour changes, small text edits, copy tweaks | May struggle with complex multi-section rewrites |
| Standard | Blue | Section-level edits, responsive adjustments, adding components, form building | Slower than Lite; uses more of your edit quota at the same rate |
| Pro | Green (+ ×2 badge on built-in) |
Full-page redesigns, complex animations, multi-file refactors, creative "make it look amazing" prompts | Counts as 2 edits against your daily quota when using built-in AI |
Rule of thumb: start with Lite, move up only if the result isn't good enough. You'll burn through fewer edits and usually get your answer faster.
Match the tier to the task
Here's a cheat-sheet you can screenshot and keep nearby:
Use Lite when you want to…
- Change a colour, font size, or spacing value
- Swap out placeholder text or fix a typo
- Add or remove a CSS class
- Toggle dark/light mode styles
- Make a quick copy change ("change the headline to…")
Use Standard when you want to…
- Add a new section (hero, testimonials, pricing table)
- Make a page responsive across breakpoints
- Add a contact form with validation
- Rewrite a section's layout from vertical to horizontal (or vice versa)
- Add hover effects and transitions
Use Pro when you want to…
- Completely redesign a page ("make this look modern and premium")
- Add complex scroll-driven or parallax animations
- Refactor a monolith into multi-file CSS/JS
- Get the AI to make several coordinated changes across files
- Brainstorm creative ideas where you want the best output quality
Don't overthink which model within a tier
Within the same tier you might see models from different providers — Google, OpenAI, Anthropic. The differences within a tier are usually small for HTML/CSS/JS editing. Pick whichever is fastest for you, or whichever provider you already have an API key for.
If you're on htmlhost AI (the built-in option), we've already picked a sensible default from the Standard tier. Switch to a Lite model for quick fixes, or to a Pro model when you need more power.
Built-in AI vs. Bring Your Own Key
htmlhost gives you two ways to use AI:
- Built-in AI (htmlhost AI) — No setup. Free users get 10 edits/day; Pro users get 100/day. You pick from the built-in models and we route the call through our servers. Pro-tier models cost 2 edits instead of 1.
- Bring Your Own Key (BYOK) — Paste your own OpenAI, Anthropic, or Google API key into the AI settings modal. Unlimited edits, billed directly by the provider. Your key is saved only in your browser; requests pass through our proxy to the provider, and the key is never stored or logged.
If you're running out of daily edits, BYOK is the escape hatch. And with your own key, you can use models that might not be in the built-in list.
A simple decision flowchart
Next time you open the model picker, ask yourself three questions:
- Is this a small, precise change? → Lite tier. Done.
- Am I adding or restructuring a section? → Standard tier.
- Am I asking for something creative, complex, or across multiple files? → Pro tier.
That's it. No need to memorise model names or version numbers — they change with every provider release. The tiers don't.
Bonus tips
Write better prompts, waste fewer edits
The model matters less than the prompt. A clear, specific instruction to a Lite model will usually outperform a vague prompt to a Pro model. Be explicit: "change the hero background to #1a1a2e and the CTA button to a gradient from #e94560 to #0f3460" beats "make it look better."
Use element selection
When you enable the AI wand and click a specific element in the preview, the AI only sees that element — not the whole page. This makes edits faster, cheaper, and more accurate regardless of which model you pick.
Use @mentions for cross-file context
In multi-file projects, type @ in the prompt to pull in context from another file. The AI can then coordinate changes across files — like updating a CSS variable in your stylesheet while adjusting the HTML that uses it.
Undo is free
Every AI edit can be undone with one click (or ⌘Z). Don't be afraid to experiment — start with a Lite model, undo if it didn't work, and try Standard.
Ready to try it yourself?
Paste HTML, get a link. Deploy your site in under 3 seconds — no config, no build step.
Start hosting