Launch of fal AI integration on Vercel

We are excited to announce the release of our latest AI native integration on Vercel, designed to simplify access to GenAI models on fal for Vercel users.

Unlock New Possibilities with Our Integration

• Access to latest video models: Transform static images into dynamic video content with our state-of-the-art inference capabilities. Our integration lets you easily access most powerful models available today.
• GenAI Model Training: Our platform provides ideal tools for training LoRAs. Whether developing your own variants of popular image models avatars or even latest video models, our integration makes it easy and fast.
• Simplified Deployment and Billing: By integrating with Vercel, we’ve streamlined the deployment process, allowing you to push GenAI applications to production effortlessly. Vercel handles all billing, offering a unified and efficient payment solution that lets you concentrate on innovation rather than administrative tasks.

Developer setup guide

Bring fal into an existing Next.js application, or start a new project with npx create-next-app@latest. The steps below connect your app to fal while keeping its API key on the server.

1. Connect your Vercel project

Add fal through the Vercel Marketplace and connect the project you want to use. Complete the provider setup, then confirm that FAL_KEY is available in the project's environment variables. For local development, link your project and pull its environment configuration:

vercel link
vercel env pull .env.local

Keep .env.local out of version control. If you are setting up fal without the Vercel integration, create a key in your fal dashboard and add it as FAL_KEY in your local and deployed server environments. Never put it in a NEXT_PUBLIC_ variable.

2. Install the client and proxy

npm install @fal-ai/client @fal-ai/server-proxy

3. Add a server-side proxy

For the Next.js App Router, create app/api/fal/proxy/route.ts (under src/ if your app uses it):

import { createRouteHandler } from "@fal-ai/server-proxy/nextjs";

export const { GET, POST, PUT } = createRouteHandler();

The proxy reads FAL_KEY on the server, so browser requests do not expose your credentials. Its standard Next.js handlers can be wrapped with your application's authentication, rate limits, or other request logic before you open generation to users.

Using the Pages Router instead? Create pages/api/fal/proxy.ts with:

import { createPageRouterHandler } from "@fal-ai/server-proxy/nextjs";

export default createPageRouterHandler();

Choose the router that matches your application; you do not need both routes.

4. Call fal from your application

Configure the JavaScript/TypeScript client to use the same proxy path. Call this function from your application's generation action:

import { fal } from "@fal-ai/client";

fal.config({ proxyUrl: "/api/fal/proxy" });

export async function generateImage(prompt: string) {
  const result = await fal.subscribe("fal-ai/flux/dev", {
    input: { prompt, image_size: "square_hd" },
  });

  return result.data.images[0].url;
}

Use the returned image URL in your interface. Add loading and error states around the call so users can see when their request is processing or needs another try. To use a different model, follow that model's input and output schema in the fal model gallery.

5. Deploy and build further

Confirm that your deployed Vercel environment has FAL_KEY, then deploy your app. The same client-and-proxy pattern gives you a starting point for adding image generation, video workflows, and model training to your product.

Explore our image-to-video demo for a more complete application. For ongoing setup guidance, see the fal Next.js documentation and Vercel's fal integration guide.