The Universal Commerce Protocol wasn’t designed for product grids and “Add to Cart” buttons. It was built for a different future—one where you tell an AI what you need, and it handles the rest.
This guide shows you how to build that future today.
What We’re Building
A conversational shopping agent. Not a storefront.
The user says: “I need a gift for my mom, she likes gardening, around $40”
The agent searches products, reasons about what fits, shows options, and handles checkout—all through natural conversation. No browsing. No clicking through categories. Just a conversation that ends with a purchase.
This is how UCP is meant to be used. It’s what Google is building with AI Mode. It’s what Shopify is enabling for millions of merchants. And you can build it this weekend.
The Stack
Claude — The brain. Understands what users want, decides when to search, when to recommend, when to checkout.
NoCodeAPI — The commerce layer. Connects your Stripe catalog to UCP endpoints that Claude can call as tools.
Lovable — The interface. Generates the chat UI from a description, no frontend code required.
Stripe — The money. Handles payment processing and security.
How It Works
Traditional e-commerce:
User browses → User filters → User compares → User adds to cart → User checks out
Agentic commerce:
User describes need → Agent searches → Agent recommends → User confirms → Agent checks out
The UCP endpoints become tools that Claude can call:
| Tool | UCP Endpoint | When Claude Uses It |
|---|---|---|
| search_products | GET /ucp/products | User describes what they want |
| start_checkout | POST /ucp/checkout_start | User confirms purchase |
| confirm_payment | POST /ucp/checkout_confirm | User approves payment |
Claude decides when to use each tool based on the conversation. The human just talks naturally.
Step 1: Set Up Your UCP Endpoint
Before anything else, you need products accessible via UCP.
- Sign up at NoCodeAPI
- Connect your Stripe account (or use test mode)
- Create a Stripe API endpoint
- Note your base URL:
https://v1.nocodeapi.com/yourname/stripe/your_token
Test it works:
curl https://v1.nocodeapi.com/yourname/stripe/your_token/ucp/products
You should see your Stripe products in UCP format.
Step 2: Understand the Agent Pattern
The key insight: Claude doesn’t need a UI to shop. It needs tools.
When you give Claude access to functions (tools), it can decide when to call them based on conversation context. This is the foundation of agentic behavior.
// Claude receives this message:
"I'm looking for running shoes under $100"
// Claude's internal reasoning:
// User wants products. I should search.
// → Calls search_products tool with query "running shoes"
// Tool returns products. Claude reasons:
// I found 3 options in budget. I should present them conversationally.
// → Responds with product recommendations
// User says: "The second one looks good, I'll take it"
// Claude's internal reasoning:
// User confirmed purchase intent. Time to checkout.
// → Calls start_checkout tool
You don’t program this flow. You give Claude the tools and let it reason about when to use them.
Step 3: Create the Lovable App
Open Lovable and use the detailed prompt we’ve prepared. The key elements:
Chat interface, not product grid:
"Build a conversational AI shopping agent. Full-screen chat interface where users describe what they want and an AI finds products and handles checkout through conversation."
Claude integration with tools:
"When user sends a message, call Claude API with conversation history. Claude has tools: search_products, start_checkout. Handle tool calls by hitting the UCP endpoints."
Rich messages:
"Agent messages can include product cards and checkout summaries rendered inline in the conversation."
The full prompt handles:
- Message state and conversation flow
- Claude API calls with tool definitions
- UCP endpoint integration
- Product card and checkout summary components
- Payment flow with Stripe
- Mobile responsiveness
Step 4: Configure the Agent’s Personality
The system prompt shapes how your agent behaves. Here’s what works:
You are a helpful shopping assistant. You help users find and purchase products through natural conversation.
Guidelines:
- Be conversational and warm, not robotic
- Ask clarifying questions when requests are vague
- Show 2-3 options at a time, not overwhelming lists
- Explain why each product fits what they described
- Confirm before initiating checkout
- Keep responses concise
This creates an agent that feels like a knowledgeable friend, not a search engine.
Step 5: Wire Up the Tools
Each tool maps to a UCP endpoint:
search_products:
async function searchProducts(query) {
const response = await fetch(`${UCP_BASE_URL}/ucp/products`);
const data = await response.json();
// Filter based on query
return data.items.filter(item =>
item.title.toLowerCase().includes(query.toLowerCase()) ||
item.description?.toLowerCase().includes(query.toLowerCase())
).slice(0, 5);
}
start_checkout:
async function startCheckout(items) {
const response = await fetch(`${UCP_BASE_URL}/ucp/checkout_start`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
merchantId: MERCHANT_ID,
items: items // [{ priceId: "price_xxx", quantity: 1 }]
})
});
return await response.json();
// Returns: { checkoutId, summary: { total, currency }, paymentHandlers }
}
confirm_payment:
async function confirmPayment(checkoutId) {
const response = await fetch(`${UCP_BASE_URL}/ucp/checkout_confirm`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
checkoutId: checkoutId,
paymentHandler: "stripe"
})
});
return await response.json();
// Returns: { paymentSession: { clientSecret } }
}
The clientSecret goes to Stripe.js to complete payment.
The Conversation Flow
Here’s what a real interaction looks like:
User: “Hey, looking for a birthday gift”
Agent: “Happy to help! Who’s it for, and what are they into? Any budget in mind?”
User: “My sister, she’s really into cooking. Maybe $50ish?”
Agent: [calls search_products(“cooking”)]
“Found some great options for a cooking enthusiast:
[Chef’s Knife Set – $52] Professional-grade, stays sharp forever
[Herb Garden Kit – $38]
Grow fresh basil, cilantro, mint indoors
[Cooking Masterclass Subscription – $45] 3 months of video lessons from pro chefs
The knife set is a forever gift—serious cooks always need good knives. The herb kit is fun if she likes fresh ingredients. What resonates?”
User: “Ooh the herb garden is cute. She just moved into a new apartment.”
Agent: “Perfect timing then! Fresh herbs on her windowsill in her new place. It comes with everything—pots, soil, seeds, grow light. Want me to get this ordered?”
User: “Yeah let’s do it”
Agent: [calls start_checkout([{ priceId: “price_herb_kit”, quantity: 1 }])]
“Great choice! Here’s your order:
Herb Garden Kit — $38.00
Total: $38.00
Ready to complete checkout?”
[Confirm & Pay button]
User: [clicks, completes Stripe payment]
Agent: “Done! Order confirmed. She’s going to love having fresh herbs in her new kitchen. 🌿”
No product pages. No cart management. No checkout form. Just a conversation.
Why This Matters for NoCodeAPI
This demo shows what UCP is really for—and positions NoCodeAPI as the enabler.
Any Stripe merchant can now be:
- Discoverable by AI agents
- Part of conversational commerce
- Accessible through natural language
The merchant doesn’t build the agent. They just expose their catalog via NoCodeAPI. Agents—whether built with Lovable, deployed in Google AI Mode, or embedded in any AI assistant—can find and purchase from them.
NoCodeAPI becomes the bridge between every Stripe merchant and every AI agent.
Going Further
Once the basic agent works:
Add memory: “Remember my sister likes gardening” → Agent recalls this in future conversations
Add comparison: “Which one is better?” → Agent reasons about tradeoffs
Add voice: Speech input for hands-free shopping
Add proactive suggestions: “Based on what you bought last time…”
Multi-merchant: Query multiple UCP endpoints, find best option across stores
The Future Is Agentic
Google didn’t build UCP for better product pages. Shopify didn’t adopt it for nicer checkout buttons.
They built it because shopping is about to change fundamentally. Users will describe what they want. Agents will handle the rest.
The merchants who are accessible to agents will capture this demand. The ones who aren’t, won’t.
NoCodeAPI makes any Stripe merchant accessible—today.
Ready to build? Use our detailed Lovable prompt to generate your agent in minutes.
