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:

.env
INKEEP_API_KEY="INKEEP_API_KEY"
INKEEP_INTEGRATION_ID="INKEEP_INTEGRATION_ID"
INKEEP_ORGANIZATION_ID="INKEEP_ORGANIZATION_ID"

Install the component library

npm install @inkeep/uikit

Define React components

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

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 InkeepSearchBar.tsx file for the Search Bar component.

Use the component

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

// ...
<InkeepSearchBar client:load />
// ...

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

For a full list of customizations, check out the Search Bar documentation.