npx create-next-appUsing your favorite package manager, install both the @fal-ai/serverless-client and @fal-ai/serverless-proxy libraries.
npm install @fal-ai/serverless-client @fal-ai/serverless-proxyThe proxy will protect your API Key and prevent it from being exposed to the client. Usually app implementation have to handle that integration themselves, but in order to make the integration as smooth as possible, we provide a drop-in proxy implementation that can be integrated with either the Page Router or the App Router.
If you are using the Page Router (i.e. src/pages/_app.js), create an API handler in src/pages/api/fal/proxy.js (or .ts in case of TypeScript), and re-export the built-in proxy handler:
export { handler as default } from "@fal-ai/serverless-proxy/nextjs";If you are using the App Router (i.e. src/app/page.jsx) create a route handler in src/app/api/fal/proxy/route.js (or .ts in case of TypeScript), and re-export the route handler:
import { route } from "@fal-ai/serverless-proxy/nextjs";
export const { GET, POST } = route;Make sure you have your API Key available as an environment variable. You can setup in your .env.local file for development and also in your hosting provider for production, such as Vercel (opens in a new tab).
FAL_KEY="key_id:key_secret"It's common for applications to execute custom logic before or after the proxy handler. For example, you may want to add a custom header to the request, or log the request and response, or apply some rate limit. The good news is that the proxy implementation is simply a standard Next.js API/route handler function, which means you can compose it with other handlers.
For example, let's assume you want to add some analytics and apply some rate limit to the proxy handler:
import { route } from "@fal-ai/serverless-proxy/nextjs";
// Let's add some custom logic to POST requests - i.e. when the request is
// submitted for processing
export const POST = (req) => {
// Add some analytics
analytics.track("fal.ai request", {
targetUrl: req.headers["x-fal-target-url"],
userId: req.user.id,
});
// Apply some rate limit
if (rateLimiter.shouldLimit(req)) {
res.status(429).json({ error: "Too many requests" });
}
// If everything passed your custom logic, now execute the proxy handler
return route.POST(req);
};
// For GET requests we will just use the built-in proxy handler
// But you could also add some custom logic here if you need
export const GET = route.GET;Note that the URL that will be forwarded to server is available as a header named x-fal-target-url. Also, keep in mind the example above is just an example, rateLimiter and analytics are just placeholders.
The example above used the app router, but the same logic can be applied to the page router and its handler function.
On your main file (i.e. src/pages/_app.jsx or src/app/page.jsx), configure the client to use the proxy:
import * as fal from "@fal-ai/serverless-client";
fal.config({
proxyUrl: "/api/fal/proxy",
});Although the client can be configured with credentials, use that only for rapid prototyping. We recommend you always use the proxy to avoid exposing your API Key in the client before you deploy your web application. See the server-side guide for more details.
Now that the client is configured, you can generate an image using fal.subscribe and pass the model id and the input parameters:
const result = await fal.subscribe("110602490-lora", {
input: {
prompt,
model_name: "stabilityai/stable-diffusion-xl-base-1.0",
image_size: "square_hd",
},
pollInterval: 5000,
logs: true,
onQueueUpdate(update) {
console.log("queue update", update);
},
});
const imageUrl = result.images[0].url;See more about SD with LoRA used in this example on fal.ai/models/sd-loras
Image generation is just one of the many cool things you can do with fal. Make sure you: