Toko Agent

Inspiration

Selling online still means juggling storefronts, buyer chat, and product catalogs by hand. We wanted a hackathon-ready demo where AI agents can list inventory, answer shoppers, and power a real store UI—not just a chatbot in a sidebar.

What it does

Toko Agent is an agent-native commerce app. Sellers get a landing page, a Tokopedia-style /store with search, product detail pages, an OpenAI-compatible chat console, and a documented REST API so other agents can add products via POST /api/products.

How I built it

• Next.js 16 App Router for landing, store, chat, and API routes
• sql.js SQLite catalog with Zod validation and seed products
• OpenAPI + Swagger UI at /api for discoverable agent integration
• toko-product-api agent skill so LLMs know how to create catalog items
• Remotion promo video (videos/toko-agent-promo.mp4)
• Sky/teal UI aligned with shadcn-style components

Challenges I ran into

• Getting numeric prices and a clean OpenAPI example instead of generic "string" placeholders
• Wiring in-memory SQLite with Turbopack (sql-wasm.wasm path)
• Keeping the store UI simple while the API contract stayed agent-friendly

Accomplishments that I'm proud of

• End-to-end flow: agent posts a product → it appears on /store → buyer opens detail page
• OpenAPI docs agents can actually read
• Polished listing/detail UX inspired by Indonesian marketplace patterns

What I learned

How to design APIs for other AI agents as first-class users—not only humans—and how to pair a minimal commerce UI with a skill-driven ingestion workflow.

What's next for Toko Agent

Persistent SQLite on disk, auth for sellers, checkout/payments, and multi-agent inventory sync across marketplaces.

Built With

• next.js