Vanilla JavaScript

Using Produck SDK without React or any framework.

Installation

npm install @produck/sdk

Or use a CDN:

<script type="module">
  import { createProduck } from 'https://cdn.jsdelivr.net/npm/@produck/sdk@latest/+esm';
</script>

Quick Start

import { createProduck } from '@produck/sdk';
 
// Create SDK instance
const produck = createProduck({
  sdkKey: 'your-sdk-key',
  apiUrl: 'https://api.produck.io/api/v1', // optional
});
 
// Initialize
await produck.init();
 
// Register action
produck.register('open-contact', (payload) => {
  document.getElementById('contact-modal').classList.add('open');
});
 
// Send messages
const response = await produck.sendMessage('I need help');
console.log(response.content);

API Reference

createProduck()

Factory function to create a new SDK instance.

const produck = createProduck(config);

Parameters:

interface ProduckConfig {
  sdkKey: string;          // Your SDK project key (required)
  apiUrl?: string;         // API endpoint (optional)
  onAction?: (key: string, payload: ActionPayload) => void;
  onMessage?: (message: ChatMessage) => void;
  onError?: (error: Error) => void;
}

Returns: ProduckSDK instance

init()

Initialize the SDK and create a session.

await produck.init();

Returns: Promise<void>

Example:

try {
  await produck.init();
  console.log('SDK ready!');
} catch (error) {
  console.error('Failed to initialize:', error);
}

register()

produck.register(actionKey, handler);

Parameters:

actionKey (string): The operation ID
handler (function): Function to call when action triggers

Example:

produck.register('show-pricing', (payload) => {
  const section = document.getElementById('pricing');
  section.scrollIntoView({ behavior: 'smooth' });
  section.classList.add('highlight');
});

unregister()

Remove an action handler.

produck.unregister(actionKey);

Example:

produck.unregister('show-pricing');

sendMessage()

Send a user message and get AI response.

const response = await produck.sendMessage(message);

Parameters:

message (string): The user's message

Returns: Promise<ChatMessage>

Example:

const response = await produck.sendMessage('Show me the pricing');
console.log(response.content);
// If action was triggered:
if (response.action) {
  console.log('Triggered:', response.action.name);
}

on()

Listen to SDK events.

produck.on(eventType, handler);

Events:

ready - SDK initialized
action - Action triggered
message - New message
error - Error occurred

Example:

produck.on('ready', () => {
  console.log('SDK is ready');
});
 
produck.on('action', (payload) => {
  console.log('Action:', payload.actionKey);
});
 
produck.on('error', (error) => {
  console.error('Error:', error);
});

off()

Remove event listener.

produck.off(eventType, handler);

Example:

const handler = () => console.log('Ready!');
produck.on('ready', handler);
// Later:
produck.off('ready', handler);

getSessionToken()

Get the current session token.

const token = produck.getSessionToken();

Returns: string | null

destroy()

Clean up SDK resources.

produck.destroy();

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Produck SDK Example</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
    }
    
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      z-index: 1000;
    }
    
    .modal.open {
      display: block;
    }
    
    .overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 999;
    }
    
    .overlay.open {
      display: block;
    }
    
    .highlight {
      outline: 3px solid #f97316;
      outline-offset: 4px;
      animation: pulse 1s ease-in-out infinite;
    }
    
    @keyframes pulse {
      0%, 100% { outline-color: #f97316; }
      50% { outline-color: #fb923c; }
    }
    
    #chat-container {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 20px;
      margin-top: 30px;
    }
    
    #messages {
      height: 300px;
      overflow-y: auto;
      margin-bottom: 15px;
      padding: 10px;
      background: #f9fafb;
      border-radius: 4px;
    }
    
    .message {
      margin-bottom: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      max-width: 80%;
    }
    
    .message.user {
      background: #3b82f6;
      color: white;
      margin-left: auto;
    }
    
    .message.assistant {
      background: #e5e7eb;
    }
    
    #chat-input {
      display: flex;
      gap: 10px;
    }
    
    input {
      flex: 1;
      padding: 10px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
    }
    
    button {
      padding: 10px 20px;
      background: #f97316;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    button:hover {
      background: #ea580c;
    }
  </style>
