This guide walks you through building a high-converting capture page for Lumail in less than an hour using [V0.dev](https://v0.dev). You will design the page with V0's AI UI builder, connect the form to Lumail's Subscribers API, and keep your organization token secure.
## Why use V0.dev?
- **Rapid iteration** – generate production-grade Next.js layouts by describing the outcome you want.
- **Consistency** – reuse Lumail branding tokens and typography in the prompt to keep the landing page on-brand.
- **Developer handoff** – V0 produces file-based Next.js code you can drop into this repository or a standalone capture micro-site.
## Prerequisites
- A Lumail organization with permission to create API tokens.
- A V0.dev account connected to GitHub (recommended) or ready to download generated code.
- Node.js 18+ and `pnpm` if you plan to run the generated project locally.
- A fresh API token dedicated to this capture page.
### Generate a Lumail API token
1. Open your Lumail organization dashboard and navigate to **Settings → API Tokens** (the URL will be `/orgs/[your-org]/settings/tokens`).
2. Click **Generate Token** and create a token named `v0-capture-page`.
3. Copy the token **immediately**—it will only be shown once during creation.
4. Store it securely as an environment variable (we'll set this up in Step 3).
> **Security Warning**: Never expose your API token in client-side code. Always keep it server-side using environment variables and API routes.
> Tokens are validated server-side through `tokenRoute` in `app/api/v1/subscribers/route.ts`, which delegates to `getCurrentOrgFromBearer` to ensure every request is tied to the correct organization and enforces plan limits before creating a subscriber.
## Step 1 — Prompt V0 for the layout
1. Create a new V0 project and select **Next.js App Router**.
2. In the prompt, describe your target audience, tone, and conversion goal. Example prompt:
> "Design a minimal capture page for Lumail, an AI-assisted email marketing platform. Hero with headline, subheading, email capture form, three value props with icons, customer logos, and a final CTA. Visual style: clean, trustworthy, gradient accents in Lumail teal (`#12A6D1`)."
3. Let V0 generate the initial layout. If needed, iterate with follow-up prompts (e.g., "make hero background a subtle gradient," "add testimonials section").
4. Save the iteration you like as `app/(marketing)/capture/page.tsx`. V0 will create the file structure for you.
## Step 2 — Add the capture form block
1. Ask V0 to insert a form component underneath the hero copy:
> "Add a form with an email input, optional first name field, and a submit button labeled `Join the Lumail waitlist`."
2. Confirm the generated component uses `type="email"` validation and has accessible labels.
3. Rename the form component to `CaptureForm` to keep the file readable.
4. Add hidden metadata fields if you need tags or source tracking:
```tsx
```
The Subscribers API will merge `tags` and `fields` with the defaults defined in `SubscriberSchema` (`app/api/v1/subscribers/_schemas/api-subscriber.schema.ts`).
## Step 3 — Connect the form to Lumail securely
**Never expose your API token in client-side code.** Always create a backend API route that stores the token server-side.
### 3.1 Set up environment variables
Create a `.env.local` file in your project root:
```bash
LUMAIL_API_TOKEN=your_token_here
```
> Add `.env.local` to your `.gitignore` to prevent committing secrets.
### 3.2 Create a backend API route
Create `app/api/subscribe/route.ts` to handle form submissions securely:
```tsx
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
try {
// Parse the incoming request
const body = await request.json();
// Call Lumail API with your token (server-side only)
const response = await fetch("https://lumail.io/api/v1/subscribers", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.LUMAIL_API_TOKEN}`,
},
body: JSON.stringify({
email: body.email,
name: body.name,
tags: body.tags || [],
fields: body.fields || {},
replaceTags: false,
}),
});
if (!response.ok) {
const error = await response.json();
return NextResponse.json(
{ error: error.message || "Failed to subscribe" },
{ status: response.status },
);
}
const data = await response.json();
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "Unable to subscribe right now." },
{ status: 500 },
);
}
}
```
**What this does:**
- Receives form data from your frontend
- Calls Lumail's API with the token stored in `.env.local`
- Returns the response to the frontend
- **Token stays on the server** and is never exposed to the browser
### 3.3 Call the API route from your form
Update your V0-generated form component:
```tsx
"use client";
import { useState } from "react";
export function CaptureForm() {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState("");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setMessage("");
try {
const response = await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email,
name,
tags: ["v0-capture", "waitlist"],
fields: { source: "lumail.io/v0" },
}),
});
const data = await response.json();
if (!response.ok) {
setMessage(data.error || "Something went wrong");
} else {
setMessage("You're in! Check your inbox.");
setEmail("");
setName("");
}
} catch (error) {
setMessage("Unable to subscribe right now.");
} finally {
setLoading(false);
}
};
return (
);
}
```
### 3.4 Better approach with Zod validation
For production apps, add validation using Zod to match Lumail's API schema:
1. Install Zod: `pnpm add zod`
2. Update `app/api/subscribe/route.ts`:
```tsx
import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
// This schema matches Lumail's backend validation
const SubscriberSchema = z.object({
email: z.string().email(),
name: z.string().optional().nullable(),
phone: z.string().optional().nullable(),
tags: z.array(z.string()).optional().default([]),
fields: z.record(z.string().optional().nullable()).optional(),
replaceTags: z.boolean().optional(),
});
export async function POST(request: NextRequest) {
try {
const body = await request.json();
// Validate the request body
const validated = SubscriberSchema.safeParse(body);
if (!validated.success) {
return NextResponse.json(
{ error: "Invalid form data", details: validated.error.errors },
{ status: 400 },
);
}
const response = await fetch("https://lumail.io/api/v1/subscribers", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.LUMAIL_API_TOKEN}`,
},
body: JSON.stringify(validated.data),
});
if (!response.ok) {
const error = await response.json();
return NextResponse.json(
{ error: error.message || "Failed to subscribe" },
{ status: response.status },
);
}
const data = await response.json();
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "Unable to subscribe right now." },
{ status: 500 },
);
}
}
```
### 3.5 Production-ready approach with up-fetch
For even better type safety and automatic validation, use `up-fetch`:
1. Install: `pnpm add up-fetch`
2. Create `lib/upfetch.ts`:
```tsx
import { up } from "up-fetch";
export const upfetch = up(fetch);
```
3. Update `app/api/subscribe/route.ts`:
```tsx
import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { upfetch } from "@/lib/upfetch";
const SubscriberSchema = z.object({
email: z.string().email(),
name: z.string().optional().nullable(),
tags: z.array(z.string()).optional().default([]),
fields: z.record(z.string().optional().nullable()).optional(),
});
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const validated = SubscriberSchema.safeParse(body);
if (!validated.success) {
return NextResponse.json({ error: "Invalid form data" }, { status: 400 });
}
// upfetch automatically validates response and infers types
const data = await upfetch("https://lumail.io/api/v1/subscribers", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.LUMAIL_API_TOKEN}`,
},
body: validated.data,
schema: z.object({
success: z.literal(true),
subscriber: z.object({
id: z.string(),
email: z.string().email(),
}),
}),
});
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "Unable to subscribe right now." },
{ status: 500 },
);
}
}
```
**Benefits of up-fetch:**
- Automatic JSON parsing and serialization
- Response validation with Zod schemas
- Full TypeScript type inference
- Better error handling
> When the request reaches `POST /api/v1/subscribers`, Lumail's handler automatically infers the organization from the token, applies plan limits, and returns the normalized subscriber record.
## Step 4 — Tag submissions for downstream workflows
Leverage tags and fields so the new subscribers drop into the right automations:
- `tags: ["v0-capture", "marketing-site"]` to segment the list.
- `fields[source] = window.location.pathname` captured server-side to track the exact page.
- `fields[utm_campaign]` if you pipe UTM parameters into hidden inputs.
Because the backend replaces tags only if `replaceTags: true`, you can safely append campaign-specific tags without wiping existing labels.
## Step 5 — Deploy and test
### Local testing
1. Make sure your `.env.local` file contains your `LUMAIL_API_TOKEN`.
2. Run the dev server: `pnpm dev` or `npm run dev`.
3. Test the form by submitting a real email address.
4. Check your Lumail dashboard at `/orgs/[your-org]/subscribers` to confirm the subscriber was added.
5. Trigger validation errors (empty email, invalid format) to ensure error handling works.
### Deploy to Vercel
1. Push your V0 project to GitHub.
2. Import the repository into Vercel.
3. **Add environment variable**: In Vercel project settings, go to **Settings → Environment Variables**.
4. Add `LUMAIL_API_TOKEN` with your token value for **Production**, **Preview**, and **Development** environments.
5. Deploy the project.
6. Test the live form to ensure it's working in production.
> **Tip**: When you rotate your API token in Lumail, remember to update it in Vercel's environment variables and redeploy.
## Operational tips
- Rotate the token periodically. Lumail tokens are stored hashed in Prisma (`apiToken` table) and tied to plan limits, so revoking a leaked token immediately blocks unauthorized capture pages.
- Instrument analytics (PostHog or Vercel Web Analytics) to measure form conversion. V0 generates client components that accept additional tracking hooks.
- Consider adding a double opt-in flow by redirecting to a `/thank-you` page that explains what to expect next.
## Recap
By combining V0.dev's AI-generated UI with Lumail's secure subscriber endpoint, you can launch bespoke capture experiences quickly while keeping organization tokens guarded on the server.
### Implementation approaches summary
1. **Basic (Step 3.2-3.3)**: Plain fetch API with Next.js API routes
- Simple and straightforward
- No extra dependencies
- Good for prototypes and simple projects
- Manual validation and error handling
2. **Better (Step 3.4)**: Add Zod validation
- Schema validation matches Lumail's API
- Catches errors before making API calls
- Better error messages for users
- Requires: `zod`
3. **Production-ready (Step 3.5)**: Zod + up-fetch
- Full type safety with TypeScript inference
- Automatic JSON handling
- Response validation
- Cleaner error handling
- Requires: `zod`, `up-fetch`
**Choose the approach that fits your project:**
- Building a quick MVP? Start with the basic approach (3.2-3.3)
- Launching to real users? Use Zod validation (3.4)
- Production app with TypeScript? Use up-fetch (3.5)
Reuse this pattern for campaign-specific landing pages, webinar waitlists, or partner co-marketing forms without rewriting the integration.
## Related Documentation
- [API Tokens Reference](/docs/api-reference/api-tokens) - Complete token management guide
- [Create API Token Tutorial](/docs/tutorials/create-api-token) - Step-by-step token creation
- [Create Subscriber API](/docs/api-reference/api-subscribers-post) - API endpoint reference
- [Tags API](/docs/api-reference/api-tags-get) - Manage subscriber tags
- [Workflows](/docs/workflows) - Trigger workflows from form submissions
- [Web Domains](/docs/domains/web-domains) - Host capture pages on custom domains