Fal
How-to
1 min read

Vercel Fal IntegrationMarketplace

Learn how to integrate Fal with Vercel.
Table of Contents
Next.js (/app)

Fal enables the development of real-time AI applications with a focus on rapid inference speeds, achieving response times under ~120ms. Specializing in diffusion models, Fal has no cold starts and a pay-for-what-you-use pricing model.

Use cases

You can use the Vercel and Fal integration to power a variety of AI applications, including:

  • Text-to-image applications: Use Fal to integrate real-time text-to-image generation in applications, enabling users to create complex visual content from textual descriptions instantly
  • Real-time image processing: Use Fal for applications requiring instantaneous image analysis and modification, such as real-time filters, enhancements, or object recognition in streaming video
  • Depth maps creation: Use Fal's AI models for generating depth maps from images, supporting applications in 3D modeling, augmented reality, or advanced photography editing, where understanding the spatial relationships in images is crucial

Available models

Fal provides a diverse range of AI models designed for high-performance tasks in image and text processing.

Stable Diffusion XL

Type: Image

Run SDXL at the speed of light

Creative Upscaler

Type: Image

Create creative upscaled images.

Stable Diffusion XL

Type: Image

Run SDXL at the speed of light

Getting started

The Vercel Fal integration can be accessed through the AI tab on your Vercel dashboard.

Prerequisites

To follow this guide, you'll need the following:

Add the provider to your project

  1. Navigate to the AI tab in your Vercel dashboard
  2. Select Fal from the list of providers, and press Add
  3. Review the provider information, and press Add Provider
  4. You can now select which projects the provider will have access to. You can choose from All Projects or Specific Projects
    • If you select Specific Projects, you'll be prompted to select the projects you want to connect to the provider. The list will display projects associated with your scoped team
    • Multiple projects can be selected during this step
  5. Select the Connect to Project button
  6. You'll be redirected to the provider's website to complete the connection process
  7. Once the connection is complete, you'll be redirected back to the Vercel dashboard, and the provider integration dashboard page. From here you can manage your provider settings, view usage, and more
  8. Pull the environment variables into your project using Vercel CLI
    terminal
    vercel env pull .env.development.local
  9. Install the providers package
    pnpm
    yarn
    npm
    pnpm i @fal-ai/serverless-client
  10. Connect your project using the code below:
    Next.js (/app)
    Next.js (/pages)
    SvelteKit
    Other frameworks
    app/api/fal/proxy/route.ts
    // app/api/fal/proxy/route.ts
    

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

    export const { GET, POST } = route;
  1. Add the provider to your page using the code below:
    Next.js (/app)
    Next.js (/pages)
    SvelteKit
    app/sdxl/page.tsx
    // app/sdxl/page.tsx
    

    import * as fal from '@fal-ai/serverless-client';
    import { useMemo, useState } from 'react';
    

    fal.config({
      // see the route.ts for the proxy setup
      proxyUrl: '/api/fal/proxy',
    });
    

    type Image = {
      url: string;
      file_name: string;
      file_size: number;
    };
    type Result = {
      images: Image[];
    };
    

    const DEFAULT_PROMPT =
      'an astronaut riding a horse on mars, hd, dramatic lighting, detailed';
    

    function Page() {
      const [prompt, setPrompt] = useState<string>(DEFAULT_PROMPT);
      const [loading, setLoading] = useState(false);
      const [error, setError] = useState<Error | null>(null);
      const [result, setResult] = useState<Result | null>(null);
    

      const image = useMemo(() => {
        if (!result) {
          return null;
        }
        return result.images[0];
      }, [result]);
    

      const reset = () => {
        setLoading(false);
        setError(null);
        setResult(null);
      };
    

      const generateImage = async () => {
        reset();
        setLoading(true);
        try {
          const result: Result = await fal.subscribe('fal-ai/fast-sdxl', {
            input: {
              prompt,
            },
          });
          setResult(result);
        } catch (error: any) {
          setError(error);
        } finally {
          setLoading(false);
        }
      };
      return (
        <main>
          <div>
            <label htmlFor="prompt">Prompt</label>
            <input
              id="prompt"
              name="prompt"
              placeholder="Imagine..."
              value={prompt}
              autoComplete="off"
              onChange={(e) => setPrompt(e.target.value)}
              onBlur={(e) => setPrompt(e.target.value.trim())}
            />
          </div>
    

          <button
            onClick={(e) => {
              e.preventDefault();
              generateImage();
            }}
            disabled={loading}
          >
            {loading ? 'Generating...' : 'Generate Image'}
          </button>
    

          {error && <div>{error.message}</div>}
    

          <div>
            <div>
              {image && (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={image.url} alt="" />
              )}
            </div>
          </div>
        </main>
      );
    }
    

    export default Page;

More resources

fal Website

Learn more about fal by visiting their website.

fal Pricing

Learn more about fal pricing.

fal Documentation

Visit the fal documentation.

Last updated on May 3, 2024
Previous
Elevenlabs
Next
Perplexity