@mixpeek/ui

React component library for building multimodal search applications with Mixpeek.

• 58 shadcn/ui primitives — Button, Card, Dialog, Tabs, Table, and more
• 8 API hooks — useRetriever, useDocuments, useBucketUpload, useBatchStatus, useTaxonomy, useNamespace, useFeedback, useClient
• 24 API-bound components — SearchBox, DocumentList, FileUpload, BboxOverlay, VideoPlayer, TaxonomyTree, and more
• Autonomous feedback loops — every interaction emits structured events for retriever tuning
• Zero-config provider — wrap your app in <MxpProvider> and components connect to your data

Install

npm install @mixpeek/ui

Quick Start

import { MxpProvider, SearchBox, SearchResults, ResultCard, ThumbsFeedback } from '@mixpeek/ui';
import '@mixpeek/ui/styles.css';

function App() {
  const [results, setResults] = useState([]);
  return (
    <MxpProvider apiKey="mxp_sk_..." namespace="ns_abc">
      <SearchBox retrieverId="ret_xyz" onResults={setResults} />
      <SearchResults
        results={results}
        renderResult={(doc) => (
          <ResultCard document={doc}>
            <ThumbsFeedback documentId={doc.document_id} />
          </ResultCard>
        )}
      />
    </MxpProvider>
  );
}

Components

Hooks

Hook	API Endpoint	Returns
useRetriever	POST /v1/retrievers/{id}/execute	{ results, isLoading, error, stages, execute, cancel }
useDocuments	POST /v1/collections/{id}/documents	{ documents, total, page, isLoading, fetchPage, refresh }
useBucketUpload	POST /v1/buckets/{id}/upload/presigned	{ upload, progress, isUploading, objectId, reset }
useBatchStatus	GET /v1/batches/{id}	{ status, isPolling, error, refresh }
useTaxonomy	GET /v1/taxonomies	{ taxonomies, isLoading, error }
useNamespace	GET /v1/namespaces	{ namespace, isLoading, error }
useFeedback	POST /v1/feedback/events	{ emitFeedback }
useClient	—	MxpApiClient instance

Primitives

All shadcn/ui components with mxp- Tailwind prefix: Button, Card, Dialog, Tabs, Table, Badge, Input, Select, Accordion, ScrollArea, Sheet, Tooltip, Popover, DropdownMenu, Command, Carousel, and 40+ more.

API-Bound Components

Category	Components
Search	SearchBox, SearchResults, ResultCard, FacetFilters
Documents	DocumentList, DocumentCard
Upload	FileUpload, DropZone, UploadProgress
Media	MediaPreview, ImageGallery, BboxOverlay, VideoPlayer, LazyImage, MasonryGrid, JsonViewer
Taxonomy	TaxonomyTree, TaxonomyBadge
Feedback	ThumbsFeedback, RatingFeedback, TextFeedback
Analytics	UsageMeter, ProcessingStatus

Styling

Components use Tailwind CSS with the mxp- prefix. Import the stylesheet:

import '@mixpeek/ui/styles.css';

Override theme variables:

:root {
  --mxp-primary: 220 90% 56%;
  --mxp-background: 0 0% 100%;
  --mxp-foreground: 240 10% 4%;
}

License

MIT