DocSearch

DocSearch is Algolia’s free documentation-search product: a crawler indexes your docs into an Algolia index, and the DocSearch packages give you a polished, accessible search dropdown to put in front of it. The monorepo ships several install targets — @docsearch/js for a framework-agnostic script tag or bundler import, @docsearch/react as a first-class React component (<DocSearch />), and @docsearch/css providing the shared stylesheet both consume — plus internal docsearch-core, docsearch-modal, and docsearch-sidepanel packages that implement the shared search/modal/AI-sidepanel logic. @docsearch/react is the most widely adopted entry point, powering search in tools like VitePress, Docusaurus-based sites, and countless other React-based documentation frameworks.

Beyond basic full-text search, recent versions add an “Ask AI” side panel that turns the search box into a conversational assistant over the same indexed content, complete with conversation history and suggested follow-up questions. Getting started requires only Algolia application credentials (appId, apiKey, indexName) obtained by applying to the free DocSearch program (or bringing your own Algolia index), after which the component renders a fully accessible, keyboard-navigable search experience with zero additional styling work.

What You Get

• A <DocSearch /> React component (@docsearch/react) with full keyboard navigation and accessibility built in
• A framework-agnostic vanilla-JS build (@docsearch/js) for non-React documentation sites
• Shared, themeable CSS (@docsearch/css) covering both the React and JS builds with light/dark theme support
• An “Ask AI” conversational side panel layered on top of search results, with conversation history and suggested questions
• Companion crawler (docsearch-scraper) and shared index configs (docsearch-configs) that index your documentation into Algolia automatically

Common Use Cases

• Adding a fast, accessible search box to a documentation site built with VitePress, Docusaurus, or a custom React-based docs framework
• Replacing a slow client-side or server-rendered search implementation with a hosted, pre-indexed Algolia-backed search experience
• Layering an “Ask AI” conversational assistant over existing documentation content without building a separate chat interface
• Standardizing search UI/UX (styling, keyboard shortcuts, accessibility) across multiple documentation properties using the same shared CSS and component

Under The Hood

Architecture - The repo is a monorepo (packages/) split into docsearch-core (search-client and state logic shared across UIs), docsearch-react (the React component layer — DocSearch.tsx, DocSearchModal.tsx, SearchBox.tsx, Results.tsx, and a Sidepanel/ subtree for the Ask-AI conversational UI), docsearch-js (a thin vanilla-JS wrapper that mounts the React component without requiring consumers to depend on React directly), docsearch-modal/docsearch-sidepanel (extracted modal/sidepanel primitives), and docsearch-css (the shared stylesheet). The React package’s index.ts exposes multiple sub-entry exports (./button, ./modal, ./sidepanel) so consumers can import only the pieces they need. Ask-AI state (conversation history, suggested questions, tool calls) is managed through dedicated hooks (useAskAi, useSuggestedQuestions) and screen components (NewConversationScreen, ConversationHistoryScreen) layered on top of the existing search screen states. Tech Stack - TypeScript (52% of the codebase) and MDX (29%, mostly the documentation website under packages/website) with React as the UI layer, built via a monorepo build/test pipeline; the CSS package ships plain, themeable stylesheets rather than a CSS-in-JS runtime, keeping the styling story dependency-free. Code Quality - docsearch-react/src/__tests__/ covers the public API surface directly (api.test.tsx), keyboard shortcuts, imperative handle behavior, Ask-AI flows, and shared utils, with additional focused test folders under utils/__tests__ and types/__tests__; the project uses Renovate for automated dependency upkeep (291 contributions from renovate-bot alone), suggesting disciplined dependency hygiene across a long-lived, actively maintained codebase (141 contributors, ~68 releases). API Design - The React entry point is a single <DocSearch appId apiKey indexName /> component requiring exactly three credentials to render a fully working, accessible search experience — matching the vanilla-JS docsearch({...}) call shape closely so switching between the two install paths is close to a drop-in change; sub-path exports (@docsearch/react/button, /modal) let advanced integrators compose only the pieces they need instead of the full modal experience.