@jutech-devs/agent-sdk
Advanced tools
Modern embeddable AI agent chat widget with voice support and payment integration
Enterprise AI Agent Widget with E-commerce Integration
A powerful, embeddable AI agent widget that handles customer support, product sales, order processing, and payment collection. Perfect for businesses looking to automate customer interactions and boost conversions.
npm install @jutech-devs/agent-sdk
import { AgentWidget } from '@jutech-devs/agent-sdk'
function App() {
return (
<div>
<h1>My Website</h1>
<AgentWidget
apiKey="sk_your_api_key_here"
agentId="your_agent_id"
baseUrl="https://your-api-server.com"
primaryColor="#6366f1"
position="bottom-right"
/>
</div>
)
}
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@jutech-devs/agent-sdk/dist/index.umd.js"></script>
</head>
<body>
<div id="chat-widget"></div>
<script>
const { AgentWidget } = window.AgentSDK
ReactDOM.render(
React.createElement(AgentWidget, {
apiKey: 'sk_your_api_key_here',
agentId: 'your_agent_id',
baseUrl: 'https://your-api-server.com',
primaryColor: '#6366f1'
}),
document.getElementById('chat-widget')
)
</script>
</body>
</html>
| Prop | Type | Default | Description |
|---|---|---|---|
apiKey | string | required | Your project API key |
agentId | string | required | ID of the agent to chat with |
baseUrl | string | http://localhost:3001 | Your API server URL |
user | object | undefined | User info: {id, name, email} |
onUserUpdate | function | undefined | Callback when user info changes |
theme | 'light' | 'dark' | 'auto' | 'light' | Widget theme |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Widget position |
primaryColor | string | '#6366f1' | Primary brand color |
title | string | 'AI Assistant' | Widget header title |
subtitle | string | 'How can I help you today?' | Widget subtitle |
placeholder | string | 'Type your message...' | Input placeholder |
className | string | '' | Additional CSS classes |
Your AI agent can showcase products, handle inquiries, and guide customers through the purchase process:
// Agent automatically displays products and handles:
// - Product recommendations
// - Price inquiries
// - Feature comparisons
// - Stock availability
// - Add to cart functionality
Integrated Paystack payment system with:
Customers can track their orders directly through the chat:
The widget automatically handles user information persistence:
// Option 1: Provide user upfront (skips collection)
<AgentWidget
apiKey="sk_your_api_key"
agentId="your_agent_id"
user={{
id: 'user_123',
name: 'John Doe',
email: 'john@example.com'
}}
onUserUpdate={(user) => {
// Called when user info is collected or updated
console.log('User info updated:', user)
// Sync with your user management system
}}
/>
// Option 2: Let widget collect info (remembers for future visits)
<AgentWidget
apiKey="sk_your_api_key"
agentId="your_agent_id"
onUserUpdate={(user) => {
// Save to your database
saveUserToDatabase(user)
}}
/>
How it works:
agent_user_${agentId})<AgentWidget
apiKey="sk_your_api_key"
agentId="your_agent_id"
onUserUpdate={(user) => {
console.log('User updated:', user)
// Sync with your user system
updateUserProfile(user)
}}
onOrderComplete={(order) => {
console.log('Order completed:', order)
// Track conversion in analytics
analytics.track('order_completed', order)
}}
onPaymentSuccess={(payment) => {
console.log('Payment successful:', payment)
// Update user's purchase history
}}
/>
<AgentWidget
primaryColor="#your-brand-color"
theme="dark"
className="custom-widget-styles"
/>
.agent-widget {
--primary-color: #6366f1;
--text-color: #1f2937;
--background-color: #ffffff;
--border-radius: 12px;
}
.agent-widget.dark {
--text-color: #f9fafb;
--background-color: #1f2937;
}
The widget works with your backend API to provide:
# Clone the repository
git clone https://github.com/jutech-devs/agent-sdk
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run tests
npm test
Check out our example implementations:
MIT License - see LICENSE for details.
Built with ❤️ by Jutech Devs
FAQs
Modern embeddable AI agent chat widget with voice support and payment integration
We found that @jutech-devs/agent-sdk 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.
Research
/Security News
A long-running Go typosquat impersonated the popular shopspring/decimal library and used DNS TXT records to execute commands.
Research
Active npm supply chain attack compromises @antv packages in a fast-moving malicious publish wave tied to Mini Shai-Hulud.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.