Algolia-Implementierung mit Claude Code

Algolia-Volltextsuche mit Claude Code aufbauen

Algolia ist ein Such-Engine-SaaS mit Antwortzeiten im Millisekundenbereich. Erweiterte Sucherlebnisse wie Tippfehlertoleranz, Facettensuche und Personalisierung lassen sich einfach implementieren. Mit Claude Code können Sie vom Index-Design bis zum Aufbau der Such-UI effizient vorgehen.

Index-Design und Datenimport

> Entwirf einen Algolia-Index und erstelle ein Skript zum Import von Produktdaten.
> Unterstütze auch die Suche auf Deutsch.

// src/scripts/index-products.ts
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_KEY!
);

const index = client.initIndex('products');

// Index-Einstellungen
await index.setSettings({
  searchableAttributes: [
    'name',
    'description',
    'category',
    'brand',
    'tags',
  ],
  attributesForFaceting: [
    'searchable(category)',
    'searchable(brand)',
    'price_range',
    'filterOnly(in_stock)',
  ],
  customRanking: ['desc(popularity)', 'asc(price)'],
  queryLanguages: ['de', 'en'],
  indexLanguages: ['de', 'en'],
  // Tokenisierung
  ignorePlurals: true,
  removeStopWords: true,
});

// Datenimport
interface Product {
  objectID: string;
  name: string;
  description: string;
  category: string;
  brand: string;
  price: number;
  price_range: string;
  in_stock: boolean;
  tags: string[];
  popularity: number;
  image_url: string;
}

const products: Product[] = await fetchProductsFromDB();

// Batch-Import in den Index (jeweils 1000 Einträge)
const batchSize = 1000;
for (let i = 0; i < products.length; i += batchSize) {
  const batch = products.slice(i, i + batchSize);
  await index.saveObjects(batch);
  console.log(`Indexiert ${i + batch.length} / ${products.length}`);
}

Such-UI mit React InstantSearch aufbauen

> Erstelle eine Suchseite mit React InstantSearch.
> Mit Facetten, Hervorhebung und Paginierung.

// src/components/SearchPage.tsx
import {
  InstantSearch,
  SearchBox,
  Hits,
  RefinementList,
  Pagination,
  Highlight,
  Stats,
  Configure,
} from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!
);

function Hit({ hit }: { hit: any }) {
  return (
    <article className="p-4 border rounded-lg">
      <img
        src={hit.image_url}
        alt={hit.name}
        className="w-full h-48 object-cover rounded"
      />
      <h3 className="text-lg font-bold mt-2">
        <Highlight attribute="name" hit={hit} />
      </h3>
      <p className="text-gray-600 text-sm mt-1">
        <Highlight attribute="description" hit={hit} />
      </p>
      <div className="flex justify-between items-center mt-2">
        <span className="text-indigo-600 font-bold">
          {hit.price.toLocaleString()} €
        </span>
        <span className="text-sm text-gray-500">{hit.brand}</span>
      </div>
    </article>
  );
}

export default function SearchPage() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Configure hitsPerPage={12} />
      <div className="max-w-6xl mx-auto p-6">
        <SearchBox
          placeholder="Produkte suchen..."
          className="mb-6"
        />
        <Stats />
        <div className="grid grid-cols-4 gap-6 mt-4">
          <aside>
            <h4 className="font-bold mb-2">Kategorie</h4>
            <RefinementList attribute="category" />
            <h4 className="font-bold mt-4 mb-2">Marke</h4>
            <RefinementList attribute="brand" searchable />
            <h4 className="font-bold mt-4 mb-2">Preisklasse</h4>
            <RefinementList attribute="price_range" />
          </aside>
          <main className="col-span-3">
            <Hits hitComponent={Hit} className="grid grid-cols-3 gap-4" />
            <Pagination className="mt-6" />
          </main>
        </div>
      </div>
    </InstantSearch>
  );
}

Index-Synchronisierung

Ein Mechanismus zur Synchronisierung von Datenbankänderungen mit Algolia ist erforderlich.

// src/services/algolia-sync.ts
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_KEY!
);
const index = client.initIndex('products');

export async function onProductCreated(product: Product) {
  await index.saveObject({ ...product, objectID: product.id });
}

export async function onProductUpdated(product: Product) {
  await index.partialUpdateObject({
    objectID: product.id,
    ...product,
  });
}

export async function onProductDeleted(productId: string) {
  await index.deleteObject(productId);
}

Zusammenfassung

Durch die Kombination der schnellen Suche von Algolia mit Claude Code können Sie produktionsreife Suchfunktionen in kurzer Zeit aufbauen. Weitere Informationen finden Sie im Leitfaden zur Suchfunktionsimplementierung und unter Performance-Optimierung.

Details zu Algolia finden Sie in der offiziellen Algolia-Dokumentation.