What is Astro

Astro is an all-in-one web framework for content-driven websites. With Inkeep, you can add AI search and chat to your landing page, app, blog, or documentation site powered by Astro.

Install the component library

  • npm

  • bun

  • pnpm

  • yarn

npm install @inkeep/widgets

Define React components

Install the @astrojs/react package to use React components:

  • npm

  • bun

  • pnpm

  • yarn

npx astro add react

Customize your settings

First, create a useInkeepSettings.ts file that will contain a hook that returns configuration for our Inkeep component(s).

Below is an example with common customizations.

const useInkeepSettings = () => {
  const baseSettings = {
    apiKey: "YOUR_API_KEY",
    integrationId: "YOUR_INTEGRATION_ID",
    organizationId: "YOUR_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;

Define the component

Next, create an InkeepChatButton.tsx file for our Chat Button component.

import { useEffect, useState } from "react";
import useInkeepSettings from "../utils/useInkeepSettings";

export default function InkeepChatButton() {
  const [ChatButton, setChatButton] = useState(null);

  const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
    useInkeepSettings();

  // load the library asynchronously
  useEffect(() => {
    const loadChatButton = async () => {
      try {
        const { InkeepChatButton } = await import("@inkeep/widgets");
        setChatButton(() => InkeepChatButton);
      } catch (error) {
        console.error("Failed to load ChatButton:", error);
      }
    };

    loadChatButton();
  }, []);

  const chatButtonProps = {
    baseSettings,
    aiChatSettings,
    searchSettings,
    modalSettings,
  };

  return ChatButton && <ChatButton {...chatButtonProps} />;
}

Use the component

Now use the InkeepChatButton.tsx component in your Astro based website.

// ...
<InkeepChatButton client:load />
// ...

Use the client:load directive to load and hydrate the InkeepChatButton.tsx component immediately on page load.

For a full list of customizations, check out the Chat Button documentation.

FAQ