fal - Vercel Integration

Daniel Rochetti

• 2 min read
fal - Vercel Integration

We are thrilled to announce our official integration with Vercel! This partnership marks a significant step forward in our commitment to offering a seamless, efficient web development experience.

At fal, we believe it’s important to provide developers with all the tools they need to enable generative AI in their apps. This integration represents an important step in that direction.

Key Features

  • Seamless Integration: Vercel environment variables are automatically managed, offering developers a hassle-free setup process.
  • Built-In Proxy for Next.js: Security is paramount. Our integration includes a built-in API proxy to keep your credentials on the server-side to ensure they remain protected when using our client library.
  • Next.js Support: Fully compatible with Next.js, our integration leverages the latest features and functionalities to ensure best practices are used.
  • First Class JavaScript/TypeScript Support: Client library, with TypeScript support, that makes it simple to start using fal APIs in your React/Next.js components.
  • Fastest Image Generation: fal provides the fastest endpoints for image generation and more!

Automatically Managed API Key

The integration creates a new API key for each Vercel project you wish to integrate with fal and configures it as an environment variable named FAL_KEY in your project. This keeps your fal account safe by isolating your Vercel projects from one-another

Starter Kit

You can integrate fal into your existing Vercel projects or start a new one using our Next.js template. We also provide a CLI utility that creates the Next.js project for you:

npx @fal-ai/create-app

Protecting Your API Key

The integration includes a built-in API proxy to ensure your credentials remain protected when using our client library. The fal library’s route object contains standard Next.js route handlers and injects your fal API key into the request. To create a proxied API route in your app, e.g. app/api/proxy/route.js, all you have to do is:

import { route } from '@fal-ai/serverless-proxy/nextjs';

export const { GET, POST } = route;

Since these are just standard Next.js route handlers under the hood, you can customize them all you want by adding your own custom logic, such as rate limiting, caching, etc.

For support for Next.js’s Pages Router support, check out our Next.js integration guide.

Client Library

The client library is designed to make it simple to start using fal’s APIs in your JS stack. It includes TypeScript support and is fully compatible with React.

import * as fal from '@fal-ai/serverless-client';

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

const result: Result = await fal.subscribe('fal-ai/fast-sdxl', {
  input: {
    prompt: 'an astronaut in the jungle, cold color pallete with butterflies in the background, highly detailed, 8k',
  },
});

Next Steps

  1. Visit the Vercel+fal integration page to setup your project.
  2. Check out our Next.js integration guide. It provides a detailed, step-by-step guide to help get you started with both Pages Router and App Router support.
  3. Explore our model APIs. We offer a wide range of models to help you build your next AI project.

Join the Future of AI + Web Development

Embrace the power of fal and Vercel integration. Stay tuned for more updates and enhancements!

This integration reflects our ongoing commitment to innovation and developer-friendly solutions. We can’t wait to see what you build with it!