How to Integrate Costar with V0

Before building the integration, verify your API access situation. CoStar API access follows one of three paths: (1) Licensed API with direct REST access — you have a CoStar subscription and have worked with your CoStar account manager to add API access to your contract. You receive an API key and base URL from CoStar directly. (2) Export-based integration — you have a CoStar subscription but no API license. You export property and market data from CoStar's web portal as Excel/CSV files, load them into a Supabase or PostgreSQL database, and query your own database. (3) Alternative provider — you use a commercial real estate data API with open developer access, such as Reonomy, ATTOM Data, or RealPage. For licensed CoStar API access: your CoStar account team provides you with an API key (typically a long alphanumeric string) and the specific API endpoint base URL. CoStar's API is not publicly documented — documentation is provided under NDA to licensed clients. Common endpoints follow patterns like /property/search, /property/{propertyId}, /market/statistics, and /transaction/search. The API key goes in the header as x-api-key or Authorization: ApiKey {key} — confirm the exact authentication method with your CoStar representative. For the export-based approach: log into CoStar, search for the properties or market data you need, and use the Export button to download as Excel. Set up a regular export schedule (daily or weekly depending on data freshness requirements). Use a data pipeline (Next.js server action, a simple Node.js script, or a service like Zapier) to parse the Excel file and upsert records into your database. Your API routes then query your own database instead of CoStar directly. For alternative providers: ATTOM Data (attomdata.com/developers) has a self-service API with property details, transactions, and assessor data. Reonomy provides commercial property data with an API. These are more accessible but have less comprehensive commercial data than CoStar.

Build the Next.js API route that either calls the CoStar REST API directly (if licensed) or queries your local database of CoStar export data. The route structure is the same in both cases — the data source changes based on your access model. Create app/api/costar/properties/route.ts with GET support accepting search parameters: property type, market or geographic area, minimum and maximum square footage, and occupancy status. The route returns a standardized property list format regardless of whether data comes from CoStar's API or your own database. For licensed CoStar API calls: use the base URL and authentication method provided by CoStar. Add your API key to the Authorization header. CoStar typically returns property objects with fields like propertyId, propertyName, address, city, state, propertyType, buildingSize, yearBuilt, numberOfFloors, vacancyPercent, and askingRentPSF. Handle CoStar's rate limits (typically 100-1000 requests per hour depending on your license tier) with appropriate error handling for 429 responses. For database-backed queries: use Supabase or PostgreSQL with a properties table that mirrors CoStar export field names. Add a full-text search index on address and property name fields for keyword search. The database approach is actually more performant for most dashboard use cases since CoStar API calls have variable latency. One critical V0 limitation to understand: V0 cannot verify that your CoStar API key is valid or that your account has access to specific endpoints. It generates the API route structure correctly, but you must test the actual CoStar API calls with your credentials after deployment. Check Vercel Function Logs for authentication errors.

1import { NextRequest, NextResponse } from 'next/server';
2
3const COSTAR_API_BASE = process.env.COSTAR_API_BASE_URL || 'https://api.costar.com/v1';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const propertyType = searchParams.get('propertyType');
8  const market = searchParams.get('market');
9  const minSF = searchParams.get('minSF');
10  const maxSF = searchParams.get('maxSF');
11  const page = parseInt(searchParams.get('page') || '1');
12  const limit = 20;
13
14  const apiKey = process.env.COSTAR_API_KEY;
15  if (!apiKey) {
16    return NextResponse.json(
17      { error: 'COSTAR_API_KEY environment variable not configured' },
18      { status: 500 }
19    );
20  }
21
22  // Build CoStar API query parameters
23  const params = new URLSearchParams();
24  if (propertyType) params.set('propertyType', propertyType);
25  if (market) params.set('market', market);
26  if (minSF) params.set('buildingSizeMin', minSF);
27  if (maxSF) params.set('buildingSizeMax', maxSF);
28  params.set('page', page.toString());
29  params.set('pageSize', limit.toString());
30
31  try {
32    const response = await fetch(
33      `${COSTAR_API_BASE}/property/search?${params.toString()}`,
34      {
35        headers: {
36          // CoStar uses different auth headers depending on your license type
37          // Confirm with your CoStar account team
38          Authorization: `ApiKey ${apiKey}`,
39          Accept: 'application/json',
40        },
41      }
42    );
43
44    if (response.status === 401) {
45      return NextResponse.json(
46        { error: 'CoStar API authentication failed — check COSTAR_API_KEY' },
47        { status: 401 }
48      );
49    }
50
51    if (response.status === 403) {
52      return NextResponse.json(
53        { error: 'CoStar API access forbidden — your license may not include API access' },
54        { status: 403 }
55      );
56    }
57
58    if (!response.ok) {
59      return NextResponse.json(
60        { error: `CoStar API error: ${response.status} ${response.statusText}` },
61        { status: response.status }
62      );
63    }
64
65    const data = await response.json();
66    return NextResponse.json({
67      properties: data.properties || data.results || [],
68      total: data.totalCount || data.total || 0,
69      page,
70      pageSize: limit,
71    });
72  } catch (error) {
73    console.error('CoStar API error:', error);
74    return NextResponse.json(
75      { error: 'Failed to fetch property data' },
76      { status: 500 }
77    );
78  }
79}

