How to Integrate Bolt.new with CoStar

Before starting the integration, it is essential to verify whether you have — or can obtain — CoStar API access. This matters because the path forward is entirely different depending on the answer. CoStar's data is among the most valuable and most closely guarded in the real estate industry, which is reflected in its access model. CoStar API access requires two things: (1) an active CoStar Suite subscription, which is a commercial product priced per user per month in the hundreds of dollars range (CoStar does not publish pricing publicly — it is negotiated). (2) A separate API access agreement with CoStar's API team. The API is not self-service — you cannot go to a developer portal and generate credentials. Instead, your organization's CoStar account representative opens a request with CoStar's integration team, who reviews your use case, your data security practices, and the technical requirements of your application before issuing credentials. If your organization already has a CoStar subscription and you want API access, the process is: contact your CoStar account manager, describe the application you are building (internal tool, client portal, etc.), explain that you need API credentials for a web application integration, and ask them to initiate the API access request. CoStar's review process typically takes 2-4 weeks. Once approved, you receive a Client ID and Client Secret (OAuth 2.0 client credentials) specific to your account and use case. If you are in the exploration phase without a CoStar subscription, three alternatives provide legitimate developer API access to real estate data. Estated (estated.com) covers US property ownership records, tax assessor data, valuation estimates, and deed history for both residential and commercial properties. Pricing starts at free for limited requests, with paid tiers for production use — true self-service developer access. ATTOM Data (attomdata.com) is a comprehensive property data platform with a REST API covering 155 million US properties, including transaction history, demographics, and risk scores. They offer a free trial with no credit card required. Zillow's Bridge API (zillow.com/howzit/zillow-bridge-api) covers residential property data and requires an application approval but is free for approved partners. The CoStar API endpoint base URL is https://api.costar.com and uses OAuth 2.0 client credentials flow. Authentication returns a bearer token with a configurable expiry (typically 1 hour) that must be included in all subsequent API requests as an Authorization header.

CoStar's API uses OAuth 2.0 client credentials flow, which is different from most simpler API integrations. Instead of a single static API key, you have a Client ID and Client Secret that you exchange for a time-limited access token before making data requests. The access token typically expires after 3600 seconds (1 hour), so your API route must handle token acquisition and refresh. In Bolt.new, all of this authentication logic belongs in a server-side Next.js API route — never in React components. Your Client ID and Client Secret must stay on the server side to prevent unauthorized use. The API route handles: (1) checking if a valid cached token exists, (2) requesting a new token from CoStar's OAuth endpoint if needed, (3) making the actual data API call with the token, and (4) returning the data to the React frontend. For token caching, a simple module-level object works well in Next.js serverless functions. Store the token and its expiry timestamp; before each request, check if the stored token is still valid (with a 60-second safety buffer). If expired, request a new token. This caching prevents making an OAuth round-trip for every API call. Prompt Bolt to generate this complete authentication setup. Review the generated code to confirm that process.env.COSTAR_CLIENT_ID and process.env.COSTAR_CLIENT_SECRET are used for the OAuth request, and that no credentials appear in any client-side files. The OAuth token endpoint for CoStar is https://api.costar.com/oauth2/token — verify this with your CoStar account representative as endpoint URLs can vary by region or data tier.

