CartMate is a framework-agnostic, AI-powered shopping assistant widget that can be dropped into any e-commerce website (WordPress, Shopify, React, Vue, HTML). It helps users find products, get recommendations, and manage their cart through a natural chat interface.
<cart-mate>). Works everywhere.Add this to your HTML <body> or footer:
<!-- 1. Load the Widget -->
<script src="https://unpkg.com/@cartmate/widget@latest/dist/cartmate.umd.cjs"></script>
<!-- 2. Configure & Place -->
<script>
window.__CARTMATE_CONFIG__ = {
apiKey: "YOUR_API_KEY",
greeting: "Hi! I'm your store assistant. 🛍️",
endpoints: {
search: "https://your-store.com/api/search",
addToCart: "https://your-store.com/api/cart",
recommendations: "https://your-store.com/api/recommendations",
},
theme: {
primaryColor: "#6200ea",
},
};
</script>
<cart-mate></cart-mate>
npm install @cartmate/widget
In your app entry point (e.g., main.js or App.jsx):
import "@cartmate/widget/dist/cartmate.js";
// The <cart-mate> element is now registered and ready to use!
The window.__CARTMATE_CONFIG__ object controls everything.
| Option | Type | Description |
|---|---|---|
endpoints | Object | Required. Links to your backend APIs. |
endpoints.search | String | URL for product search (POST request). |
endpoints.addToCart | String | URL to add items to cart (POST). |
endpoints.recommendations | String | URL for AI recommendations (POST). |
theme | Object | Custom colors and positioning. |
theme.primaryColor | String | Main brand color (hex code). |
theme.position | String | "bottom-right" (default) or "bottom-left". |
greeting | String | Initial message shown to users. |
quickActions | Array | Quick suggestion buttons (e.g., "On Sale", "New"). |
Your endpoints should accept JSON and return results in a standard format. See Integration Guide for full API specs.
Want to modify the widget source code?
Clone & Install:
git clone https://github.com/your-repo/cartmate.git
cd cartmate
npm install
Run Dev Server:
npm run dev
Opens a demo page at http://localhost:5173.
Build for Production:
npm run build
Creates optimized files in dist/.
Simulate Production: A convenient simulation page exists to test the built widget against the local API:
simulation/index.html in your browser.npm run dev is running (to serve the API).FAQs
Framework-agnostic conversational shopping assistant
We found that cartmate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.