CoStar API licenses include rate limits that vary by contract tier. Common limits are 100-500 property requests per hour, 10-50 market statistics requests per hour, and 50-200 transaction lookup requests per hour. Build proper rate limit handling into your API routes and implement a caching strategy to minimize CoStar API calls. Create app/api/costar/properties/[propertyId]/route.ts for detailed property data. Property detail views typically require more data than search results — floor plates, lease expirations, tenant rosters, capital expenditure history, and debt information. These are separate API endpoints in most CoStar API implementations. For caching, implement Next.js route handler caching with appropriate revalidation periods. Property data changes infrequently: a property's size, year built, and address are permanent, while vacancy and rent data updates monthly. Use next: { revalidate: 3600 } (1 hour) for property detail data and next: { revalidate: 86400 } (24 hours) for market statistics. For high-traffic applications where CoStar API rate limits become a bottleneck, consider a database caching layer: fetch from CoStar once per day per property and store in Supabase. Serve all dashboard requests from your database, and run a background job to refresh stale records. This architecture works well for portfolio dashboards covering a known set of properties. The market statistics endpoint provides aggregate metrics for a geographic market (overall vacancy, average rent PSF, net absorption, under construction). These are ideal for market context panels alongside property search results — show the market-level vacancy and rent trend alongside individual property data.

1import { NextRequest, NextResponse } from 'next/server';
2
3const COSTAR_API_BASE = process.env.COSTAR_API_BASE_URL || 'https://api.costar.com/v1';
4
5interface RouteParams {
6  params: { propertyId: string };
7}
8
9export async function GET(request: NextRequest, { params }: RouteParams) {
10  const apiKey = process.env.COSTAR_API_KEY;
11  if (!apiKey) {
12    return NextResponse.json({ error: 'CoStar API not configured' }, { status: 500 });
13  }
14
15  try {
16    const response = await fetch(
17      `${COSTAR_API_BASE}/property/${params.propertyId}`,
18      {
19        headers: {
20          Authorization: `ApiKey ${apiKey}`,
21          Accept: 'application/json',
22        },
23        next: { revalidate: 3600 }, // Cache property details for 1 hour
24      }
25    );
26
27    if (response.status === 404) {
28      return NextResponse.json({ error: 'Property not found' }, { status: 404 });
29    }
30
31    if (!response.ok) {
32      return NextResponse.json(
33        { error: `CoStar API error: ${response.status}` },
34        { status: response.status }
35      );
36    }
37
38    const property = await response.json();
39    return NextResponse.json({ property });
40  } catch (error) {
41    console.error('Property detail error:', error);
42    return NextResponse.json({ error: 'Failed to fetch property details' }, { status: 500 });
43  }
44}

Add CoStar API credentials to Vercel environment variables. The variables you need depend on your CoStar access type. For licensed API access: COSTAR_API_KEY (your CoStar API key), COSTAR_API_BASE_URL (the API base URL from CoStar — varies by data tier), and optionally COSTAR_SUBSCRIPTION_ID (some CoStar API setups require a subscription identifier separate from the API key). In Vercel Dashboard → Settings → Environment Variables, add all credentials with the Production scope. None of these variables should have the NEXT_PUBLIC_ prefix — CoStar API keys are sensitive server-only credentials. For Preview deployments, you may want to use the same credentials or set up mock data that does not call the live CoStar API. For the export-based approach without direct API access: set up a Supabase database (free tier is sufficient for most CRE databases), add NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY to Vercel, and rewrite your API routes to query Supabase instead of CoStar. The V0-generated UI works identically regardless of the backend data source. After deployment, test property search with known property names or addresses from your CoStar account. If you are getting 403 Forbidden responses, your API key may not have been provisioned for search access — contact CoStar's API team. If you are getting 401 Unauthorized, verify the authentication header format matches what CoStar specified for your account (it varies between ApiKey, Bearer, and Basic authentication formats depending on the license type).