Getting Started

Get up and running with Produck SDK in less than 5 minutes.

Prerequisites

Node.js 16.x or higher
React 18.x or higher (for React integration)
A Produck account with an organization

Step 1: Create an SDK Project

Log in to your Produck Dashboard (opens in a new tab)
Navigate to SDK Projects in your organization.
Click "Create New Project"
Give your project a name (e.g., "My Website")
Copy your SDK Key - you'll need this!

Example SDK Key: sdk_proj_1a2b3c4d5e6f7g8h9i0j

Step 2: Install the SDK

Install the Produck SDK package in your project:

npm install @produck/sdk

Step 3: Add to Your App

For React Applications

Wrap your app with ProduckProvider and add the chat widget:

app/layout.tsx

import { ProduckProvider, ProduckChat } from '@produck/sdk/react';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ProduckProvider
          config={{
            sdkKey: process.env.NEXT_PUBLIC_SDK_KEY,
            apiUrl: 'https://api.produck.io/api/v1', // optional
          }}
        >
          {children}
          <ProduckChat position="bottom-right" />
        </ProduckProvider>
      </body>
    </html>
  );
}

Environment Variables

Create a .env.local file:

.env.local

NEXT_PUBLIC_SDK_KEY=sdk_proj_your_actual_key_here

Step 4: Create Your First Operation

Back in the Produck Dashboard:

Go to your SDK Project
Click "Add Operation"
Fill in the details:
- Operation ID: open-contact (used in code)
- Name: Open Contact Form
- Description: Opens the contact form modal when user wants to get in touch
- Trigger Phrases: Add phrases like:
  - "contact support"
  - "get in touch"
  - "talk to someone"
  - "need help"
Click Save

Step 5: Register an Action Handler

In your React component, register a handler for this operation:

components/ContactButton.tsx

import { useProduckAction } from '@produck/sdk/react';
 
function ContactButton() {
  const [isOpen, setIsOpen] = useState(false);
 
  useProduckAction('open-contact', () => {
    setIsOpen(true);
  });
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Contact Us
      </button>
      {isOpen && <ContactModal onClose={() => setIsOpen(false)} />}
    </>
  );
}

Step 6: Test It!

Start your development server
Open your app in a browser
Click the chat widget in the bottom-right
Type: "I need to contact support"
Watch as your contact modal opens automatically! 🎉

What Just Happened?

User sent a message through the chat widget
Produck AI analyzed the message
AI matched it to your open-contact operation
Your registered handler was called
Contact modal opened

Next Steps

Core Concepts React Integration API Reference Examples

Need Help?

Check the FAQ for common questions
Visit Troubleshooting if something isn't working
Join our Discord community (opens in a new tab)

Introduction Installation