Add an Embedded AI Chat to your Gatsby app

const useInkeepSettings = () => {
  const baseSettings = {
    apiKey: process.env.INKEEP_API_KEY,
    integrationId: process.env.INKEEP_INTEGRATION_ID,
    organizationId: process.env.INKEEP_ORGANIZATION_ID,
    primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
  };
 
  const modalSettings = {
    // optional settings
  };
 
  const searchSettings = {
    // optional settings
  };
 
  const aiChatSettings = {
    // optional settings
    botAvatarSrcUrl: "/img/logo.svg", // use your own bot avatar
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  };
 
  return { baseSettings, aiChatSettings, searchSettings, modalSettings };
};
 
export default useInkeepSettings;

import type {
  InkeepAIChatSettings,
  InkeepSearchSettings,
  InkeepBaseSettings,
  InkeepModalSettings,
} from "@inkeep/uikit";
 
type InkeepSharedSettings = {
  baseSettings: InkeepBaseSettings;
  aiChatSettings: InkeepAIChatSettings;
  searchSettings: InkeepSearchSettings;
  modalSettings: InkeepModalSettings;
};
 
const useInkeepSettings = (): InkeepSharedSettings => {
  const baseSettings: InkeepBaseSettings = {
    apiKey: "INKEEP_API_KEY",
    integrationId: "INKEEP_INTEGRATION_ID",
    organizationId: "INKEEP_ORGANIZATION_ID",
    primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
  };
 
  const modalSettings: InkeepModalSettings = {
    // optional settings
  };
 
  const searchSettings: InkeepSearchSettings = {
    // optional settings
  };
 
  const aiChatSettings: InkeepAIChatSettings = {
    // optional settings
    botAvatarSrcUrl: "/img/logo.svg", // use your own bot avatar
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  };
 
  return { baseSettings, aiChatSettings, searchSettings, modalSettings };
};
 
export default useInkeepSettings;

import * as React from "react";
import { useEffect, useState } from "react";
import useInkeepSettings from "@/utils/useInkeepSettings";
 
export default function InkeepEmbeddedChat() {
  const [EmbeddedChat, setEmbeddedChat] = useState(null);
 
  const { baseSettings, aiChatSettings } = useInkeepSettings();
 
  // load the library asynchronously
  useEffect(() => {
    const loadEmbeddedChat = async () => {
      try {
        const { InkeepEmbeddedChat } = await import("@inkeep/uikit");
        setEmbeddedChat(() => InkeepEmbeddedChat);
      } catch (error) {
        console.error("Failed to load EmbeddedChat:", error);
      }
    };
 
    loadEmbeddedChat();
  }, []);
 
  const embeddedChatProps = {
    baseSettings,
    aiChatSettings,
  };
 
  return EmbeddedChat && <EmbeddedChat {...embeddedChatProps} />;
}

import * as React from "react";
import { useEffect, useState } from "react";
import useInkeepSettings from "@/utils/useInkeepSettings";
import type { InkeepChatButtonProps } from "@inkeep/uikit";
 
export default function InkeepEmbeddedChat() {
  const [EmbeddedChat, setEmbeddedChat] = useState(null);
 
  const { baseSettings, aiChatSettings } = useInkeepSettings();
 
  // load the library asynchronously
  useEffect(() => {
    const loadEmbeddedChat = async () => {
      try {
        const { InkeepEmbeddedChat } = await import("@inkeep/uikit");
        setEmbeddedChat(() => InkeepEmbeddedChat);
      } catch (error) {
        console.error("Failed to load EmbeddedChat:", error);
      }
    };
 
    loadEmbeddedChat();
  }, []);
 
  const embeddedChatProps = {
    baseSettings,
    aiChatSettings,
  };
 
  return EmbeddedChat && <EmbeddedChat {...embeddedChatProps} />;
}