React SearchKit
Composable React components for multimodal search
A React component library for building multimodal search experiences. Drop in the full SearchKit widget or compose individual pieces, stages streaming, AI answers, filters, and theming included. Connects to any published Mixpeek retriever.
Get Started
Integrations
npm install @mixpeek/react-searchkitUse Cases
Add AI-powered search to any React app
Site search with web scraper + semantic retrieval
Multimodal search across text, images, video, and PDFs
Custom search UIs with composable primitives
Features
Example
React component
import { SearchKit } from "@mixpeek/react-searchkit";
import "@mixpeek/react-searchkit/styles.css";
export default function App() {
return <SearchKit projectKey="my-site-search" enableAIAnswer />;
}useSearchKit hook
import { useSearchKit } from "@mixpeek/react-searchkit";
function Results() {
const { query, results, stages, isLoading } = useSearchKit();
return stages.map(s => `${s.name}: ${s.status}`);
}Get Started
Integrations
Details
Quick Info
Frequently Asked Questions
What is React SearchKit?
React SearchKit is a component library from Mixpeek that provides a drop-in search widget and composable primitives for building multimodal search experiences. It connects to any published Mixpeek retriever and supports stages streaming, AI answers, filters, and theming out of the box.
Do I need a Mixpeek account to use it?
Yes. SearchKit connects to a published Mixpeek retriever via its slug or API key. You can create a free account at mixpeek.com, set up a retriever with the bootstrap CLI (npx mixpeek-bootstrap), and point the widget at it.
Can I use individual components instead of the full widget?
Yes. You can import the useSearchKit hook and build your own UI from scratch. The hook exposes query, results, stages, isLoading, open, and close, giving you full control over rendering while SearchKit handles the streaming retrieval.
Does it support server-side rendering?
SearchKit is a client component. In Next.js App Router, wrap it with 'use client' or import it in a client component. The widget hydrates on the client and streams results from your Mixpeek retriever.
Ready to integrate?
Get started with React SearchKit in minutes. Check out the documentation or explore the source code on GitHub.