Quickstart

Build a custom real estate site in Next.js using data from the Garagem platform. This guide gets you from zero to rendering listings in under 5 minutes.

1. Install the SDK

Terminal

pnpm add @garagem-ai/site-sdk

Works with npm, yarn, or bun too. The package has zero runtime dependencies — it's just typed fetchers over fetch.

2. Get your Site ID

Every Garagem tenant has a site ID. You can find it in your dashboard at Settings → Site → SDK, or resolve it from a domain:

resolve-site.ts

import { getSite } from "@garagem-ai/site-sdk";

const site = await getSite({ domain: "imobiliariax.com.br" });
// → { id: "abc-123", name: "Imobiliária X", domain: "imobiliariax.com.br", tenantId: "..." }

Store the site ID in an environment variable:

.env.local

GARAGEM_SITE_ID=abc-123

3. Fetch listings

Use getListings in a React Server Component:

app/page.tsx

import { getListings } from "@garagem-ai/site-sdk";

export default async function HomePage() {
  const { listings, total } = await getListings({
    siteId: process.env.GARAGEM_SITE_ID!,
    filters: { limit: 12, businessType: "sale" },
    next: { revalidate: 300 },
  });

  return (
    <main>
      <h1>{total} imóveis à venda</h1>
      <div className="grid grid-cols-3 gap-4">
        {listings.map((listing) => (
          <div key={listing.id}>
            <h2>{listing.title}</h2>
            <p>{listing.price?.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })}</p>
          </div>
        ))}
      </div>
    </main>
  );
}

4. Add pre-built blocks

The SDK ships shadcn-compatible blocks you can install with one command. They handle layout, responsive design, and formatting:

Terminal

npx shadcn@latest add https://sdk.garagem.site/r/listing-grid.json

Then use the component:

app/listings/page.tsx

import { ListingGrid } from "@/components/garagem/listing-grid";

export default function ListingsPage() {
  return (
    <ListingGrid
      siteId={process.env.GARAGEM_SITE_ID!}
      filters={{ city: "São Paulo" }}
      limit={24}
    />
  );
}

See all available blocks on the blocks reference.

5. Fetch a single listing

app/imoveis/[id]/page.tsx

import { getListing } from "@garagem-ai/site-sdk";

export default async function ListingPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const listing = await getListing({
    siteId: process.env.GARAGEM_SITE_ID!,
    listingId: id,
    next: { revalidate: 60 },
  });

  return (
    <main>
      <h1>{listing.title}</h1>
      <p>{listing.description}</p>
      {/* listing.media, listing.amenities, listing.building, etc. */}
    </main>
  );
}

Next steps

SDK Reference — every function, type, and error class
Blocks — pre-built components with install commands
Recipes — common page compositions (search page, detail page, contact CTA)