Implementacion de Algolia con Claude Code

Construir busqueda de texto completo con Algolia usando Claude Code

Algolia es un motor de busqueda SaaS que presume tiempos de respuesta de milisegundos. Permite implementar facilmente experiencias de busqueda avanzadas como tolerancia a errores tipograficos, busqueda por facetas y personalizacion. Con Claude Code, puedes avanzar eficientemente desde el diseno del indice hasta la construccion de la UI de busqueda.

Diseno del indice e ingesta de datos

> Disena un indice de Algolia y crea un script para ingestar datos de productos.
> Incluye soporte para busqueda en varios idiomas.

// 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');

// Configuracion del indice
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: ['ja', 'en'],
  indexLanguages: ['ja', 'en'],
  // Tokenizacion multiidioma
  ignorePlurals: true,
  removeStopWords: true,
});

// Ingesta de datos
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();

// Ingesta al indice por lotes (1000 registros a la vez)
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(`Indexados ${i + batch.length} / ${products.length}`);
}

Construccion de UI de busqueda con React InstantSearch

> Crea una pagina de busqueda con React InstantSearch.
> Con facetas, resaltado y paginacion.

// 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="Buscar productos..."
          className="mb-6"
        />
        <Stats />
        <div className="grid grid-cols-4 gap-6 mt-4">
          <aside>
            <h4 className="font-bold mb-2">Categoria</h4>
            <RefinementList attribute="category" />
            <h4 className="font-bold mt-4 mb-2">Marca</h4>
            <RefinementList attribute="brand" searchable />
            <h4 className="font-bold mt-4 mb-2">Rango de precio</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>
  );
}

Sincronizacion del indice

Es necesario un mecanismo para sincronizar los cambios de la base de datos con Algolia.

// 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);
}

Summary

Combinando la busqueda de alta velocidad de Algolia con Claude Code, puedes construir funcionalidad de busqueda a nivel de produccion en poco tiempo. Consulta tambien la guia de implementacion de busqueda y optimizacion del rendimiento.

Para mas detalles sobre Algolia, consulta la documentacion oficial de Algolia.