Getting Started

Getting Started

Get Produck SDK up and running in 5 minutes. This guide covers account setup, installation, and your first AI-powered integration.

Prerequisites

What You'll Build

By the end of this guide you'll have:

  • ✅ A working AI chat widget on your site
  • ✅ A knowledge base teaching the AI about your product
  • ✅ Understanding of how to add API actions and DOM context

Step 1: Create Your SDK Project

1.1 Sign Up / Log In

  1. Go to Produck Dashboard (opens in a new tab)
  2. Sign up with your email or log in
  3. Verify your email

1.2 Create an Organization

  1. Enter your Organization Name (e.g., "Acme Corp")
  2. Choose a subdomain
  3. Click Create Organization

1.3 Create an SDK Project

  1. Click SDK Projects in the sidebar
  2. Click "+ New SDK Project"
  3. Enter a project name and click Create

1.4 Copy Your SDK Key

Copy the SDK key — it looks like:

pk_live_1768387697_vVnwFeC6cmHuUMel

Step 2: Install the SDK

For React / Next.js

npm install @prodact.ai/sdk

For WordPress

See the WordPress Installation Guide.

For Vanilla JavaScript

See Vanilla JS Guide.

Step 3: Add the Provider and Chat Widget

React / Next.js

app/layout.tsx
import { ProduckProvider, ProduckChat } from '@prodact.ai/sdk/react'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ProduckProvider sdkKey={process.env.NEXT_PUBLIC_SDK_KEY}>
          {children}
          <ProduckChat position="bottom-right" />
        </ProduckProvider>
      </body>
    </html>
  )
}

Vanilla JavaScript / CDN

<script src="https://cdn.prodact.ai/sdk.js"></script>
<script>
  Produck.init({ sdkKey: 'pk_live_...' })
</script>

At this point, you have a working chat widget! But the AI doesn't know about your product yet.

Step 4: Add Knowledge Base Sources

Go to the Produck Dashboard (opens in a new tab):

  1. Select your SDK project
  2. Click the Knowledge Base tab
  3. Click "Add Source"
  4. Choose a source type:
    • Website URL — crawls and indexes a page
    • Sitemap — crawls all pages in a sitemap
    • Document — upload PDF, DOCX, or TXT
    • Raw Text — paste content directly

Tip: Start with your pricing page, FAQ, and main product pages.

The AI will now answer questions using your actual content.

Step 5: (Optional) Add API Schema

If you want the AI to execute API calls on behalf of users:

app/layout.tsx
<ProduckProvider
  sdkKey={process.env.NEXT_PUBLIC_SDK_KEY}
  apiSchema="/api/openapi.json"
  apiAuth={{ type: 'cookie' }}
  allowedEndpoints={[
    'GET /api/users/*',
    'POST /api/orders',
  ]}
>
  <ProduckChat />
</ProduckProvider>

See API Schema for full documentation.

Step 6: (Optional) Enable DOM Context

Let the AI read the current page when users ask about it:

<ProduckProvider
  sdkKey={process.env.NEXT_PUBLIC_SDK_KEY}
  domContext={{
    enabled: true,
    selectors: ['main'],
    exclude: ['.private-data'],
  }}
>
  <ProduckChat />
</ProduckProvider>

See DOM Context for full documentation.

Full Example

Here's everything together:

app/layout.tsx
import { ProduckProvider, ProduckChat } from '@prodact.ai/sdk/react'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ProduckProvider
          sdkKey={process.env.NEXT_PUBLIC_SDK_KEY}
          apiSchema="/api/openapi.json"
          apiAuth={{ type: 'cookie' }}
          allowedEndpoints={[
            'GET /api/users/*',
            'POST /api/orders',
          ]}
          domContext={{
            enabled: true,
            selectors: ['main'],
          }}
        >
          {children}
          <ProduckChat position="bottom-right" />
        </ProduckProvider>
      </body>
    </html>
  )
}

What's Next?

IntroductionQuick Reference