4.7 KiB
The easiest way to add search to your documentation – for free.
DocSearch crawls your documentation, pushes the content to an Algolia index and provides a dropdown search experience on your website.
Preview
Usage
Don't have your Algolia credentials yet? Apply to DocSearch!
JavaScript
Installation
bun add @docsearch/js@5
# or
npm install @docsearch/js@5
If you don’t want to use a package manager, you can use a standalone endpoint:
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@5"></script>
Get started
To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:
<div id="docsearch"></div>
Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.
Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.
import docsearch from '@docsearch/js';
import '@docsearch/css';
docsearch({
container: '#docsearch',
appId: 'YOUR_APP_ID',
indices: ['YOUR_INDEX_NAME'],
apiKey: 'YOUR_SEARCH_API_KEY',
});
React
Installation
bun add @docsearch/react@5
# or
npm install @docsearch/react@5
If you don’t want to use a package manager, you can use a standalone endpoint:
<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@5"></script>
Get started
DocSearch generates a fully accessible search box for you.
import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
function App() {
return (
<DocSearch
appId="YOUR_APP_ID"
apiKey="YOUR_SEARCH_API_KEY"
indices=["YOUR_ALGOLIA_INDEX"]
/>
);
}
export default App;
Styling
MCP plugins
Client plugins for the public DocSearch MCP endpoint are in mcp/plugins/docsearch. They connect ChatGPT, Codex, Cursor, and Claude Code to https://mcp.algolia.com/1/docsearch/mcp for current public developer documentation.
Related projects
DocSearch is made of the following repositories:
- algolia/docsearch: DocSearch source code.
- algolia/docsearch/packages/website: DocSearch website and documentation.
- algolia/docsearch-configs: DocSearch websites configurations that DocSearch powers.
- algolia/docsearch-scraper: DocSearch crawler that extracts data from your documentation.
Used by
DocSearch is used by Bootstrap, Cheerio, Element Plus, Authelia, MDX, VitePress and many more.
Generated with usedby.dev