Astro Integration

Integrate Ask0's AI-powered search into your Astro website or documentation. Compatible with all Astro rendering modes including static, SSR, and hybrid builds.

Add Ask0 to your Astro website or documentation.

Installation

Add to Layout

src/layouts/Layout.astro

---
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <script
      src="https://assets.ask0.ai/scripts/ask.js"
      data-project-id={import.meta.env.PUBLIC_ASK0_PROJECT_ID}
      is:inline
    ></script>
  </body>
</html>

Client Component

src/components/Ask0.tsx

import { useEffect } from 'react';

export default function Ask0() {
  useEffect(() => {
    // Ask0 is already loaded via script tag
    console.log('Ask0 ready');
  }, []);

  return null;
}

Starlight Integration

For Astro Starlight docs:

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      customCss: ['./src/styles/custom.css'],
      head: [
        {
          tag: 'script',
          attrs: {
            src: 'https://assets.ask0.ai/scripts/ask.js',
            'data-project-id': process.env.PUBLIC_ASK0_PROJECT_ID,
          },
        },
      ],
    }),
  ],
});

Environment Variables

.env

PUBLIC_ASK0_PROJECT_ID=your_project_id

Astro Tips:

Use is:inline directive for external scripts
Prefix public env vars with PUBLIC_
Add to base layout for site-wide availability
Works with SSG, SSR, and hybrid modes