Yoink

• 

• 

• 

• 

• 

Yoink

Inspiration

Online shopping still requires users to translate a simple need into dozens of searches, filters, product pages, and price comparisons. A request such as "Find me noise-cancelling headphones under S$150" can quickly turn into multiple tabs, conflicting specifications, and uncertain availability.

We imagined a different experience: What if users could simply describe what they need, receive a transparent recommendation based on real merchant data, and complete the purchase in the same conversation?

That idea became Yoink - an agentic commerce platform designed to help users find and securely purchase the right product with minimal friction. The name reflects the experience we wanted to create: once Yoink understands what you need, the best available option is only one confirmation away.

What it does

Yoink turns natural-language requests into safe, transaction-ready purchases across multiple merchants.

A user can describe what they are looking for, including requirements such as budget, specifications, quantity, and delivery deadline. Yoink then:

1. Extracts the user's purchasing intent.
2. Asks a focused clarifying question when important information is missing.
3. Searches participating merchants for matching products.
4. Check real-time inventory, pricing, and availability.
5. Removes offers that violate hard requirements such as budget or required features.
6. Compares the remaining offers and explains its recommendation.
7. Presents the exact merchant, product, price, and fulfilment details.
8. Creates the order and processes payment only after explicit user confirmation.

Yoink also includes a merchant workspace where businesses can manage products, variants, inventory, and private pricing rules. Merchants can upload existing catalogues through CSV files, review automatically suggested column mappings, and reuse those mappings for future imports.

How we built it

We built Yoink as a TypeScript monorepo with clear boundaries between the consumer experience, merchant tools, commerce services, and AI agent.

The consumer and merchant interfaces were built with Next.js, React, and Tailwind CSS. The backend uses Fastify, while PostgreSQL, Prisma, and Zod provide persistence, schema validation, and shared type-safe contracts.

The conversational agent uses the OpenAI Responses API. Instead of allowing the model to access the database directly, we built a dedicated Model Context Protocol (MCP) server that exposes seven controlled commerce capabilities:

• Product search
• Product detail retrieval
• Inventory checking
• Offer generation
• Order creation
• Payment initiation
• Payment-status retrieval

We used a hybrid decision architecture. The language model handles ambiguous language, clarification, and product comparison, while deterministic code enforces non-negotiable constraints such as price, availability, required features, and deadlines.

For checkout, we implemented a safe mock Visa payment flow using saved payment-method identifiers. Payment credentials and private merchant pricing policies remain inside the trusted commerce backend and are never exposed to the agent.

Challenges we ran into

One of our biggest challenges was balancing the flexibility of an AI agent with the predictability required for commerce. A model can provide useful reasoning, but it should never decide whether an over-budget or unavailable product is acceptable. We solved this by independently applying deterministic filters to every returned offer before a recommendation can reach the user.

Designing a catalogue that worked across very different product categories was another major challenge. Shoes require sizes, smartphones require storage capacities, services require durations, and bookings may require dates and time slots. Instead of building a rigid product table, we created hierarchical categories with versioned schemas and validated category-specific attributes.

Payments introduced additional complexity. We had to account for explicit user consent, stale offers, price changes, duplicate requests, concurrent payment attempts, and failed authorizations. We treated checkout as a state machine and added idempotency safeguards so that retrying a request cannot accidentally create duplicate orders or charges.

Finally, integrating independently developed frontend, agent, MCP, and commerce components required stable contracts. Shared Zod schemas became our executable source of truth and allowed each part of the system to evolve without silently breaking the others.

Accomplishments that we're proud of

We are proud that Yoink is more than a conversational product search demo. It supports the complete journey from an ambiguous request to a confirmed order and payment result.

Our key accomplishments include:

• Building an end-to-end, multi-merchant conversational commerce flow.
• Combining LLM reasoning with deterministic enforcement of user constraints.
• Creating a secure MCP boundary between the AI agent and commerce infrastructure.
• Providing transparent comparisons instead of presenting an unexplained “best” result.
• Supporting explicit confirmation, expiring offers, price-change detection, and idempotent checkout.
• Protecting payment credentials and private merchant pricing rules from the agent.
• Building a flexible catalogue that supports physical products, services, and bookings.
• Creating a merchant dashboard with schema-generated forms, inventory management, private pricing controls, and reusable CSV imports.
• Sharing the same validated commerce logic across REST and MCP interfaces.

What we learned

We learned that trustworthy agentic commerce requires a deliberate separation between reasoning and authority. Language models are effective at understanding incomplete requests and comparing nuanced options, but transactional rules must remain in deterministic, testable code.

We also learned that MCP is a powerful way to give an agent useful capabilities without giving it unrestricted access to internal infrastructure. Carefully designed tools can expose exactly what the agent needs while protecting database credentials, payment information, and private business rules.

Most importantly, we learned that reducing friction should not mean removing control. The best experience is not one where an agent silently buys something—it is one where the user clearly understands what was selected, why it was selected, how much it costs, and exactly when the transaction will happen.

What's next for Yoink

Our next step is to connect Yoink to production merchant systems and real Visa payment infrastructure. We also plan to:

• Deploy the MCP service as a secure, publicly accessible endpoint.
• Integrate live merchant catalogues, inventory systems, and fulfilment providers.
• Expand support for additional retail, service, subscription, and booking categories.
• Add personalised recommendations based on consented preferences and purchase history.
• Introduce stronger identity verification, fraud detection, and payment recovery flows.
• Give merchants analytics on demand, conversions, pricing performance, and unmet customer needs.
• Extend the conversational experience to mobile and messaging platforms.

Our long-term vision is for Yoink to become a trusted commerce layer where users can move from intent to purchase through one transparent, secure conversation.

Built With

• next.js
• node.js
• react
• typescript
• visa