Agent-First Commerce: I Built a Website That Sells Like a Sales Team
Over a weekend, I built and tested a working Agent-First e-commerce demo with Claude Code, MCP, and conversational checkout. Here's what I learned.
🛒 Introduction
Not selling anything here — just sharing what I built over a weekend using Claude Code, the Model Context Protocol (MCP), and Agent-to-Agent (A2A) orchestration.
The idea was simple: > Could a website behave like a full sales team — not just a storefront, but a conversation-led experience where agents guide, pitch, and close?
So I prototyped it.
It works. You can test it live right now at fabiangwilliams.com
🧠 What Is Agent-First Commerce?
Traditional e-commerce relies on catalogs, carts, and checkouts.
Agent-First Commerce introduces a conversational pipeline where AI agents assume roles:
- A Greeter Agent welcomes and routes the user
- A Sales Agent explains the product and handles objections
- A Checkout Agent sends a secure Stripe link to your inbox
Everything is driven by structured conversation.
🖼️ Walkthrough: What the Agent Experience Looks Like
1. Welcome to the Agent-First Store
You’re greeted by a clean call to action — powered by AI agents.
2. Start a Conversation
Say hello or click a button — and you’re instantly chatting with a Greeter Agent.
3. Product Discovery in Chat
The Sales Agent presents offerings like a live rep might do in-store.
4. Pitch the Product
When you pick something (like a latte), the Agent explains what it is and asks for a decision.
5. Confirm Purchase in Chat
The Sales Agent offers to process your order via secure email checkout — no cart needed.
6. Email Checkout via Stripe
You receive a branded email with a Stripe link — no payment inside the chat itself.
7. Checkout Using Stripe Test Mode
Try it yourself using Stripe’s test card numbers.
8. Confirmation & Fulfillment
You’re thanked, confirmed, and shown what happens next.
🛠️ Tech Stack
This was built using: - Frontend: Next.js + Stripe Elements - AI Orchestration: Semantic Kernel + MCP server - LLM Pairing: Claude Code + GitHub Copilot - A2A Agent Flow: Greeter → Sales → Checkout (via MCP tool chaining) - Checkout: Stripe (Test mode)
All logic was coordinated via local Semantic Kernel plugins and MCP tool endpoints using HTTP-based coordination between agents.
💡 Key Learnings
- Agent-to-Agent flows feel surprisingly natural to users.
- No-cart, chat-based checkout reduces friction and bounce rates.
- Stripe’s hosted email link checkout increases security and trust.
- Claude Code is excellent for quick prototyping and planning across LLM chains.
🔗 Try It Yourself
🧪 Live Demo – fabiangwilliams.com
💬 Works best if you “buy me a latte” — it’s a full test flow from chat to email to checkout.
🔐 Stripe is in test mode — no real charges are made.
📬 Final Thoughts
This is early work, but it proves a point:
> Websites don’t have to be static pages — they can act like a sales team.
As agent architecture, orchestration protocols like MCP, and LLMs mature, I believe we’re entering a new era of agent-forward web design — one driven by structured dialogue, instant utility, and seamless integration.
I’m continuing to iterate on this. Feel free to reach out if you’re working in this space.
Connect With Me
| Platform | Link |
|---|---|
| Fabian G. Williams | |
| BlueSky | @fabianwilliams |
| fabian@adotob.com |
