Next 15

The @inkeep/uikit package supports React 18, in order to use the Inkeep components with Next 15 and React 19 you can install the @inkeep/uikit-js package.

Get an API key

Go to the Inkeep Dashboard
Select your project under Projects
Go to the Integrations tab
Click on Create integration
Select Web
Provide a Name.
Specify a URL for where this integration will be used.
For production API keys, leave Enforce referrer URL checked.
Click on Create
Click the Example < /> button to get your API key and view suggested settings

For local or staging API keys, see here.

Copy and add the apiKey, integrationId and organizationId to your environment variables:

.env

NEXT_PUBLIC_INKEEP_API_KEY="INKEEP_API_KEY"
NEXT_PUBLIC_INKEEP_INTEGRATION_ID="INKEEP_INTEGRATION_ID"
NEXT_PUBLIC_INKEEP_ORGANIZATION_ID="INKEEP_ORGANIZATION_ID"

Install the component library

npm install @inkeep/uikit-js

bun add @inkeep/uikit-js

pnpm add @inkeep/uikit-js

yarn add @inkeep/uikit-js

To ensure the uikit is only loaded client side, you will need to import the library asynchronously within a useEffect hook. This example uses the Chat Button component but the same logic can be applied to any of the other components. See here for additional details on using the uikit-js package.

'use client';
 
import { useEffect, useRef } from "react";
 
const baseSettings = {
  integrationId: process.env.NEXT_PUBLIC_INKEEP_API_KEY,
  apiKey: process.env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID,
  organizationId: process.env.NEXT_PUBLIC_INKEEP_ORGANIZATION_ID,
  primaryBrandColor: "#000000",
};
 
 
export const ChatButton = () => {
  const chatButtonRef = useRef<any>(null);
 
  useEffect(() => {
    const loadInkeepJS = async () => {
      const inkeepJS = await import("@inkeep/uikit-js");
        const inkeep = inkeepJS.Inkeep(baseSettings);
        chatButtonRef.current = inkeep.embed({
          componentType: "ChatButton",
          properties: {
            chatButtonType: "PILL",
            baseSettings,
            aiChatSettings: {
              quickQuestions: ["How to get started?"],
            },
          },
        });
    };
    loadInkeepJS();
  }, []);
 
  return null;
};

Get an API key

Install the component library

Example

On this page