E-commerce Example

Complete e-commerce store with products, orders, and customer management
Streaming
Products
Orders
Customers

Overview

This example shows how to integrate @brander/sdk into an e-commerce application with streaming for progressive UI loading. Users can query for products, view orders, manage customers, and get analytics dashboards.

Implementation (Streaming)

ecommerce-app.tsx
import Brander, { sseStream } from "@brander/sdk";

function EcommerceApp() {
  return (
    <Brander
      betaKey="bux_your_token"
      projectId="ecommerce-project"
      onQueryStream={(params) => sseStream("/api/agent", { params })}
      width="100%"
      height="800px"
    />
  );
}

Backend (LangGraph)

api/agent.py
from langgraph.prebuilt import create_react_agent
from langchain_anthropic import ChatAnthropic
from ag_ui_langgraph import AGUIAdapter
from fastapi import FastAPI
from fastapi.responses import StreamingResponse

app = FastAPI()
model = ChatAnthropic(model="claude-sonnet-4-20250514")

# Define e-commerce tools
tools = [
    get_products_tool,
    get_orders_tool,
    get_customers_tool,
    get_analytics_tool,
]

agent = create_react_agent(model, tools=tools)

@app.post("/api/agent")
async def agent_endpoint(request: dict):
    return StreamingResponse(
        AGUIAdapter.stream(agent, request),
        media_type="text/event-stream"
    )

Example Queries

Try these queries in your e-commerce widget:

  • "Show me all products with low stock"
  • "Display orders from the last 7 days"
  • "Show customer analytics dashboard"
  • "List top-selling products this month"
  • "Show refund requests that need attention"

Features Demonstrated

  • Product Management: Browse, filter, and search products
  • Order Tracking: View order status and history
  • Customer Data: Customer profiles and purchase history
  • Analytics: Sales reports and performance metrics
  • Streaming UI: Progressive loading for better UX