@mixpeek/search-js

Drop-in multimodal search widget for any website. Add AI-powered search in 6 lines of code.

Semantic search across text, images, video, PDFs
AI-generated answers with citations
Cmd+K keyboard shortcut
Light/dark theme with full customization
React component + CDN script tag

Quick Start

npm (React)

npm install @mixpeek/search-js

import { MixpeekSearch } from '@mixpeek/search-js';
import '@mixpeek/search-js/styles.css';

function App() {
  return <MixpeekSearch projectKey="your-retriever-slug" />;
}

CDN (no build step)

<link rel="stylesheet" href="https://cdn.mixpeek.com/search/v1/mixpeek-search.css" />
<script src="https://cdn.mixpeek.com/search/v1/loader.js"
  data-project-key="your-retriever-slug"
  data-mount="search-container">
</script>

Props

Prop	Type	Default	Description
`projectKey`	`string`	required	Public retriever slug or `ret_sk_` API key
`placeholder`	`string`	`"Search..."`	Input placeholder text
`maxResults`	`number`	`10`	Maximum results to display
`theme`	`"light" \| "dark" \| "auto"`	`"auto"`	Color theme
`accentColor`	`string`	`"#6366f1"`	Accent color (hex)
`position`	`"modal" \| "inline"`	`"modal"`	Modal overlay or inline embed
`keyboardShortcut`	`boolean`	`true`	Enable Cmd+K / Ctrl+K
`showPoweredBy`	`boolean`	`true`	Show "Search by Mixpeek" badge
`enableAIAnswer`	`boolean`	`false`	Show AI-generated answer panel
`enableShareLinks`	`boolean`	`false`	Enable shareable search URLs
`onSearch`	`(query: string) => void`	-	Callback when search is performed
`onResultClick`	`(result, index) => void`	-	Callback when result is clicked
`onZeroResults`	`(query: string) => void`	-	Callback when no results found
`transformResults`	`(results) => results`	-	Transform results before rendering
`renderResult`	`(result, index) => ReactNode`	-	Custom result renderer
`retrieverSlug`	`string`	-	Retriever slug when using `ret_sk_` key
`apiBaseUrl`	`string`	`"https://api.mixpeek.com"`	Custom API URL
`className`	`string`	-	Additional CSS class
`defaultOpen`	`boolean`	`false`	Start with modal open

Context Hook

Access search state from child components:

import { useMixpeekSearch } from '@mixpeek/search-js';

function MyComponent() {
  const { query, results, isLoading, open, close } = useMixpeekSearch();
  // ...
}

Custom Result Rendering

<MixpeekSearch
  projectKey="my-retriever"
  renderResult={(result, index) => (
    <div className="my-result">
      <h3>{result.title}</h3>
      <p>{result.content}</p>
    </div>
  )}
/>

Field Mapping

Use transformResults to map your retriever's fields to the widget format:

<MixpeekSearch
  projectKey="my-retriever"
  transformResults={(results) =>
    results.map((r) => ({
      ...r,
      title: r.product_name || r.title,
      content: r.description,
      page_url: `/products/${r.id}`,
    }))
  }
/>

License

MIT