How to Integrate Practo with V0

Open V0 at v0.dev and describe the healthcare booking interface you want to build. Practo's data model centers on practitioners (doctors), their practices (clinics/hospitals), and consultation types (in-person, video, text). When describing your UI to V0, be specific about the search filters your patients need — specialty is usually the primary filter, followed by location (city and locality), consultation type (in-clinic vs. online), and language spoken. Doctor profile cards should display the information patients use to make booking decisions: qualifications (degrees like MBBS, MD), years of experience, specialization, consultation fees in INR, star ratings with review counts, and clinic name and address. V0 is well-suited to generate healthcare-specific UI elements like specialty selector dropdowns with medical icons, availability calendar components showing date slots, and doctor profile cards with credentialing information. For the booking flow, decide early whether you will redirect patients to Practo for the actual booking (simpler) or implement full appointment management within your app (requires deeper API access). For the redirect pattern, each doctor card simply has a 'Book on Practo' button that links to https://www.practo.com/doctor/{doctorId} — this handles all appointment confirmation, reminders, and telemedicine infrastructure on Practo's side. After generating the UI, push to GitHub via V0's Git panel.

Create the Next.js API route that searches Practo's practitioner database and returns doctor profiles for your search UI. The Practo API endpoint for doctor search accepts parameters including city, specialty, consultation type, and pagination offsets. The API uses your API key in the Authorization header and returns a JSON response with an array of practitioner objects. Each practitioner object includes the doctor's profile information (name, qualifications, experience, languages), their practice locations (clinics with addresses and maps coordinates), consultation fees by consultation type, availability summary (next available slot), and ratings and review counts from Practo's verified patient reviews. The Practo API is primarily designed for the Indian healthcare market — specialty names, qualification formats, and location data are structured around Indian healthcare conventions. City names in Practo's system use standardized names (Mumbai, Bengaluru, etc.) and support locality-level filtering within major cities. For the search interface, pass the user's selected specialty and city directly to the Practo API. The API returns paginated results — use the total count for building pagination controls that show how many doctors match the search criteria. For online consultation listing, the consultationType parameter filters to doctors who offer video or chat consultations on Practo, which is particularly relevant for telemedicine use cases.

1// app/api/practo/doctors/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const PRACTO_API_BASE = 'https://api.practo.com/v1';
5
6interface PractoDoctor {
7  practitioner_id: string;
8  full_name: string;
9  specializations: string[];
10  qualifications: string[];
11  experience_years: number;
12  languages: string[];
13  rating: number;
14  review_count: number;
15  practices: Array<{
16    practice_id: string;
17    name: string;
18    address: string;
19    city: string;
20    locality: string;
21    consultation_fees: number;
22    currency: string;
23  }>;
24  online_consultation?: {
25    enabled: boolean;
26    fee: number;
27    currency: string;
28  };
29  profile_url: string;
30  photo_url?: string;
31  next_availability?: string;
32}
33
34export async function GET(request: NextRequest) {
35  const apiKey = process.env.PRACTO_API_KEY;
36
37  if (!apiKey) {
38    return NextResponse.json(
39      { error: 'Practo API key not configured' },
40      { status: 500 }
41    );
42  }
43
44  const { searchParams } = new URL(request.url);
45  const specialty = searchParams.get('specialty') ?? '';
46  const city = searchParams.get('city') ?? 'Bengaluru';
47  const consultationType = searchParams.get('type') ?? 'clinic';
48  const page = parseInt(searchParams.get('page') ?? '1', 10);
49  const limit = parseInt(searchParams.get('limit') ?? '10', 10);
50
51  const params = new URLSearchParams({
52    city,
53    page: page.toString(),
54    limit: limit.toString(),
55    consultation_type: consultationType,
56  });
57
58  if (specialty) params.set('specialization', specialty);
59
60  try {
61    const response = await fetch(
62      `${PRACTO_API_BASE}/practitioners/search?${params.toString()}`,
63      {
64        headers: {
65          Authorization: `Bearer ${apiKey}`,
66          'Content-Type': 'application/json',
67          Accept: 'application/json',
68        },
69        next: { revalidate: 300 }, // Cache for 5 minutes
70      }
71    );
72
73    if (!response.ok) {
74      throw new Error(`Practo API error: ${response.status}`);
75    }
76
77    const data = await response.json() as {
78      practitioners: PractoDoctor[];
79      total: number;
80      page: number;
81    };
82
83    const doctors = (data.practitioners ?? []).map((doc) => {
84      const primaryPractice = doc.practices?.[0];
85
86      return {
87        id: doc.practitioner_id,
88        name: doc.full_name,
89        specialties: doc.specializations ?? [],
90        qualifications: doc.qualifications ?? [],
91        experience: doc.experience_years ?? 0,
92        languages: doc.languages ?? ['English', 'Hindi'],
93        rating: doc.rating ?? 0,
94        reviewCount: doc.review_count ?? 0,
95        clinicName: primaryPractice?.name ?? '',
96        address: primaryPractice?.address ?? '',
97        city: primaryPractice?.city ?? city,
98        locality: primaryPractice?.locality ?? '',
99        consultationFee: primaryPractice?.consultation_fees ?? 0,
100        currency: primaryPractice?.currency ?? 'INR',
101        onlineConsultation: doc.online_consultation?.enabled ?? false,
102        onlineFee: doc.online_consultation?.fee ?? 0,
103        profileUrl: doc.profile_url,
104        photoUrl: doc.photo_url ?? null,
105        nextAvailability: doc.next_availability ?? null,
106      };
107    });
108
109    return NextResponse.json({
110      doctors,
111      total: data.total ?? doctors.length,
112      page,
113    });
114  } catch (error) {
115    const message = error instanceof Error ? error.message : 'Unknown error';
116    console.error('Practo API error:', message);
117    return NextResponse.json(
118      { error: 'Failed to fetch doctors', details: message },
119      { status: 500 }
120    );
121  }
122}

