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 install @inkeep/widgets
Define React components
Install the @astrojs/react package to use React components:
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" ,
organizationDisplayName : "Inkeep" ,
} ;
const modalSettings = {
} ;
const searchSettings = {
} ;
const aiChatSettings = {
botAvatarSrcUrl : "/img/logo.svg" ,
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 the 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 ( ) ;
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
Will these scripts affect page load times?
The scripts are loaded asynchronously so they don't affect page performance.