Skip to main content

Quick Start

This guide will help you build a search interface in minutes using the Seekora UI SDK.

Basic Setup (React)​

1. Create the Client​

import { SeekoraClient } from '@seekora-ai/search-sdk';

const client = new SeekoraClient({
  storeId: 'your-store-id',
  readSecret: 'your-read-secret',
  environment: 'production',
});

2. Wrap with SearchProvider​

import { SearchProvider } from '@seekora-ai/ui-sdk-react';

function App() {
  return (
    <SearchProvider client={client}>
      {/* Your search components */}
    </SearchProvider>
  );
}

3. Add Search Components​

import { SearchProvider, SearchBar, SearchResults } from '@seekora-ai/ui-sdk-react';

function App() {
  return (
    <SearchProvider client={client}>
      <div className="search-container">
        <SearchBar placeholder="Search products..." />
        <SearchResults />
      </div>
    </SearchProvider>
  );
}

Complete Example​

Here's a complete search page with filters, sorting, and pagination:

import React from 'react';
import { SeekoraClient } from '@seekora-ai/search-sdk';
import {
  SearchProvider,
  SearchBar,
  SearchResults,
  Facets,
  CurrentRefinements,
  ClearRefinements,
  Pagination,
  SortBy,
  Stats,
} from '@seekora-ai/ui-sdk-react';

// Create client
const client = new SeekoraClient({
  storeId: 'your-store-id',
  readSecret: 'your-read-secret',
});

function SearchPage() {
  return (
    <SearchProvider client={client} enableAnalytics>
      <div className="search-page">
        {/* Header */}
        <header className="search-header">
          <SearchBar 
            placeholder="Search products..." 
            showSuggestions 
            debounceMs={300}
          />
        </header>

        <div className="search-layout">
          {/* Sidebar */}
          <aside className="search-sidebar">
            <ClearRefinements />
            <Facets />
          </aside>

          {/* Main Content */}
          <main className="search-main">
            {/* Toolbar */}
            <div className="search-toolbar">
              <Stats />
              <CurrentRefinements />
              <SortBy
                items={[
                  { label: 'Relevance', value: 'relevance:desc' },
                  { label: 'Price: Low to High', value: 'price:asc' },
                  { label: 'Price: High to Low', value: 'price:desc' },
                  { label: 'Newest', value: 'created_at:desc' },
                ]}
              />
            </div>

            {/* Results */}
            <SearchResults viewMode="grid" />

            {/* Pagination */}
            <Pagination />
          </main>
        </div>
      </div>
    </SearchProvider>
  );
}

export default SearchPage;

Custom Result Rendering​

Customize how results are displayed:

<SearchResults
  viewMode="grid"
  renderResult={(result, index) => (
    <div className="product-card" key={result.id}>
      <img src={result.image} alt={result.title} />
      <h3>{result.title}</h3>
      <p className="price">${result.price}</p>
      <p className="brand">{result.brand}</p>
      <button onClick={() => addToCart(result)}>Add to Cart</button>
    </div>
  )}
  renderEmpty={() => (
    <div className="no-results">
      <h3>No products found</h3>
      <p>Try adjusting your search or filters</p>
    </div>
  )}
  renderLoading={() => (
    <div className="loading">
      <span>Loading products...</span>
    </div>
  )}
/>

Using Hooks​

For more control, use the provided hooks:

import { useSeekoraSearch, useSearchState } from '@seekora-ai/ui-sdk-react';

function CustomSearchComponent() {
  const { search, results, loading, error } = useSeekoraSearch({ client });
  const { query, setQuery, refinements } = useSearchState();

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    await search(query, {
      per_page: 20,
      filter_by: buildFilterString(refinements),
    });
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Searching...' : 'Search'}
      </button>
      
      {error && <div className="error">{error.message}</div>}
      
      {results && (
        <div className="results">
          {results.results.map((result) => (
            <div key={result.id}>{result.title}</div>
          ))}
        </div>
      )}
    </form>
  );
}

Field Mapping​

Map your data structure to component expectations:

<SearchProvider
  client={client}
  fieldMapping={{
    title: 'document.productName',
    description: 'document.brandDesc',
    image: 'document.imageUrl',
    price: 'document.mrp',
    url: 'document.productUrl',
    id: 'id',
  }}
>
  {/* Components will use mapped fields */}
  <SearchResults />
</SearchProvider>

Theming​

Apply a custom theme:

import { SearchProvider, createTheme } from '@seekora-ai/ui-sdk-react';

const customTheme = createTheme({
  colors: {
    primary: '#ff6b6b',
    secondary: '#4ecdc4',
    background: '#ffffff',
    text: '#2d3436',
  },
  typography: {
    fontFamily: 'Inter, sans-serif',
  },
  borderRadius: {
    medium: '8px',
  },
});

function App() {
  return (
    <SearchProvider client={client} theme={customTheme}>
      <SearchBar />
      <SearchResults />
    </SearchProvider>
  );
}

Vue Quick Start​

<template>
  <SearchProvider :client="client">
    <SearchBar placeholder="Search products..." />
    <SearchResults />
  </SearchProvider>
</template>

<script setup>
import { SeekoraClient } from '@seekora-ai/search-sdk';
import { SearchProvider, SearchBar, SearchResults } from '@seekora-ai/ui-sdk-vue';

const client = new SeekoraClient({
  storeId: 'your-store-id',
  readSecret: 'your-read-secret',
});
</script>

Angular Quick Start​

// app.module.ts
import { SeekoraModule } from '@seekora-ai/ui-sdk-angular';

@NgModule({
  imports: [
    SeekoraModule.forRoot({
      storeId: 'your-store-id',
      readSecret: 'your-read-secret',
    }),
  ],
})
export class AppModule {}
<!-- search.component.html -->
<seekora-search-provider>
  <seekora-search-bar placeholder="Search products..."></seekora-search-bar>
  <seekora-search-results></seekora-search-results>
</seekora-search-provider>

Vanilla JS Quick Start​

import { SeekoraClient } from '@seekora-ai/search-sdk';
import { SearchProvider, SearchBar, SearchResults } from '@seekora-ai/ui-sdk-vanilla';

const client = new SeekoraClient({
  storeId: 'your-store-id',
  readSecret: 'your-read-secret',
});

// Initialize provider
const provider = new SearchProvider({ client });

// Create search bar
const searchBar = new SearchBar({
  container: '#search-bar',
  placeholder: 'Search products...',
});

// Create results
const results = new SearchResults({
  container: '#search-results',
});

// Mount components
searchBar.mount();
results.mount();
<div id="search-bar"></div>
<div id="search-results"></div>

Next Steps​