IntegrationsNextjs

Next 15

Using the uikit with Next 15 and React 19.

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

  1. Go to the Inkeep Dashboard
  2. Select your project under Projects
  3. Go to the Integrations tab
  4. Click on Create integration
  5. Select Web
  6. Provide a Name and URL (optional) for the integration
  7. Click on Create
  8. Click the Example < /> button to get your API key and view suggested settings

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

Example

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;
};

On this page