[{"data":1,"prerenderedAt":125},["ShallowReactive",2],{"work-shopify-shopping-agent":3},{"id":4,"title":5,"body":6,"category":84,"challenge":85,"codeSnippet":86,"description":90,"extension":91,"featured":92,"finalScreenshot":93,"gridOrder":94,"isDemo":92,"isDemoURL":77,"liveUrl":94,"meta":95,"mockupImage":96,"navigation":97,"nextProject":98,"order":101,"path":102,"results":94,"schneiderFeatured":97,"schneiderOrder":103,"seo":104,"solution":105,"stem":106,"subtitle":107,"tags":108,"techStack":114,"thumbnail":121,"thumbnailVideo":122,"year":123,"__hash__":124},"works/works/shopify-shopping-agent.md","Cart Whisperer",{"type":7,"value":8,"toc":76},"minimark",[9,14,18,22,29,35,41,47,51,57,63,69,73],[10,11,13],"h2",{"id":12},"the-problem","The Problem",[15,16,17],"p",{},"Traditional e-commerce search is keyword-based. A customer looking for \"something for my wife's birthday under $50 that ships fast\" has to mentally translate that into filter combinations and keyword searches. Faceted navigation helps but still requires customers to understand the catalog taxonomy. For stores with large catalogs, this friction leads to abandonment.",[10,19,21],{"id":20},"architecture","Architecture",[15,23,24,28],{},[25,26,27],"strong",{},"MCP Server"," — A TypeScript server exposing Shopify Storefront API operations as MCP tools: product search, collection browsing, variant selection, cart management, and store policies lookup. The AI agent calls these tools naturally during conversation.",[15,30,31,34],{},[25,32,33],{},"Agent Loop"," — Claude receives the customer's message along with conversation history and available MCP tools. It decides whether to search, ask clarifying questions, compare options, or proceed to cart. The agent maintains context about stated preferences across the conversation.",[15,36,37,40],{},[25,38,39],{},"Cart Builder"," — When the customer is ready, the agent uses the Cart Permalink API to generate a pre-filled checkout URL. This avoids the complexity of managing Storefront API cart mutations while still providing a seamless path to purchase.",[15,42,43,46],{},[25,44,45],{},"Frontend Widget"," — A lightweight React component that embeds on any Shopify storefront via a script tag. Handles the chat UI, message streaming, and cart link rendering.",[10,48,50],{"id":49},"key-technical-decisions","Key Technical Decisions",[15,52,53,56],{},[25,54,55],{},"Why MCP over function calling?"," MCP provides a standardized tool interface that's model-agnostic. If the underlying LLM changes, the tool definitions don't. MCP also enables the catalog tools to be reused in other AI contexts (merchant copilot, customer service bot).",[15,58,59,62],{},[25,60,61],{},"Why Cart Permalink over Storefront API carts?"," Cart permalinks are simpler and more reliable for the checkout handoff. They work across all Shopify themes without requiring any theme modifications. The tradeoff is less cart customization, but for the primary use case of \"find products and buy them,\" permalinks are sufficient.",[15,64,65,68],{},[25,66,67],{},"Why streaming over batch responses?"," Shopping conversations need to feel interactive. Streaming Claude's responses token-by-token keeps the experience feeling natural, especially when the agent is thinking through product comparisons.",[10,70,72],{"id":71},"outcome","Outcome",[15,74,75],{},"The shopping agent handles an average of 4 tool calls per conversation, with customers reaching a cart-ready state in under 2 minutes. Product discovery success rate (customer adds recommended item to cart) is 68%, compared to 23% for traditional site search on the same catalog.",{"title":77,"searchDepth":78,"depth":78,"links":79},"",2,[80,81,82,83],{"id":12,"depth":78,"text":13},{"id":20,"depth":78,"text":21},{"id":49,"depth":78,"text":50},{"id":71,"depth":78,"text":72},"AI Agent","Product discovery on Shopify stores relies on traditional search and filter UIs that break down when customers don't know exact product names or when catalogs exceed hundreds of products. Customers abandon stores when they can't quickly find what matches their needs.",{"language":87,"filename":88,"code":89},"typescript","mcp/tools/search-products.ts","export const searchProducts = defineMcpTool({\n  name: 'search_products',\n  description: 'Search the Shopify catalog by query, filters, and price range',\n  parameters: z.object({\n    query: z.string(),\n    productType: z.string().optional(),\n    minPrice: z.number().optional(),\n    maxPrice: z.number().optional(),\n    sortBy: z.enum(['RELEVANCE', 'PRICE', 'BEST_SELLING']).optional(),\n  }),\n  execute: async ({ query, productType, minPrice, maxPrice, sortBy }) => {\n    const filters: string[] = []\n    if (productType) filters.push(`product_type:${productType}`)\n    if (minPrice) filters.push(`variants.price:>=${minPrice}`)\n    if (maxPrice) filters.push(`variants.price:\u003C=${maxPrice}`)\n\n    const { products } = await storefront.query(SEARCH_QUERY, {\n      variables: {\n        query: [query, ...filters].join(' '),\n        sortKey: sortBy ?? 'RELEVANCE',\n        first: 10,\n      },\n    })\n\n    return products.nodes.map(formatProductForAgent)\n  },\n})\n","A conversational AI shopping assistant that browses Shopify catalogs via MCP, understands customer intent, and builds carts — turning natural language into checkout-ready orders.","md",false,"/images/projects/shopify-shopping-agent-final.jpg",null,{},"/images/projects/shopify-shopping-agent-mockup.jpg",true,{"title":99,"slug":100},"Headless Kit","shopify-storefront-kit",1,"/works/shopify-shopping-agent",4,{"title":5,"description":90},"Built a conversational agent using Claude with Model Context Protocol (MCP) tools that gives the AI direct access to a Shopify store's catalog. Customers describe what they want in natural language, and the agent searches, compares, recommends, and adds items to cart.","works/shopify-shopping-agent","Conversational Commerce for Shopify",[109,110,111,112,113],"AI","MCP","Claude","Storefront API","Conversational Commerce",[115,27,116,117,118,119,120],"Claude API","Shopify Storefront API","Cart Permalink API","TypeScript","React","Vercel","/images/projects/shopify-shopping-agent.jpg","/videos/shopify-shopping-agent.mp4","2026","-r79H9DNgga7v8_Uw2OnmoS4rSzco0OsNvU71QfDVvQ",1773700381165]