Add AI Chat to your Astro app

​

What is Astro

Astro is an all-in-one web framework for content-driven websites. With Inkeep, you can Add AI Search & Chat to your landing page, app, blog, or documentation site powered by Astro.

​

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:

INKEEP_API_KEY="INKEEP_API_KEY"
INKEEP_INTEGRATION_ID="INKEEP_INTEGRATION_ID"
INKEEP_ORGANIZATION_ID="INKEEP_ORGANIZATION_ID"

​

Install the component library

• npm
• bun
• pnpm
• yarn

npm install @inkeep/uikit

​

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.

​

Define the component

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

​

Use the component

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

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

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