How to Integrate Mindbody with V0

Open V0 at v0.dev and describe the class schedule interface you want to build. V0 will generate a Next.js React component with realistic placeholder data so you can see the design before connecting real Mindbody data. Be specific about the layout — weekly calendar vs daily list, card format, booking button placement — so the generated code matches your vision closely. V0 will also scaffold app/api/mindbody/route.ts as a stub. Critically, tell V0 in your prompt that the data comes from /api/mindbody/classes so it wires the fetch call correctly in the component. Once V0 generates the initial design, you can refine it with follow-up prompts asking for specific design changes like color scheme, font size, or layout adjustments. The Design Mode in V0 lets you tweak spacing and typography without spending credits. When satisfied, click Deploy in V0 to push to Vercel — you'll configure real credentials in the next steps.

The Mindbody Public API uses API key authentication passed in the request headers. For fetching class schedules, you call the GET /class/classschedules or GET /class/classes endpoint with your API key in the Api-Key header and the SiteId in the SiteId header. Create the API route at app/api/mindbody/classes/route.ts. The route fetches upcoming classes for the specified site from Mindbody's API and returns the relevant fields to the frontend. You need to handle pagination since Mindbody returns results in pages — for a studio with many classes, you may need to pass StartDateTime and EndDateTime parameters to filter the date range. The Mindbody API base URL for v6 is https://api.mindbodyonline.com/public/v6. Parse the response to extract class name, instructor, start time, end time, total booking count, and available booking count. Return this as a clean array to the frontend rather than the raw Mindbody response format, which can be deeply nested.

1import { NextResponse } from 'next/server';
2
3const MINDBODY_BASE = 'https://api.mindbodyonline.com/public/v6';
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url);
7  const startDate = searchParams.get('startDate') ?? new Date().toISOString().split('T')[0];
8  const endDate = searchParams.get('endDate') ?? startDate;
9
10  try {
11    const response = await fetch(
12      `${MINDBODY_BASE}/class/classes?StartDateTime=${startDate}&EndDateTime=${endDate}&Limit=50`,
13      {
14        headers: {
15          'Api-Key': process.env.MINDBODY_API_KEY!,
16          'SiteId': process.env.MINDBODY_SITE_ID!,
17          'Content-Type': 'application/json',
18        },
19      }
20    );
21
22    if (!response.ok) {
23      const err = await response.text();
24      return NextResponse.json({ error: err }, { status: response.status });
25    }
26
27    const data = await response.json();
28    const classes = (data.Classes ?? []).map((cls: Record<string, unknown>) => ({
29      id: cls.Id,
30      name: (cls.ClassDescription as Record<string, unknown>)?.Name,
31      instructor: `${((cls.Staff as Record<string, unknown>)?.FirstName ?? '')} ${((cls.Staff as Record<string, unknown>)?.LastName ?? '')}`.trim(),
32      startDateTime: cls.StartDateTime,
33      endDateTime: cls.EndDateTime,
34      totalBooked: cls.TotalBooked,
35      maxCapacity: cls.MaxCapacity,
36      spotsAvailable: (cls.MaxCapacity as number) - (cls.TotalBooked as number),
37    }));
38
39    return NextResponse.json({ classes });
40  } catch (error) {
41    console.error('Mindbody API error:', error);
42    return NextResponse.json({ error: 'Failed to fetch classes' }, { status: 500 });
43  }
44}

Booking a class in Mindbody requires a user token — a client-specific authentication token obtained by calling Mindbody's /usertoken/issue endpoint with the client's Mindbody username and password. This is a two-step flow: first authenticate the user to get a token, then use that token in the booking request. Create two route handlers: one at app/api/mindbody/auth/route.ts for issuing user tokens, and one at app/api/mindbody/book/route.ts for creating bookings. The auth route takes the user's credentials (sent from your frontend login form) and returns a user token which the frontend stores in memory or a secure cookie — never in localStorage. The booking route receives the class ID and user token, then calls the Mindbody POST /class/addclienttoclass endpoint. Note that Mindbody also has a concept of 'client service' required for booking — the client must have a valid pass or membership. Handle the error case where the client has no valid services and return a clear message so the frontend can prompt the user to purchase.

1// app/api/mindbody/auth/route.ts
2import { NextResponse } from 'next/server';
3
4const MINDBODY_BASE = 'https://api.mindbodyonline.com/public/v6';
5
6export async function POST(request: Request) {
7  const { username, password } = await request.json();
8
9  const response = await fetch(`${MINDBODY_BASE}/usertoken/issue`, {
10    method: 'POST',
11    headers: {
12      'Api-Key': process.env.MINDBODY_API_KEY!,
13      'SiteId': process.env.MINDBODY_SITE_ID!,
14      'Content-Type': 'application/json',
15    },
16    body: JSON.stringify({
17      Username: username,
18      Password: password,
19    }),
20  });
21
22  const data = await response.json();
23  if (!response.ok || !data.AccessToken) {
24    return NextResponse.json({ error: 'Authentication failed' }, { status: 401 });
25  }
26
27  return NextResponse.json({ token: data.AccessToken });
28}

With the API routes created, configure the required credentials in Vercel. Navigate to your Vercel project at vercel.com, select your project, then go to Settings → Environment Variables. Add MINDBODY_API_KEY with your Mindbody developer API key — this is the key you received when your developer account was approved. Add MINDBODY_SITE_ID with the numerical Site ID of the Mindbody business location you're integrating with. You can find the Site ID in the Mindbody business portal or in the API documentation for your partner account. Both variables should be set for Production and Preview environments. For local development, create a .env.local file in your project root with the same keys. After adding variables, go to the Deployments tab and click Redeploy to apply the new configuration. If you are integrating with multiple Mindbody locations (multi-site), you can make the Site ID dynamic by passing it as a parameter from the frontend and validating it against an allowlist in your API route rather than hardcoding a single value.

1# .env.local (for local development only — set in Vercel Dashboard for production)
2MINDBODY_API_KEY=your_mindbody_api_key_here
3MINDBODY_SITE_ID=-99  # Use -99 for sandbox testing

With the API routes in place and credentials configured, update your V0-generated frontend to fetch real class data and handle the booking flow end-to-end. The class schedule component should call GET /api/mindbody/classes with the selected date on page load and whenever the date picker changes. Display the returned classes in your card layout. When a user clicks 'Book Class', check if they're logged in (have a stored user token). If not, show a login modal that calls POST /api/mindbody/auth. Once authenticated, call POST /api/mindbody/book with the class ID and user token. After a successful booking, refresh the class list so the spot count updates immediately. Test the complete flow in the Vercel preview deployment against the Mindbody sandbox (Site ID -99). Common issues at this stage include CORS errors (which don't apply because all Mindbody calls are server-side), date format mismatches (Mindbody expects ISO 8601 format: 2026-04-01T00:00:00), and booking failures due to the sandbox client having no valid service/pass. For production deployments with complex multi-location setups, RapidDev can help architect the multi-site routing logic.