Update your V0-generated search components to fetch from /api/practo/doctors and handle user interactions correctly. The specialty dropdown should trigger a new API call when the user selects a specialty, passing the selected value as the specialty query parameter. The city input should debounce API calls with a 400ms delay to avoid firing requests on every keystroke. The consultation type filter (in-clinic vs. online) maps to the type query parameter. For the booking flow, the simplest and most reliable approach is to deep-link from your 'Book Appointment' button to the doctor's Practo profile URL (doc.profileUrl from the API response). This sends patients to Practo's own appointment booking system which handles slot selection, patient information collection, consultation confirmation, and reminders. Your V0 app provides the discovery and search experience while Practo handles the booking transaction. This approach also means you avoid the complexity of handling patient health data directly in your Next.js app, which has significant regulatory implications under India's DPDPA. If you need to keep patients within your app for the full booking flow, this requires a deeper Practo partnership with access to availability and booking APIs — contact Practo's enterprise partnerships team. For the appointment availability preview ('Next Available: Today, 3:30 PM'), the Practo API returns next_availability as part of the practitioner search response, so you can display it without a separate API call.

Push your code to GitHub and configure Practo API credentials in Vercel. Open the Vercel Dashboard, select your project, and go to Settings → Environment Variables. Add PRACTO_API_KEY with your Practo API access token. This key should not have the NEXT_PUBLIC_ prefix since all Practo API calls happen server-side. If Practo provides both an API key and a partner ID, add both as PRACTO_API_KEY and PRACTO_PARTNER_ID. For production deployment, also add NEXT_PUBLIC_PRACTO_DEEP_LINK_BASE with the value https://www.practo.com if you need to construct Practo profile URLs on the client side. Set environment variables for Production and Preview environments, save, and trigger a redeployment. After deployment, test the doctor search by opening your Vercel deployment URL, searching for a common specialty like 'General Physician' in a major Indian city like 'Mumbai', and verifying that real doctor results load with correct consultation fees and profile links. Test the 'Book Appointment' button to confirm it deep-links to the correct Practo doctor profile. For a public-facing healthcare portal in India, ensure you have the appropriate legal disclosures about your relationship with Practo and that your site complies with India's DPDPA data protection requirements for any patient data your V0 app collects.