Build and ship a real shopping app on Lovable in six steps — describe it in prompts, connect Channel3, publish, and start earning. Worked example: KitDen.Lovable builds your app from plain prompts — you describe it, it ships it. Adding Channel3 takes a handful of prompts: real product search, drop-in shopping UI, and automatic monetization, with no SDK wrestling.This guide builds one end to end, using KitDen — an AI room-kit builder (see it live) — as the example.
KitDen's home — describe a vibe, set a budget, and Kit builds a shoppable kit.
Your Channel3 API key — it authenticates requests and attributes your sales.
2
Scaffold the app
Describe the whole flow once, with placeholder data, so you can see the shape before wiring anything real.
Build a web app called KitDen. Home screen: a text box to describe an aesthetic, budget presets ($150 / $300 / $500 + custom), and a "Build my kit" button that leads to a results page of product cards grouped by category (Bedding, Lighting, Wall Decor, Storage, Rug, Desk) — each with image, title, merchant, price, Buy, and Swap, plus a running total vs. budget. Mobile-first. Use placeholder data for now.
One prompt scaffolds the home and results flow.
3
Connect Channel3 and show real products
Lovable Cloud (the built-in backend) is on by default — no separate Supabase signup. Prompt Lovable to add a search function that calls Channel3; when it asks for your key, paste it into the secret dialog. The key lives server-side and never reaches the browser.
Add a backend function called channel3-search that takes { query, filters, limit }, POSTs to https://api.trychannel3.com/v1/search with the header x-api-key set to a secret named CHANNEL3_API_KEY, and returns the JSON with CORS enabled. Then wire the results page to render real products and every available offer — show offer.price.price and a Buy link to offer.url so shoppers can choose their retailer. Only search when the user submits, never on keystroke.
Lovable asks for the key once, in a secure dialog — paste it and submit.
Real Channel3 products, live on the results page.
4
Curate with AI
A search returns a flat list; a kit is one cohesive pick per category, under budget. Lovable’s built-in AI handles that — no API key, runs server-side.
Add curation with Lovable's built-in AI (no API key, server-side). From the aesthetic, have the AI plan a Channel3 search per category, call channel3-search per query, then pick the best item per category within budget with a one-line reason for each. Show the reasons under each card and a short overall summary.
A named, budget-capped kit — chosen and explained by AI.
Catalog images and titles aren’t always perfect (an occasional retail-box shot or generic title). Spot-check picks before you ship, and use Swap to drop in a cleaner match.
5
Add full product pages
Don’t hand-build the hard surfaces — Channel3’s components install by prompt (Lovable reads the registry URL from your message). The product-details block already includes the image gallery, every offer, variants, price history, and recommendations — you just feed it the data.
Add the Channel3 UI components from their shadcn registry at https://ui.trychannel3.com/r/all.json, then build a product detail modal with the product-details block. When I tap a kit item, fetch its detail server-side — add product-detail, price-history, and similar-products actions to channel3-search — and pass the data in as props so the gallery, every offer, price history, and recommendations all render. The components are presentational and never see the key. Each Buy link uses its selected offer.url.
The Channel3 components install from one prompt — no terminal.
A full product page: every offer, price intelligence, similar products, and a one-tap buy.
6
Publish and start earning
Hit Publish (top right), pick a URL, and your app is live. Monetization was automatic the whole time: because search ran with your API key, each offer’s url is an attributed link — you earn when shoppers click through to buy. Nothing to add.
No prompt needed — click Publish, choose your URL, and go live.
Publish gives your app a live URL in a couple of clicks.
Track clicks and earnings in the Channel3 dashboard — no analytics code.
Any result with an offer where max_commission_rate > 0 is monetizable — Channel3 has relationships with thousands of brands. Earnings clear after the retailer’s return window and pay out via Stripe; complete identity verification in the dashboard so commissions aren’t withheld. See Pricing for the split.
Lovable is great for UI and scaffolding, but wiring Channel3 search, lookup, and filters is faster with a coding agent that knows the API. Install the Channel3 API skill in Cursor, Claude Code, or another terminal agent:
Then prompt it alongside Lovable — for example: “Using the Channel3 API skill, add a channel3-search edge function and wire the results page to real product data.” Your terminal agent handles API integration; Lovable keeps iterating on the app.
Want a shopping assistant instead of (or alongside) the builder? The hosted widget handles conversation, product matching, and checkout links — you configure a persona in the dashboard and paste one iframe.
1
Configure the widget
In the dashboard’s Chat Widgets, name it, set Allowed origins to your app’s domain (e.g. https://kitden.lovable.app), and write the Agent instructions (its persona and rules, e.g. “only suggest dorm-safe items under budget”).
Configure the hosted widget in the Channel3 dashboard.
2
Paste it into Lovable
Copy the generated iframe and drop it into the chat — no edge function, no key on the client.
Add this chat widget to the site:<iframe src="https://trychannel3.com/widget/{id}" style="width:100%;height:700px;border:0;"></iframe>
The hosted widget returns real, buyable products from a fuzzy request.
Channel3 API skill
Teach your coding agent the Channel3 API for faster integration.
UI Components
The React component catalog and shadcn registry.
Pricing
Credits, free tier, and commission split.
Support
Questions or a brand request? We’re happy to help.
Building with Cursor or Claude Code alongside Lovable? Install the Channel3
API skill in your terminal: npx skills add channel3-ai/skills --skill channel3-api. See Channel3 API skill. (Terminal
agents only — not the Lovable chat box.)
Was this page helpful?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
