Lightweight, embeddable search and AI chat widget powered by Elasticsearch
QueryBox adds semantic search and AI-powered chat to your website in minutes. Your content is crawled, indexed with ELSER, and exposed through a beautiful widget - no backend code required.
Key Features:
- Semantic Search - ELSER-powered search with intelligent ranking
- AI Chat - Conversational interface powered by Elastic Agent Builder
- Beautiful UI - Glassmorphic design with dark/light themes
- Lightweight - ~50KB gzipped, zero dependencies
npm install @jedrazb/querybox
# or
pnpm add @jedrazb/queryboximport QueryBox from "@jedrazb/querybox";
import "@jedrazb/querybox/dist/style.css";
const querybox = new QueryBox({
apiEndpoint: "https://api.querybox.dev/{yoursite.com}/v1",
theme: "auto",
primaryColor: "#6366f1",
initialQuestions: [
"How do I get started?",
"What are the pricing options?",
"How do I integrate with React?",
],
});
// Open search or chat
querybox.search();
querybox.chat();Interactive Setup: Visit querybox.dev/get-started to crawl your site, configure the widget, and get installation code for your framework.
git clone https://github.com/jedrazb/querybox.git
cd querybox && pnpm install
# Configure Elasticsearch
cd packages/app && cp env.example .env.local
# Add ELASTICSEARCH_HOST and ELASTICSEARCH_API_KEY
# Start development server
cd ../.. && pnpm dev:appDeploy to Vercel, Railway, or any Next.js-compatible platform.
QueryBox is a monorepo with three packages:
| Package | Description |
|---|---|
packages/widget |
Embeddable TypeScript widget (~50KB) |
packages/app |
Next.js API + landing page + crawler |
packages/shared |
Shared TypeScript types |
Widget Options:
{
apiEndpoint: string; // Required - Your API URL
theme?: 'light'|'dark'|'auto'; // Default: 'auto'
primaryColor?: string; // Default: '#007aff'
title?: string; // Optional header title
initialQuestions?: string[]; // Optional suggested questions (max 3)
}# Install dependencies
pnpm install
# Build all packages
pnpm build
# Development mode
pnpm dev:app # Start Next.js dev server
pnpm dev:widget # Watch widget changes
# Testing
pnpm test # Run tests
pnpm lint # Lint codeContributions are welcome! Open an issue or submit a PR.
MIT © jedrazb
Built with Elasticsearch · Next.js · TypeScript
Made with ❤️ by jedrazb