How to Integrate Autopilot with V0

Ortto's API authentication uses a per-data-source API key passed as a header in every request. Finding the correct key and base URL requires navigating to the right section of the Ortto dashboard. Log in to Ortto at app.ortto.com. In the left sidebar, click Settings (the gear icon), then select API keys. You will see a list of API keys associated with your account's data sources. If you have not created an API key yet, click New API key, select the data source you want to connect to (typically your main data source), and copy the generated key. Next, identify your account's region. Ortto is deployed in three regions: US, EU, and AU. Your account's region is displayed in the Ortto dashboard URL — if your URL is app.ortto.com it is US, if it shows eu.ortto.com it is EU. The base URL for your API calls will be: - US: https://api.ap3api.com - EU: https://eu.ap3api.com - AU: https://au.ap3api.com Using the wrong region URL will result in authentication failures even with a valid API key, so this is important to get right. Also note the IDs of any journeys you want to trigger programmatically. In Ortto, open the journey, click on the journey trigger block, and look for an entry trigger type called 'API trigger'. The journey needs to have an API trigger entry point configured for your API calls to enroll contacts into it. The journey ID is visible in the URL when you have the journey open.

Use V0 to generate the frontend form or signup component that will capture user information and send it to Ortto. V0 produces polished, accessible form components with Tailwind CSS and shadcn/ui that you can customize directly in the V0 chat. When writing your V0 prompt, describe exactly which fields you need, what validation you want (required fields, email format, etc.), and what the success and error states should look like. Be explicit about the API endpoint the form should submit to — your planned /api/ortto/signup or /api/ortto/lead-capture route. For multi-step forms or forms with conditional fields (e.g., show a company name field only when the user selects 'Business' for account type), V0 can generate these with React state management. Keep the form logic client-side and only send the final complete submission to the API route. One V0 limitation to keep in mind: V0 generates the form submission logic using fetch() but may not handle all edge cases like network timeouts or duplicate submissions. Review the generated submission handler to ensure it disables the submit button during the API call and re-enables it on both success and error to prevent duplicate submissions.

Create an API route at app/api/ortto/subscribe/route.ts (or the path that matches your frontend's fetch call). This route receives form data from the browser, validates it server-side, then calls the Ortto People API to create or update a person record. The Ortto People API endpoint is POST /v1/person/merge — this endpoint creates a new person if the email does not exist, or updates the existing person record if it does. The request body uses an 'attributes' object where contact data is stored using Ortto's field format: field names are prefixed with their type (str:, dbl:, int:, bool:, dte:, geo:). Standard fields like email use the key str::email, first name uses str::first (these exact field names are required by Ortto's API). The API key is passed as the X-Api-Key header. All requests must be HTTPS. If you want to trigger an Ortto journey when the contact is created, include a 'trigger_journey_run' field in the request with the journey's trigger ID. Handle rate limiting gracefully: Ortto's API has rate limits that vary by plan. If you receive a 429 response, return a 429 to the frontend with a user-friendly error message. Also validate the email format server-side in the API route even if the frontend validates it too — defense in depth prevents malformed data from reaching Ortto.

1// app/api/ortto/subscribe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ORTTO_BASE_URL = process.env.ORTTO_BASE_URL || 'https://api.ap3api.com';
5
6export async function POST(request: NextRequest) {
7  try {
8    const body = await request.json();
9    const { email, firstName } = body;
10
11    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
12      return NextResponse.json(
13        { error: 'Valid email is required' },
14        { status: 400 }
15      );
16    }
17
18    const orttoPayload = {
19      async: false,
20      merge_by: ['str::email'],
21      people: [
22        {
23          fields: {
24            'str::email': email,
25            ...(firstName ? { 'str::first': firstName } : {}),
26          },
27        },
28      ],
29    };
30
31    const response = await fetch(`${ORTTO_BASE_URL}/v1/person/merge`, {
32      method: 'POST',
33      headers: {
34        'Content-Type': 'application/json',
35        'X-Api-Key': process.env.ORTTO_API_KEY!,
36      },
37      body: JSON.stringify(orttoPayload),
38    });
39
40    if (!response.ok) {
41      const errorText = await response.text();
42      console.error('Ortto API error:', response.status, errorText);
43      return NextResponse.json(
44        { error: 'Failed to subscribe' },
45        { status: 500 }
46      );
47    }
48
49    return NextResponse.json({ success: true });
50  } catch (error) {
51    console.error('Subscribe route error:', error);
52    return NextResponse.json(
53      { error: 'Internal server error' },
54      { status: 500 }
55    );
56  }
57}

Your Ortto API route requires environment variables for authentication and the correct regional API base URL. Add them in Vercel Dashboard → Settings → Environment Variables with scope set to Production, Preview, and Development. ORTTO_API_KEY: the API key you generated in Ortto Settings → API keys. This is a server-side secret — never add a NEXT_PUBLIC_ prefix. The Ortto API key gives full read and write access to your Ortto data source, so treat it with the same care as a database password. ORTTO_BASE_URL: the base URL for your Ortto account's region. Use https://api.ap3api.com for US accounts, https://eu.ap3api.com for EU accounts, or https://au.ap3api.com for AU accounts. Making this an environment variable rather than hardcoding it in your route means you can easily switch regions if needed and avoid hardcoding a URL that might change. For local development, create a .env.local file with these same variables. V0-generated Next.js projects include .env.local in .gitignore, so your credentials will not be committed to GitHub. After saving the variables in Vercel, trigger a redeployment. Test the integration end-to-end by submitting the form on your live Vercel URL and then checking Ortto → People to confirm the contact appeared.

1# .env.local (for local development only — never commit this file)
2ORTTO_API_KEY=your_ortto_api_key_here
3ORTTO_BASE_URL=https://api.ap3api.com