agent-commerce-ui-sdk (AIShoppingSDK)

Embeddable AI chatbot widget SDK for any website — powered by Razorpay Agentic Commerce.

The widget injects a floating chat panel on the webpage. Users can ask product questions in natural language, get AI-powered recommendations with rich product cards, authorize checkout mandates via AP2 crypto keys, and pay seamlessly via Razorpay Checkout.js.

Quick Start

Option 1 — Script tag (UMD)

<script src="https://cdn.razorpay.com/agentic-commerce-ui/razorpay-chatbot.umd.cjs"></script>
<script>
  new AIShoppingSDK({
    agentUrl: "https://your-backend.com/api/agent",
    razorpayKeyId: "rzp_test_xxxxxxxxxxxx",
  });
</script>

Option 2 — npm / ESM

npm install agent-commerce-ui-sdk

import { AIShoppingSDK } from "agent-commerce-ui-sdk";

new AIShoppingSDK({
  agentUrl: "https://your-backend.com/api/agent",
  razorpayKeyId: "rzp_test_xxxxxxxxxxxx",
});

Configuration

new AIShoppingSDK({
  // Required
  agentUrl: "https://your-backend.com/api/agent",   // POST endpoint for agentic interactions

  // Razorpay Checkout Integration
  razorpayKeyId: "rzp_test_xxxxxxxxxxxx",          // Publishable Razorpay key for Checkout popup

  // Optional Endpoints & Customizations
  productUrl: "https://your-backend.com/api/products",
  checkoutUrl: "https://your-backend.com/api/checkout",

  position: "right",   // "right" | "left"  (default: "right")

  greeting: "Hi! How can I help you today?",

  branding: {
    name: "My Store Assistant",
    logo: "https://your-store.com/logo.png",
  },

  theme: {
    primaryColor: "#1a56db",   // any hex color
    darkMode: "auto",          // true | false | "auto"
  },

  authToken: "your-jwt-token",  // forwarded as Bearer token

  headers: {                    // extra headers on every request
    "X-Store-Id": "store_123",
  },
}, {
  // Optional event callbacks
  onOpen: () => console.log("Chat opened"),
  onClose: () => console.log("Chat closed"),
  onMessage: (msg) => console.log("New message", msg),
  onAddToCart: (product) => myCart.add(product),
  onCheckout: (product) => myCheckout.start(product),
});

Programmatic API

const chatbot = new RazorpayChatbot({ agentUrl: "..." });

chatbot.open();    // Open the chat panel
chatbot.close();   // Close the chat panel
chatbot.destroy(); // Remove widget from DOM

Agent Backend Contract

Your agentUrl endpoint must accept:

POST /api/agent
Content-Type: application/json

{
  "message": "Show me best headphones under 5000",
  "history": [
    { "role": "user", "content": "..." },
    { "role": "assistant", "content": "..." }
  ]
}

And respond with:

{
  "response": "Here are some great options for you:",
  "products": [
    {
      "id": "prod_123",
      "name": "Sony WH-CH520",
      "price": 3990,
      "currency": "INR",
      "image": "https://...",
      "rating": 4.3,
      "reviewCount": 8420,
      "url": "https://your-store.com/products/prod_123"
    }
  ]
}

The products array is optional. If omitted, only the text response is shown.

Development

cd agentic-commerce-ui

npm install
npm run dev      # Start Vite dev server with demo page
npm run build    # Build UMD + ESM bundles → dist/

Browser Support

Chrome 90+, Firefox 88+, Safari 14+, Edge 90+.

Zero dependencies. ~18 KB gzipped.