Produck SDK

AI-powered UI interactions for your web applications. Let users control your interface through natural language.

What is Produck SDK?

Produck SDK enables you to create AI-controlled user interfaces where users can interact with your app through natural language. Instead of clicking buttons or filling forms, users can simply say what they want to do.

// User types: "Show me the pricing"
// Your app automatically scrolls to pricing section and highlights it
 
import { useProduckAction } from '@produck/sdk/react';
 
function PricingSection() {
  useProduckAction('show-pricing', () => {
    // This runs when AI detects user wants to see pricing
    scrollToPricing();
    highlightSection();
  });
  
  return <div>Your pricing content</div>;
}

Key Features

🤖 AI-Powered Intent Matching

Natural language understanding matches user messages to your defined operations automatically.

⚡ Zero UI Work

Drop-in chat widget included. No need to build chat interfaces from scratch.

🎯 Action-Based Architecture

🔒 Organization-Scoped

Built-in multi-tenancy with organization-level access control and SDK key authentication.

⚛️ React First

Hooks, components, and context API for seamless React integration.

📦 Framework Agnostic Core

Use with vanilla JS or extend for Vue, Angular, Svelte, and more.

Quick Example

import { ProduckProvider, ProduckChat, useProduckAction } from '@produck/sdk/react';
 
function App() {
  return (
    <ProduckProvider config={{ sdkKey: 'your-sdk-key' }}>
      <ContactForm />
      <ProduckChat position="bottom-right" />
    </ProduckProvider>
  );
}
 
function ContactForm() {
  const [isOpen, setIsOpen] = useState(false);
  
  // When user says "contact support" or "get in touch", this triggers
  useProduckAction('open-contact', () => {
    setIsOpen(true);
  });
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Contact Us</button>
      {isOpen && <ContactModal onClose={() => setIsOpen(false)} />}
    </>
  );
}

Use Cases

E-commerce: "Show me red shoes in size 10" → Filters products automatically
SaaS Dashboards: "Open my account settings" → Navigates to settings page
Documentation: "How do I reset my password?" → Shows relevant docs section
Customer Support: "I need help with billing" → Opens support ticket form
Onboarding: "What should I do first?" → Guides user through setup

How It Works

Define Operations - Configure operations (actions) in your Produck dashboard with natural language triggers
Register Handlers - Use useProduckAction() in your code to register JavaScript functions
AI Matches Intent - When users chat, AI analyzes their message and matches it to operations
Execute Actions - Your registered handlers run automatically when matched

Why Produck SDK?

Traditional UIs require users to learn where things are. With Produck SDK:

✅ Reduced friction - Users describe what they want instead of hunting for buttons
✅ Better accessibility - Natural language is more accessible than complex navigation
✅ Faster onboarding - New users can accomplish tasks without tutorials
✅ Improved support - AI can guide users directly to solutions
✅ Modern UX - Conversational interfaces are the future

Ready to Get Started?

Get Started →

Community & Support

Getting Started