Loading pattern preview
Loading preview…
PatternsReal-world Examples
Brand Product Placement Generator (Nano Banana)
Brand Product Placement Generator (Nano Banana)
Paste a website URL to extract brand signals with Firecrawl, generate a structured product photography brief, auto-create four Nano Banana placement images, and click any result into a local edit flow.
Loading pattern preview
Loading preview…
Problems solved
Technical challenges this implementation handles out of the box.
- Turn a brand URL into structured product-placement image briefs
- Generate multiple branded photography concepts in parallel
- Compose prompts deterministically from extracted brand signals
- Refine any result through a local before/after edit flow
Use cases
Products and workflows this pattern is designed to support.
- Ecommerce product placement ideation
- Merch and apparel mockup generation
- Launch creative direction from a company website
- Logo placement concepting workflows
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in — then wire env vars and routes the same way.
- 1
Install from the preview toolbar
Copy the install command above and run it in your project — Pro patterns include a short-lived token.
- 2
Add environment variables to .env.local
FIRECRAWL_API_KEY, AI_GATEWAY_API_KEY, UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN
- 3
Point client fetches at your API routes
Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions for your product — Copy for AI in the toolbar helps seed that work.
- 5
Run your dev server and open the pattern route
Install dependencies if needed, then start the app and verify responses.
Environment variables
Capabilities
AI SDK APIs
generateTextOutput.objectgatewayProviders
Gemini
External services
FirecrawlUpstash
Files added
17 filesapp/page.tsxapp/layout.tsxapp/api/brand-placement/route.tsapp/create-image-action.tsxapp/edit-image-action.tsxcomponents/gemini-flash-image.tsxcomponents/block-header.tsxcomponents/countdown.tsxlib/brand-context.tslib/brand-placement-schema.tslib/cached-brand-payloads.tslib/product-photo-prompts.tslib/rate-limit.tslib/image-utils.tshooks/use-image-version.tshooks/image-version-context.tsxREADME.md
Dependencies
16 totalnpm packages
8@mendable/firecrawl-jsUpstashAISDKlucide-reactmotionNext.jsReactZod
Registry components
badgebuttoncardemptyinputseparatorskeletontextarea
Critical files
brand-placement/route.tsCore pipeline route: validates the URL, scrapes branding and markdown with Firecrawl, generates a schema-validated brief via generateText + Output.object, normalizes four supported template placements, and returns prompt-ready placement objects.
lib/brand-placement-schema.tsShared Zod contract for Firecrawl branding, prompt variables, placement concepts, and the BrandPlacementBrief schema. This keeps the route, UI, and prompt library aligned.
lib/product-photo-prompts.tsDeterministic local prompt library for product photography placements. The model chooses structured variables and template IDs, while final prompt composition stays in code via buildPrompt().
components/gemini-flash-image.tsxMain URL-first workbench UI. Handles extraction, structured brief hydration, parallel image generation for four cards, per-card loading/error states, and click-to-edit routing into the selected image panel.
hooks/use-image-version.tsReducer-based workflow and editor state for the block. Separates gallery placement generation from the selected image's local edit history and comparison logic.
app/edit-image-action.tsxSelected-image edit action using Gemini flash image preview. Converts the current image to a data URL, sends multimodal edit instructions, and returns a new image version for local comparison.
Requirements
- Complexity
- Advanced
- Setup time
- ~12 minutes
- Node
- 24+
- Memory
- 512MB
