Skip to main content
Vibes ships with a library of interactive widgets so generated apps feel like real products, not static mockups. You can extend these widgets or introduce your own components when you refine the app post-transfer.

​
Built-in patterns

WidgetUse cases
Interactive mapVisualize store locations, delivery zones, or service coverage with zoom and tooltips.
Image carouselHighlight feature screenshots, product photos, or design mockups.
Photo albumDisplay grid galleries with lightbox navigation.
Scrollable listPresent search results or structured records with sorting and filters.
Video playerEmbed how-to videos or product demos directly in the generated page.
Each widget is implemented with standard HTML, CSS, and JavaScript, so you can enrich them after transferring the project.

​
Customize prompts

To influence widget selection, include cues in your prompt:
  • “Show nearby clinics on a map.”
  • “Add a carousel with three customer testimonials.”
  • “Create a pricing table with cards for Starter and Pro tiers.”
Vibes chooses the closest widget pattern and populates placeholder content that you can refine later.

​
Reference implementation

The pizzaz-mcp-heroku repository demonstrates the full widget stack—MCP server, manifest, and front-end components. Use it as a blueprint when designing custom widgets.

​
Key files

  • /widgets/*.html – iframe HTML for each widget.
  • /widgets/static/* – CSS and JavaScript assets.
  • /server/tools/*.py – MCP tool definitions that return widget metadata.

​
After transfer

Once the app lives in your Heroku account you can:
  • Replace placeholder data with content from your database or APIs.
  • Swap the widget framework for your preferred component library (React, Vue, etc.).
  • Add analytics or event tracking to understand user interaction with widgets.
Widgets are a quick way to demonstrate value during prototyping. Treat them as starting points—enhance them as you productize the generated app.