How to Integrate Yardi with V0

Open V0 at v0.dev and describe the tenant portal or property management dashboard you need. Yardi-connected interfaces typically include structured data displays — lease summary cards, payment history tables, unit listing grids, and maintenance request forms. V0 excels at these patterns and will generate clean, accessible components using shadcn/ui and Tailwind. Be specific about the navigation structure: a sidebar with Lease Details, Payments, Maintenance, and Documents sections gives V0 enough context to generate a realistic portal layout. V0 will create placeholder data arrays and likely generate fetch calls to routes like /api/yardi/lease, /api/yardi/payments, and /api/yardi/maintenance. Review the generated preview and note how data is bound to UI elements — the data shapes in V0's mock data will need to match what your API routes return. For tenant portals, ask V0 to include empty states (for tenants with no maintenance history, for example) and loading indicators. Push the project to GitHub using V0's Git panel to enable Vercel auto-deployment.

Before building individual data routes, create a shared authentication helper that all Yardi API routes will use. Yardi Voyager's REST API uses HTTP Basic Authentication — you send Base64-encoded credentials in the Authorization header with every request. The authentication credentials include a service account username and password, plus Yardi-specific headers identifying your database server. Create a utility file at lib/yardi.ts that exports a function returning the authentication headers. This keeps your credential-handling logic in one place rather than duplicated across every route. The Yardi API base URL format is typically https://your-server.yardicloud.com/DataImportExport/service.asmx for older SOAP interfaces, or https://your-server.yardi.com/voyager/{database}/webservice/itf_ResidentData.asp for the REST interface — your Yardi administrator will provide the exact URL. The credentials object reads from process.env at call time rather than at module initialization, ensuring the environment variables are available when the function runs in Vercel's serverless environment. Store the Yardi credentials across four environment variables: YARDI_USERNAME, YARDI_PASSWORD, YARDI_SERVER_NAME, and YARDI_API_BASE_URL.

1// lib/yardi.ts
2export function getYardiHeaders(): Record<string, string> {
3  const username = process.env.YARDI_USERNAME!;
4  const password = process.env.YARDI_PASSWORD!;
5  const serverName = process.env.YARDI_SERVER_NAME!;
6
7  if (!username || !password) {
8    throw new Error('Yardi credentials not configured');
9  }
10
11  const credentials = Buffer.from(`${username}:${password}`).toString('base64');
12
13  return {
14    'Authorization': `Basic ${credentials}`,
15    'Content-Type': 'application/json',
16    'Accept': 'application/json',
17    'X-Yardi-Server': serverName || '',
18  };
19}
20
21export function getYardiBaseUrl(): string {
22  const baseUrl = process.env.YARDI_API_BASE_URL;
23  if (!baseUrl) {
24    throw new Error('YARDI_API_BASE_URL environment variable not set');
25  }
26  return baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
27}
28
29export async function yardiGet(path: string): Promise<Response> {
30  const url = `${getYardiBaseUrl()}${path}`;
31  return fetch(url, {
32    headers: getYardiHeaders(),
33    cache: 'no-store',
34  });
35}

With the authentication helper in place, create the API routes your portal components will call. The structure of your routes depends on what data your portal needs, but common patterns include a lease details route, a payments route, a units/availability route, and a maintenance route. Each route uses the yardiGet helper from lib/yardi.ts and transforms the Yardi API response into a clean JSON structure for your React components. Yardi's API response format can be verbose — it often returns XML or nested JSON with Yardi-specific field names that need mapping to human-readable equivalents. Do this transformation in the API route so your components receive clean, consistently formatted data. The exact endpoint paths depend on your Yardi configuration — your administrator should provide the specific endpoint documentation. Common endpoints include /itf_ResidentData.asp for resident/tenant data, /itf_UnitAvailability.asp for unit listings, and /itf_WorkOrders.asp for maintenance. Handle Yardi's error responses carefully: the API sometimes returns HTTP 200 with an error message inside the response body rather than a proper HTTP error status code. Check the response structure for error indicators before treating the response as successful data.

