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.
  7. Specify a URL for where this integration will be used.
  8. For production API keys, leave Enforce referrer URL checked.
  9. Click on Create
  10. 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

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