</head>
<body>
  <h1>Produck SDK Demo</h1>
  <p>Try asking: "Show me pricing", "Contact support", or "Open the form"</p>
 
  <section id="features">
    <h2>Features</h2>
    <ul>
      <li>AI-powered interactions</li>
      <li>Natural language control</li>
      <li>Easy integration</li>
    </ul>
  </section>
 
  <section id="pricing">
    <h2>Pricing</h2>
    <p>$99/month - Includes everything</p>
  </section>
 
  <!-- Chat Interface -->
  <div id="chat-container">
    <h3>Chat Assistant</h3>
    <div id="messages"></div>
    <div id="chat-input">
      <input
        type="text"
        id="message-input"
        placeholder="Ask something..."
      />
      <button onclick="sendMessage()">Send</button>
    </div>
  </div>
 
  <!-- Contact Modal -->
  <div class="overlay" id="overlay"></div>
  <div class="modal" id="contact-modal">
    <h2>Contact Us</h2>
    <form>
      <p><input type="text" placeholder="Name" style="width: 100%; margin-bottom: 10px;"></p>
      <p><input type="email" placeholder="Email" style="width: 100%; margin-bottom: 10px;"></p>
      <p><textarea placeholder="Message" style="width: 100%; margin-bottom: 10px;" rows="4"></textarea></p>
      <button type="button" onclick="closeModal()">Close</button>
      <button type="submit">Send</button>
    </form>
  </div>
 
  <script type="module">
    import { createProduck } from 'https://cdn.skypack.dev/@produck/sdk';
 
    // Create SDK instance
    const produck = createProduck({
      sdkKey: 'your-sdk-key-here',
      onAction: (key, payload) => {
        console.log('Action triggered:', key);
      },
      onError: (error) => {
        console.error('SDK Error:', error);
      }
    });
 
    // Initialize
    await produck.init();
    console.log('✅ SDK initialized');
 
    // Register actions
    produck.register('show-pricing', (payload) => {
      const pricing = document.getElementById('pricing');
      pricing.scrollIntoView({ behavior: 'smooth', block: 'center' });
      pricing.classList.add('highlight');
      setTimeout(() => pricing.classList.remove('highlight'), 3000);
    });
 
    produck.register('open-contact', (payload) => {
      document.getElementById('contact-modal').classList.add('open');
      document.getElementById('overlay').classList.add('open');
    });
 
    produck.register('show-features', (payload) => {
      const features = document.getElementById('features');
      features.scrollIntoView({ behavior: 'smooth', block: 'center' });
      features.classList.add('highlight');
      setTimeout(() => features.classList.remove('highlight'), 3000);
    });
 
    // Chat functions
    window.sendMessage = async function() {
      const input = document.getElementById('message-input');
      const message = input.value.trim();
      if (!message) return;
 
      // Add user message to UI
      addMessage('user', message);
      input.value = '';
 
      try {
        // Send to SDK
        const response = await produck.sendMessage(message);
        
        // Add response to UI
        addMessage('assistant', response.content);
      } catch (error) {
        addMessage('assistant', 'Sorry, something went wrong.');
        console.error(error);
      }
    };
 
    function addMessage(role, content) {
      const messagesDiv = document.getElementById('messages');
      const messageDiv = document.createElement('div');
      messageDiv.className = `message ${role}`;
      messageDiv.textContent = content;
      messagesDiv.appendChild(messageDiv);
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }
 
    window.closeModal = function() {
      document.getElementById('contact-modal').classList.remove('open');
      document.getElementById('overlay').classList.remove('open');
    };
 
    // Allow Enter key to send message
    document.getElementById('message-input').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });
 
    // Close modal on overlay click
    document.getElementById('overlay').addEventListener('click', closeModal);
  </script>
</body>
</html>

ES Modules

// main.js
import { createProduck } from '@produck/sdk';
 
const produck = createProduck({
  sdkKey: import.meta.env.VITE_SDK_KEY
});
 
await produck.init();
 
// Export for use in other modules
export { produck };

// actions.js
import { produck } from './main.js';
 
export function setupActions() {
  produck.register('action-1', handler1);
  produck.register('action-2', handler2);
}

CommonJS

const { createProduck } = require('@produck/sdk');
 
const produck = createProduck({
  sdkKey: process.env.SDK_KEY
});
 
(async () => {
  await produck.init();
  
  produck.register('my-action', (payload) => {
    // Handle action
  });
})();
 
module.exports = { produck };

With Build Tools

Webpack

import { createProduck } from '@produck/sdk';
 
const produck = createProduck({
  sdkKey: process.env.SDK_KEY
});
 
export default produck;

Vite

import { createProduck } from '@produck/sdk';
 
const produck = createProduck({
  sdkKey: import.meta.env.VITE_SDK_KEY
});
 
export { produck };

Rollup

import { createProduck } from '@produck/sdk';
 
const produck = createProduck({
  sdkKey: __SDK_KEY__ // Replaced by rollup-plugin-replace
});
 
export default produck;

TypeScript

Full TypeScript support is included:

import { createProduck, type ProduckSDK, type ActionPayload } from '@produck/sdk';
 
const produck: ProduckSDK = createProduck({
  sdkKey: process.env.SDK_KEY!,
  onAction: (key: string, payload: ActionPayload) => {
    console.log('Action:', key);
  }
});
 
await produck.init();
 
produck.register('my-action', (payload: ActionPayload) => {
  // Fully typed payload
  console.log(payload.actionKey);
});

Next Steps

React Integration API Reference