1// app/api/yardi/lease/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { yardiGet } from '@/lib/yardi';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const tenantId = searchParams.get('tenantId');
8
9  if (!tenantId) {
10    return NextResponse.json({ error: 'tenantId is required' }, { status: 400 });
11  }
12
13  try {
14    const response = await yardiGet(`/itf_ResidentData.asp?tenantId=${tenantId}`);
15
16    if (!response.ok) {
17      return NextResponse.json(
18        { error: `Yardi API error: ${response.status}` },
19        { status: response.status }
20      );
21    }
22
23    const data = await response.json();
24
25    // Transform Yardi response to clean structure
26    // Note: actual field names depend on your Yardi configuration
27    const lease = {
28      tenantId: data.TenantID || data.t_id,
29      name: data.TenantName || `${data.t_first} ${data.t_last}`,
30      unit: data.UnitCode || data.u_id,
31      property: data.PropertyName,
32      leaseStart: data.LeaseFromDate || data.ls_from,
33      leaseEnd: data.LeaseToDate || data.ls_to,
34      monthlyRent: parseFloat(data.MonthlyRent || data.rent_amount || 0),
35      balance: parseFloat(data.Balance || data.balance_due || 0),
36      status: data.LeaseStatus || 'Active',
37    };
38
39    return NextResponse.json({ lease });
40  } catch (error) {
41    console.error('Yardi lease fetch error:', error);
42    return NextResponse.json(
43      { error: 'Failed to fetch lease data' },
44      { status: 500 }
45    );
46  }
47}
48
49// app/api/yardi/units/route.ts
50import { NextRequest, NextResponse } from 'next/server';
51import { yardiGet } from '@/lib/yardi';
52
53export async function GET(request: NextRequest) {
54  const { searchParams } = new URL(request.url);
55  const propertyId = searchParams.get('propertyId') || '';
56
57  try {
58    const path = `/itf_UnitAvailability.asp${propertyId ? `?propertyId=${propertyId}` : ''}`;
59    const response = await yardiGet(path);
60
61    if (!response.ok) {
62      throw new Error(`Yardi API error: ${response.status}`);
63    }
64
65    const data = await response.json();
66    const units = (data.Units || data.units || []).map((u: Record<string, unknown>) => ({
67      unitCode: u.UnitCode || u.u_code,
68      type: u.UnitType || u.unit_type,
69      bedrooms: u.Bedrooms || u.bed_cnt,
70      bathrooms: u.Bathrooms || u.bath_cnt,
71      sqft: u.SquareFeet || u.sq_ft,
72      rent: parseFloat((u.MarketRent || u.market_rent || '0') as string),
73      availableDate: u.AvailableDate || u.avail_date,
74      status: u.VacancyStatus || u.status,
75    }));
76
77    return NextResponse.json({ units });
78  } catch (error) {
79    console.error('Yardi units fetch error:', error);
80    return NextResponse.json(
81      { error: 'Failed to fetch unit availability' },
82      { status: 500 }
83    );
84  }
85}

With your API routes created and pushed to GitHub, configure the Yardi credentials in Vercel. Open the Vercel Dashboard, navigate to your project, click Settings, then Environment Variables. Add four variables: YARDI_USERNAME (your Yardi service account username), YARDI_PASSWORD (the corresponding password — this is sensitive, ensure no NEXT_PUBLIC_ prefix is used), YARDI_SERVER_NAME (the database server name your Yardi administrator provided, used in request headers), and YARDI_API_BASE_URL (the full base URL of your Yardi API, e.g., https://your-company.yardicloud.com/voyager/your-database). Set all variables for Production, Preview, and Development environments. Note that for security, you may want to restrict the Preview environment to use a separate Yardi sandbox or staging environment rather than production data. After saving variables, trigger a new Vercel deployment. Once deployed, test the portal by accessing your Vercel URL and verifying that API routes return data from Yardi. If your portal requires tenant authentication (to ensure tenants only see their own data), you'll need to add an auth layer using Clerk, Auth.js, or another authentication provider — the Yardi API routes should validate the logged-in user's tenant ID against the data being requested before proxying to Yardi.