Bolt-style project type selector for AI apps
A Bolt-style project type selector for AI websites, apps, and landing pages. Use it to let users set context before writing a prompt in any vibe coding or AI builder onboarding flow. Use this AI template with Replit, Bolt, Lovable, Claude Code, ChatGPT Codex, or any other AI code generator. Copy and use.
About this vibe coding template
A Bolt-style project type selector with four option cards in a 2x2 grid where selecting a card highlights it to set context before the user writes a prompt, reducing the chance they submit a vague or unfocused request. This pattern appears in Bolt, Lovable, Replit, and all the major AI builders because it improves output quality by giving the model more context about what the user is trying to build. Paste into Bolt, Claude Code, Replit, or Lovable and ask the AI to update the card labels and icons to match your product's project categories.
Common questions about this template
Which AI builder products use this kind of project type selector?
Bolt, Lovable, Replit, and most AI builders that take a text prompt from the user include a project type selector before the prompt input. It is used to reduce the scope of the AI's interpretation and improve the quality of the first generation.
Can I use this selector for more than four options?
Yes. Ask Bolt, Claude Code, or Replit to add more cards to the grid. For five or six options, the two-column grid extends to three rows. For seven or more, ask your vibe tool to switch to a three-column grid.
How do I wire the selected type to change the prompt suggestions?
Ask Bolt, Claude Code, or Replit to connect the type selector to the suggestion dropdown so selecting a different card filters the suggestions shown in the prompt area. Tell the AI what suggestions should appear for each project type.
Can I add icons to the selector cards?
Yes. Ask your vibe coding tool to add an icon to each card. Tell the AI what each category represents and it will add an appropriate SVG icon to each card while keeping the selector layout intact.
Use this AI coding template for
- ·Project type selectors in AI builder onboarding flows for Bolt and Replit
- ·Context-setting selector cards for vibe-coded app UIs with two to four choices
- ·Intent-setting components before prompt input in AI SaaS products
- ·Onboarding step UIs for no-code and AI-powered app generators