Nextra Integration

Enhance your Nextra documentation with Ask0's AI search. Add intelligent chat assistance to Nextra sites built with Next.js.

Add Ask0 to your Nextra documentation site built with Next.js.

Installation

Add to _app.tsx

pages/_app.tsx

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://assets.ask0.ai/scripts/ask.js"
        strategy="afterInteractive"
        data-project-id={process.env.NEXT_PUBLIC_ASK0_PROJECT_ID}
        data-position="bottom-right"
        data-theme="auto"
      />
    </>
  );
}

Theme Configuration

Sync with Nextra theme:

theme.config.tsx

import { useConfig } from 'nextra-theme-docs';
import { useEffect } from 'react';

export default {
  // ... other config

  footer: {
    component: () => {
      useEffect(() => {
        // Sync Ask0 with theme
        const theme = document.documentElement.getAttribute('data-theme');
        if (window.ask0) {
          window.ask0.setTheme(theme);
        }
      }, []);

      return <footer>Your Footer</footer>;
    }
  }
}

Custom Component

components/Ask0Widget.tsx

'use client';

import { useEffect } from 'react';
import { useTheme } from 'next-themes';

export function Ask0Widget() {
  const { theme } = useTheme();

  useEffect(() => {
    if (window.ask0) {
      window.ask0.setTheme(theme === 'dark' ? 'dark' : 'light');
    }
  }, [theme]);

  return null;
}

Environment Variables

.env.local

NEXT_PUBLIC_ASK0_PROJECT_ID=your_project_id

Nextra Tips:

Use Next.js Script component with afterInteractive
Sync theme with Nextra's theme system
Add to _app.tsx for site-wide availability
Position widget to avoid TOC conflicts