1// lib/costar.ts
2const COSTAR_BASE = 'https://api.costar.com';
3const TOKEN_ENDPOINT = `${COSTAR_BASE}/oauth2/token`;
4
5interface TokenCache {
6  accessToken: string;
7  expiresAt: number;
8}
9
10// Module-level token cache (persists across requests in the same serverless instance)
11let tokenCache: TokenCache | null = null;
12
13async function getAccessToken(): Promise<string> {
14  const clientId = process.env.COSTAR_CLIENT_ID;
15  const clientSecret = process.env.COSTAR_CLIENT_SECRET;
16
17  if (!clientId || !clientSecret) {
18    throw new Error('CoStar credentials not configured (COSTAR_CLIENT_ID, COSTAR_CLIENT_SECRET)');
19  }
20
21  // Return cached token if still valid (with 60-second buffer)
22  const now = Date.now();
23  if (tokenCache && tokenCache.expiresAt > now + 60_000) {
24    return tokenCache.accessToken;
25  }
26
27  // Request new token using client credentials flow
28  const body = new URLSearchParams({
29    grant_type: 'client_credentials',
30    client_id: clientId,
31    client_secret: clientSecret,
32  });
33
34  const response = await fetch(TOKEN_ENDPOINT, {
35    method: 'POST',
36    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
37    body: body.toString(),
38  });
39
40  if (!response.ok) {
41    const error = await response.text();
42    throw new Error(`CoStar OAuth failed: ${response.status} ${error}`);
43  }
44
45  const data = await response.json();
46  tokenCache = {
47    accessToken: data.access_token,
48    expiresAt: now + data.expires_in * 1000,
49  };
50
51  return tokenCache.accessToken;
52}
53
54export async function costarFetch<T>(
55  endpoint: string,
56  options: RequestInit = {}
57): Promise<T> {
58  const token = await getAccessToken();
59  const response = await fetch(`${COSTAR_BASE}${endpoint}`, {
60    ...options,
61    headers: {
62      ...options.headers,
63      Authorization: `Bearer ${token}`,
64      'Content-Type': 'application/json',
65      Accept: 'application/json',
66    },
67  });
68
69  if (!response.ok) {
70    throw new Error(`CoStar API error: ${response.status} ${response.statusText}`);
71  }
72
73  return response.json();
74}

With the authentication layer in place, create the Next.js API routes that handle specific CoStar data requests. Each API route corresponds to a type of data: property search, property details, market analytics, or comparable transactions. These routes use the costarFetch utility from lib/costar.ts and transform the API response into a clean shape that your React components consume. CoStar's REST API has endpoints for geographic search (find properties near a lat/long or within a polygon), property detail (get full details for a property ID), market statistics (vacancy rates, rent trends, absorption by market and property type), and comparables (recent sales and leases near a subject property). The exact endpoint paths and request parameters are documented in CoStar's API documentation, which is provided to registered API users through a developer portal accessible after approval. For the React dashboard, prompt Bolt to create a property search page. The key UI elements are: a search bar with location input and property type filter, a results panel showing property cards, and a map view using Mapbox or Google Maps. Mapbox GL JS is particularly well-suited for this use case because it supports large property datasets, custom marker clustering, and interactive property detail popups. Use a public Mapbox token stored as NEXT_PUBLIC_MAPBOX_TOKEN (safe for client-side use) for the map component, since the Mapbox token is a publishable key that controls billing rather than data access. The React component fetches from /api/costar/search with the user's search criteria as query parameters. The API route translates these to CoStar API parameters, makes the authenticated request, and returns a simplified array of properties. This proxy pattern is essential — it keeps the CoStar credentials server-side while providing a clean, consistent interface for the React components.

1// app/api/costar/search/route.ts
2import { NextResponse } from 'next/server';
3import { costarFetch } from '@/lib/costar';
4
5interface CoStarPropertyResult {
6  propertyId: string;
7  address: { deliveryAddress: string; city: string; state: string };
8  propertyType: string;
9  buildingSize: number;
10  yearBuilt: number;
11  location: { lat: number; lng: number };
12}
13
14export async function GET(request: Request) {
15  const { searchParams } = new URL(request.url);
16  const location = searchParams.get('location') ?? '';
17  const propertyType = searchParams.get('propertyType') ?? '';
18  const minSF = searchParams.get('minSF');
19  const maxSF = searchParams.get('maxSF');
20
21  if (!location) {
22    return NextResponse.json({ error: 'Location is required' }, { status: 400 });
23  }
24
25  try {
26    // CoStar property search endpoint — exact path varies by API tier
27    // Confirm endpoint with your CoStar account representative
28    const queryParams = new URLSearchParams({
29      location,
30      ...(propertyType && { propertyType }),
31      ...(minSF && { minBuildingSize: minSF }),
32      ...(maxSF && { maxBuildingSize: maxSF }),
33      pageSize: '20',
34    });
35
36    const data = await costarFetch<{ properties: CoStarPropertyResult[] }>(
37      `/v1/properties/search?${queryParams}`
38    );
39
40    const properties = data.properties.map((p) => ({
41      id: p.propertyId,
42      address: p.address.deliveryAddress,
43      city: p.address.city,
44      state: p.address.state,
45      propertyType: p.propertyType,
46      squareFeet: p.buildingSize,
47      yearBuilt: p.yearBuilt,
48      lat: p.location.lat,
49      lng: p.location.lng,
50    }));
51
52    return NextResponse.json({ properties });
53  } catch (error) {
54    const message = error instanceof Error ? error.message : 'Unknown error';
55    return NextResponse.json({ error: message }, { status: 500 });
56  }
57}

