Next.js Integration

A step-by-step guide to integrating Visgate into a Next.js application using the App Router.

1. Install Packages

npm install @visgate_ai/client @visgate_ai/server-proxy

2. Set Environment Variables

Add your Visgate API key to .env.local:

.env.local

VISGATE_API_KEY=vg-...

3. Create the Proxy Route

Create the catch-all route handler that forwards requests to Visgate:

app/api/visgate/[...path]/route.ts

export const maxDuration = 300;
export { GET, POST, PUT, DELETE, OPTIONS } from "@visgate_ai/server-proxy/next";

maxDuration = 300 gives 5 minutes for video generation. Adjust based on your needs.

4. Use the Client

In any client component or server action:

app/components/ImageGenerator.tsx

"use client";
 
import { Client } from "@visgate_ai/client";
import { useState } from "react";
 
const client = new Client({ proxyUrl: "/api/visgate" });
 
export function ImageGenerator() {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
 
  async function generate() {
    const result = await client.generate("a sunset over Istanbul", {
      model: "fal-ai/flux/schnell",
    });
    setImageUrl(result.imageUrl);
  }
 
  return (
    <div>
      <button onClick={generate}>Generate</button>
      {imageUrl && <img src={imageUrl} alt="Generated" />}
    </div>
  );
}

5. Video Generation

For video generation, use a longer timeout and async mode:

const client = new Client({
  proxyUrl: "/api/visgate",
  timeout: 300_000, // 5 minutes
});
 
const result = await client.videos.generate("fal-ai/veo3", "ocean waves", {
  durationSeconds: 6,
  preferAsync: true,
  skipGcsUpload: true,
});
 
if (result.status === "accepted") {
  // Poll for completion
  let status = await client.requests.get(result.requestId);
  while (status.status === "pending" || status.status === "processing") {
    await new Promise((r) => setTimeout(r, 3000));
    status = await client.requests.get(result.requestId);
  }
  console.log(status.outputUrl);
}

6. Session Auth (Firebase)

If your app uses Firebase authentication:

import { getAuth } from "firebase/auth";
 
const auth = getAuth();
const client = new Client({
  proxyUrl: "/api/visgate",
  getToken: async () => {
    return (await auth.currentUser?.getIdToken()) ?? "";
  },
});

The proxy forwards the Bearer token to the Visgate API.