Add Search Bar to Astro
Integrate Inkeep's search bar into your Astro site for powerful content discovery.
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
Follow these steps to create an API key for your web integration.
Copy and add the apiKey
to your environment variables:
Install the component library
Define React components
Install the @astrojs/react package to use React components:
Customize your settings
Define your Inkeep settings.
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.
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.