If your organization does not have a CoStar subscription, this step provides a complete integration path using Estated or ATTOM Data — both offering developer-accessible APIs for real estate data. While these APIs cover primarily residential and some light commercial properties rather than CoStar's pure commercial focus, they are excellent for apps targeting property investors, real estate agents, homebuyers, or general property research. Estated (estated.com) is the most developer-friendly option. Sign up at estated.com, verify your email, and go to Settings → API Keys to generate a key. Estated's API uses a simple REST pattern with your API key as a query parameter — no OAuth flow required. The primary endpoint is GET https://apis.estated.com/v4/property?token=YOUR_KEY&street=123+Main+St&city=Austin&state=TX&zip=78701. The response includes ownership information, property characteristics (bedrooms, bathrooms, square footage, lot size), tax assessor data, current value estimates, and deed/sale history. ATTOM Data (attomdata.com) requires a free trial signup and provides a more comprehensive commercial and residential dataset. After signup, you receive an API key for the header: apikey: YOUR_KEY. ATTOM's property detail endpoint is GET https://api.attomdata.com/propertyapi/v1.0.0/property/detail?address1=123 Main St&address2=Austin%2C TX%2078701. ATTOM is particularly strong for transaction history, school ratings, neighborhood demographics, and risk scores. For either alternative, the integration pattern is identical to the CoStar approach: store the API key in .env (ESTATED_API_KEY or ATTOM_API_KEY), create a Next.js API route that proxies the request, and return a normalized property data shape to your React components.

1// app/api/properties/lookup/route.ts
2// Alternative to CoStar using Estated API — developer-friendly with free tier
3import { NextResponse } from 'next/server';
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url);
7  const street = searchParams.get('address') ?? '';
8  const city = searchParams.get('city') ?? '';
9  const state = searchParams.get('state') ?? '';
10  const zip = searchParams.get('zip') ?? '';
11
12  const apiKey = process.env.ESTATED_API_KEY;
13  if (!apiKey) {
14    return NextResponse.json({ error: 'ESTATED_API_KEY not configured' }, { status: 500 });
15  }
16
17  if (!street || !city || !state) {
18    return NextResponse.json({ error: 'Address, city, and state are required' }, { status: 400 });
19  }
20
21  try {
22    const params = new URLSearchParams({
23      token: apiKey,
24      street,
25      city,
26      state,
27      ...(zip && { zip }),
28    });
29
30    const res = await fetch(`https://apis.estated.com/v4/property?${params}`);
31    if (!res.ok) throw new Error(`Estated API error: ${res.status}`);
32
33    const data = await res.json();
34    const prop = data.data;
35
36    if (!prop) {
37      return NextResponse.json({ error: 'Property not found' }, { status: 404 });
38    }
39
40    return NextResponse.json({
41      address: prop.address?.formatted_street_address,
42      city: prop.address?.city,
43      state: prop.address?.state,
44      zip: prop.address?.zip_code,
45      squareFeet: prop.structure?.total_area_sq_ft,
46      yearBuilt: prop.structure?.year_built,
47      bedrooms: prop.structure?.beds_count,
48      bathrooms: prop.structure?.baths,
49      estimatedValue: prop.valuation?.value,
50      ownerName: prop.owner?.name,
51      lastSalePrice: prop.deeds?.[0]?.sale_price,
52      lastSaleDate: prop.deeds?.[0]?.sale_date,
53    });
54  } catch (error) {
55    const message = error instanceof Error ? error.message : 'Unknown error';
56    return NextResponse.json({ error: message }, { status: 500 });
57  }
58}