feat: 1.0.0 release

README.md

@@ -1,17 +1,17 @@
 # The fal.ai JS client
 
-![@fal-ai/serverless-client npm package](https://img.shields.io/npm/v/@fal-ai/serverless-client?color=%237527D7&label=client&style=flat-square)
-![@fal-ai/serverless-proxy npm package](https://img.shields.io/npm/v/@fal-ai/serverless-proxy?color=%237527D7&label=proxy&style=flat-square)
+![@fal-ai/client npm package](https://img.shields.io/npm/v/@fal-ai/client?color=%237527D7&label=client&style=flat-square)
+![@fal-ai/server-proxy npm package](https://img.shields.io/npm/v/@fal-ai/server-proxy?color=%237527D7&label=proxy&style=flat-square)
 ![Build](https://img.shields.io/github/actions/workflow/status/fal-ai/fal-js/build.yml?style=flat-square)
 ![License](https://img.shields.io/github/license/fal-ai/fal-js?style=flat-square)
 
 ## About the Project
 
-The fal serverless JavaScript/TypeScript Client is a robust and user-friendly library designed for seamless integration of fal serverless functions in Web, Node.js, and React Native applications. Developed in TypeScript, it provides developers with type safety right from the start.
+The fal JavaScript/TypeScript Client is a robust and user-friendly library designed for seamless integration of fal endpoints in Web, Node.js, and React Native applications. Developed in TypeScript, it provides developers with type safety right from the start.
 
 ## Getting Started
 
-The `@fal-ai/serverless-client` library serves as a client for fal serverless Python functions. For guidance on creating your functions, refer to the [quickstart guide](https://fal.ai/docs).
+The `@fal-ai/client` library serves as a client for fal apps hosted on fal. For guidance on consuming and creating apps, refer to the [quickstart guide](https://fal.ai/docs).
 
 ### Client Library
 
@@ -22,12 +22,12 @@ This client library is crafted as a lightweight layer atop platform standards li
 
 1. Install the client library
    ```sh
-   npm install --save @fal-ai/serverless-client
+   npm install --save @fal-ai/client
    ```
 2. Start by configuring your credentials:
 
    ```ts
-   import * as fal from "@fal-ai/serverless-client";
+   import { fal } from "@fal-ai/client";
 
    fal.config({
      // Can also be auto-configured using environment variables:
@@ -46,21 +46,21 @@ See the available [model APIs](https://fal.ai/models) for more details.
 
 ### The fal client proxy
 
-Although the fal client is designed to work in any JS environment, including directly in your browser, **it is not recommended** to store your credentials in your client source code. The common practice is to use your own server to serve as a proxy to serverless APIs. Luckily fal supports that out-of-the-box with plug-and-play proxy functions for the most common engines/frameworks.
+Although the fal client is designed to work in any JS environment, including directly in your browser, **it is not recommended** to store your credentials in your client source code. The common practice is to use your own server to serve as a proxy to fal APIs. Luckily fal supports that out-of-the-box with plug-and-play proxy functions for the most common engines/frameworks.
 
 For example, if you are using Next.js, you can:
 
 1. Instal the proxy library
    ```sh
-   npm install --save @fal-ai/serverless-proxy
+   npm install --save @fal-ai/server-proxy
    ```
 2. Add the proxy as an API endpoint of your app, see an example here in [pages/api/fal/proxy.ts](https://github.com/fal-ai/fal-js/blob/main/apps/demo-nextjs-page-router/pages/api/fal/proxy.ts)
    ```ts
-   export { handler as default } from "@fal-ai/serverless-proxy/nextjs";
+   export { handler as default } from "@fal-ai/server-proxy/nextjs";
    ```
 3. Configure the client to use the proxy:
    ```ts
-   import * as fal from "@fal-ai/serverless-client";
+   import { fal } from "@fal-ai/client";
    fal.config({
      proxyUrl: "/api/fal/proxy",
    });

apps/demo-express-app/src/main.ts

@@ -3,8 +3,8 @@
  * This is only a minimal backend to get started.
  */
 
-import * as fal from "@fal-ai/serverless-client";
-import * as falProxy from "@fal-ai/serverless-proxy/express";
+import { fal } from "@fal-ai/client";
+import * as falProxy from "@fal-ai/server-proxy/express";
 import cors from "cors";
 import { configDotenv } from "dotenv";
 import express from "express";

apps/demo-nextjs-app-router/app/api/fal/proxy/route.ts

@@ -1,3 +1,3 @@
-import { route } from "@fal-ai/serverless-proxy/nextjs";
+import { route } from "@fal-ai/server-proxy/nextjs";
 
 export const { GET, POST, PUT } = route;

apps/demo-nextjs-app-router/app/camera-turbo/page.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
 
-import * as fal from "@fal-ai/serverless-client";
+import { createFalClient } from "@fal-ai/client";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 
-fal.config({
+const fal = createFalClient({
   proxyUrl: "/api/fal/proxy",
 });
 

apps/demo-nextjs-app-router/app/comfy/image-to-image/page.tsx

@@ -1,32 +1,29 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
-import * as fal from "@fal-ai/serverless-client";
+import { createFalClient } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
-// @snippet:start(client.config)
-fal.config({
+const fal = createFalClient({
   proxyUrl: "/api/fal/proxy", // the built-int nextjs proxy
   // proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
 });
-// @snippet:end
 
-// @snippet:start(client.result.type)
 type Image = {
   filename: string;
   subfolder: string;
   type: string;
   url: string;
 };
 
-type Result = {
+type ComfyOutput = {
   url: string;
   outputs: Record<string, any>[];
   images: Image[];
 };
-// @snippet:end
 
 type ErrorProps = {
   error: any;
 };
 
 function Error(props: ErrorProps) {
@@ -54,7 +51,7 @@
   // Result state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const [result, setResult] = useState<Result | null>(null);
+  const [result, setResult] = useState<ComfyOutput | null>(null);
   const [logs, setLogs] = useState<string[]>([]);
   const [elapsedTime, setElapsedTime] = useState<number>(0);
   // @snippet:end
@@ -73,7 +70,7 @@
     setElapsedTime(0);
   };
 
-  const getImageURL = (result: Result) => {
+  const getImageURL = (result: ComfyOutput) => {
     return result.outputs[9].images[0];
   };
 
@@ -83,7 +80,7 @@
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe(
+      const { data } = await fal.subscribe<ComfyOutput>(
         "comfy/fal-ai/image-to-image",
         {
           input: {
@@ -102,8 +99,8 @@
           },
         },
       );
-      setResult(getImageURL(result));
+      setResult(getImageURL(data));
     } catch (error: any) {
       setError(error);
     } finally {
       setLoading(false);

apps/demo-nextjs-app-router/app/comfy/image-to-video/page.tsx

@@ -1,32 +1,28 @@
 "use client";
 
-import * as fal from "@fal-ai/serverless-client";
+import { createFalClient } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
-// @snippet:start(client.config)
-fal.config({
+const fal = createFalClient({
   proxyUrl: "/api/fal/proxy", // the built-int nextjs proxy
   // proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
 });
-// @snippet:end
 
-// @snippet:start(client.result.type)
 type Image = {
   filename: string;
   subfolder: string;
   type: string;
   url: string;
 };
 
-type Result = {
+type ComfyOutput = {
   url: string;
   outputs: Record<string, any>[];
   images: Image[];
 };
-// @snippet:end
 
 type ErrorProps = {
   error: any;
 };
 
 function Error(props: ErrorProps) {
@@ -50,7 +46,7 @@
   // Result state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const [result, setResult] = useState<Result | null>(null);
+  const [result, setResult] = useState<ComfyOutput | null>(null);
   const [logs, setLogs] = useState<string[]>([]);
   const [elapsedTime, setElapsedTime] = useState<number>(0);
   // @snippet:end
@@ -69,7 +65,7 @@
     setElapsedTime(0);
   };
 
-  const getImageURL = (result: Result) => {
+  const getImageURL = (result: ComfyOutput) => {
     return result.outputs[10].images[0];
   };
 
@@ -79,7 +75,7 @@
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe(
+      const { data } = await fal.subscribe<ComfyOutput>(
         "comfy/fal-ai/image-to-video",
         {
           input: {
@@ -97,8 +93,8 @@
           },
         },
       );
-      setResult(getImageURL(result));
+      setResult(getImageURL(data));
     } catch (error: any) {
       setError(error);
     } finally {
       setLoading(false);
@@ -117,7 +113,7 @@
           <div className="flex w-full flex-col space-y-4">
             <div className="mx-auto flex">
               {imageFile && (
                 <img
                   src={URL.createObjectURL(imageFile)}
                   alt=""
                   className="mx-auto w-1/2"

apps/demo-nextjs-app-router/app/comfy/text-to-image/page.tsx

@@ -1,29 +1,25 @@
 "use client";
 
-import * as fal from "@fal-ai/serverless-client";
+import { createFalClient } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
-// @snippet:start(client.config)
-fal.config({
+const fal = createFalClient({
   proxyUrl: "/api/fal/proxy", // the built-int nextjs proxy
   // proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
 });
-// @snippet:end
 
-// @snippet:start(client.result.type)
 type Image = {
   filename: string;
   subfolder: string;
   type: string;
   url: string;
 };
 
-type Result = {
+type ComfyOutput = {
   url: string;
   outputs: Record<string, any>[];
   images: Image[];
 };
-// @snippet:end
 
 type ErrorProps = {
   error: any;
@@ -53,7 +49,7 @@
   // Result state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const [result, setResult] = useState<Result | null>(null);
+  const [result, setResult] = useState<ComfyOutput | null>(null);
   const [logs, setLogs] = useState<string[]>([]);
   const [elapsedTime, setElapsedTime] = useState<number>(0);
   // @snippet:end
@@ -72,7 +68,7 @@
     setElapsedTime(0);
   };
 
-  const getImageURL = (result: Result) => {
+  const getImageURL = (result: ComfyOutput) => {
     return result.outputs[9].images[0];
   };
 
@@ -82,22 +78,25 @@
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe("comfy/fal-ai/text-to-image", {
-        input: {
-          prompt: prompt,
+      const { data } = await fal.subscribe<ComfyOutput>(
+        "comfy/fal-ai/text-to-image",
+        {
+          input: {
+            prompt: prompt,
+          },
+          logs: true,
+          onQueueUpdate(update) {
+            setElapsedTime(Date.now() - start);
+            if (
+              update.status === "IN_PROGRESS" ||
+              update.status === "COMPLETED"
+            ) {
+              setLogs((update.logs || []).map((log) => log.message));
+            }
+          },
         },
-        logs: true,
-        onQueueUpdate(update) {
-          setElapsedTime(Date.now() - start);
-          if (
-            update.status === "IN_PROGRESS" ||
-            update.status === "COMPLETED"
-          ) {
-            setLogs((update.logs || []).map((log) => log.message));
-          }
-        },
-      });
-      setResult(getImageURL(result));
+      );
+      setResult(getImageURL(data));
     } catch (error: any) {
       setError(error);
     } finally {

apps/demo-nextjs-app-router/app/page.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import * as fal from "@fal-ai/serverless-client";
+import { createFalClient } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
-// @snippet:start(client.config)
-fal.config({
+const fal = createFalClient({
   // credentials: 'FAL_KEY_ID:FAL_KEY_SECRET',
   proxyUrl: "/api/fal/proxy", // the built-int nextjs proxy
   // proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
 });
-// @snippet:end
 
-// @snippet:start(client.result.type)
 type Image = {
   url: string;
   file_name: string;
   file_size: number;
 };
-type Result = {
+type Output = {
   image: Image;
 };
 // @snippet:end
@@ -51,7 +48,7 @@ export default function Home() {
   // Result state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const [result, setResult] = useState<Result | null>(null);
+  const [result, setResult] = useState<Output | null>(null);
   const [logs, setLogs] = useState<string[]>([]);
   const [elapsedTime, setElapsedTime] = useState<number>(0);
   // @snippet:end
@@ -79,7 +76,7 @@ export default function Home() {
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe("fal-ai/illusion-diffusion", {
+      const result = await fal.subscribe<Output>("fal-ai/illusion-diffusion", {
         input: {
           prompt,
           image_url: imageFile,
@@ -96,7 +93,7 @@ export default function Home() {
           }
         },
       });
-      setResult(result);
+      setResult(result.data);
     } catch (error: any) {
       setError(error);
     } finally {

apps/demo-nextjs-app-router/app/queue/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as fal from "@fal-ai/serverless-client";
+import { fal } from "@fal-ai/client";
 import { useState } from "react";
 
 fal.config({
@@ -54,7 +54,7 @@ export default function Home() {
     setLoading(true);
     const start = Date.now();
     try {
-      const result: any = await fal.subscribe(endpointId, {
+      const result = await fal.subscribe(endpointId, {
         input: JSON.parse(input),
         logs: true,
         // mode: "streaming",