Internet lost. Attempting reconnection...
Petal Petal
Petal
1k
Sign in
Recipes
All recipes
News
  • Pro
    • Pro
    • Membership
    • Releases
    • Roadmap
    • Generators
    • Getting Started
    • What is Petal Pro?
    • Changelog
    • Upgrade Guide
    • Recipes
    • Installation
    • Folder Structure
    • Guides
    • Web App From Start to Finish
    • Deploy to Fly.io
    • Adding a Subscription
    • Metered Usage
    • Creating Your Own API
    • Content Editor Plugin
    • Core Features
    • Users & Authentication
    • Passkeys
    • Organizations & Multitenancy
    • Stripe Billing
    • Notifications
    • Emails
    • Blog & CMS
    • Image Uploads
    • Included Pages
    • UI & Customization
    • Customization Recipes
    • Components
    • Branding
    • Dark Mode
    • Layouts & Menus
    • Generators
    • JavaScript Hooks
    • Translations
    • Admin & Monitoring
    • Impersonation
    • AI & Developer Tooling
    • Admin MCP Server
    • Claude Code Integration
    • Feedback & Analytics
    • Changelog System
    • Going to Production
    • Deployment
    • Background Tasks & Jobs
    • Seeding
    • Testing
    • REST API
    • GDPR
  • Components
    • Getting Started
    • About Petal Components
    • All components
    • Install
    • Petal Design
    • Roadmap
    • Theming
    • Typeset
    • UI Components
    • Accordion
    • Alert dialog
    • Alerts
    • Avatars
    • Badges
    • Breadcrumbs
    • Button Group
    • Buttons
    • Calendar
    • Card
    • Carousel
    • Charts
    • Chat (AI)
    • Combobox
    • Collapsible
    • Color scheme switch
    • Command
    • Containers
    • Flash Pro Currently only available to Petal Pro members
    • Floating div Pro Currently only available to Petal Pro members
    • Content Editor Pro Currently only available to Petal Pro members
    • Context menu
    • Data Table
    • Date picker
    • Dropdowns
    • Empty state
    • File upload
    • Filters
    • Forms
    • Heroicons
    • Hover card
    • Input Group
    • Input OTP
    • Kbd
    • Language select
    • Layouts Pro Currently only available to Petal Pro members
    • Links
    • Loading
    • Local time
    • Marquee
    • Menus
    • Modals
    • Navigation Menu
    • Number field
    • Pagination
    • Popover
    • Progress
    • QR code
    • Rating
    • Resizable
    • Scroll area
    • Scrollspy
    • Separator
    • Sidebar
    • Skeleton
    • Slide Over
    • Slider
    • Social Button
    • Sortable
    • Stepper
    • Table
    • Tabs
    • Timeline
    • Toast
    • Toggle Group
    • Tooltip
    • Tree
    • Typography
    • Marketing Components
    • Aurora
    • Border Beam
    • Border plasma
    • Confetti
    • Meteors
    • Number Ticker
    • Shine Border
    • Spotlight Card
    • Text Animation
  • Recipes
    • Overview
    • All recipes
    • AI
    • AI Prompt
    • Streaming Chat
    • Tool Calling
    • Structured Output
    • Cost Tracking
    • Background Jobs
    • Provider Fallback
    • MCP Server
    • UI
    • Forms
  • Blog
  • Showcase
  • Changelog
  • Feedback

Recipes

Working code for the jobs a Phoenix app keeps needing. Each recipe is the whole thing: the files, in order, with the reasoning next to them. Copy what you need.

UI
Forms
Simple form
AI
AI Prompt
AI Prompt (Multi-Provider)
Streaming Chat
AI Streaming Chat
Tool Calling
AI Tool Calling with Jido
Structured Output
Structured Output (JSON)
Cost Tracking
Per-User AI Cost Tracking
Background Jobs
Background AI Jobs with Oban
Provider Fallback
Multi-Provider Fallback
MCP Server
MCP Server in Phoenix

Copyright © 2026 Everfree Pty Ltd.

Privacy Policy

No results found.
Pro
Membership Releases Roadmap Generators What is Petal Pro? Changelog Upgrade Guide Recipes Installation Folder Structure Users & Authentication Passkeys Organizations & Multitenancy Stripe Billing Notifications Emails Blog & CMS Image Uploads Included Pages Customization Recipes Components Branding Dark Mode Layouts & Menus Generators JavaScript Hooks Translations Impersonation AI & Developer Tooling Admin MCP Server Claude Code Integration Feedback & Analytics Changelog System Deployment Background Tasks & Jobs Seeding Testing REST API GDPR Web App From Start to Finish Deploy to Fly.io Adding a Subscription Metered Usage Creating Your Own API Content Editor Plugin
Components
About Petal Components All components Install Petal Design Roadmap Aurora Accordion Alert dialog Alerts Avatars Badges Breadcrumbs Border Beam Border plasma Button Group Confetti Buttons Calendar Card Carousel Charts Chat (AI) Combobox Collapsible Color scheme switch Command Containers Flash Floating div Content Editor Context menu Data Table Date picker Dropdowns Empty state File upload Filters Forms Heroicons Meteors Hover card Input Group Number Ticker Input OTP Kbd Language select Shine Border Layouts Links Loading Local time Marquee Spotlight Card Menus Modals Text Animation Navigation Menu Number field Pagination Popover Progress QR code Rating Resizable Scroll area Scrollspy Separator Sidebar Skeleton Slide Over Slider Social Button Sortable Stepper Table Tabs Timeline Toast Toggle Group Tooltip Tree Typography Theming Typeset
Recipes
All recipes Forms AI Prompt Streaming Chat Tool Calling Structured Output Cost Tracking Background Jobs Provider Fallback MCP Server
Blog
Showcase
Changelog
Feedback