Accessing flows from the client

There are two primary ways to access Genkit flows from client-side applications:

• Using the Genkit client library
• Cloud Functions for Firebase callable function client SDK

Using the Genkit client library

You can call your deployed flows using the Genkit client library. This library provides functions for both non-streaming and streaming flow calls. See “Call your flows from the client” in Deploy flows to any Node.js platform for more details.

Non-streaming Flow Calls

For a non-streaming response, use the runFlow function. This is suitable for flows that return a single, complete output.

import { runFlow } from 'genkit/beta/client';

async function callHelloFlow() {
  try {
    const result = await runFlow({
      url: 'http://127.0.0.1:3400/helloFlow', // Replace with your deployed flow's URL
      input: { name: 'Genkit User' },
    });
    console.log('Non-streaming result:', result.greeting);
  } catch (error) {
    console.error('Error calling helloFlow:', error);
  }
}

callHelloFlow();

Streaming Flow Calls

For flows that are designed to stream responses (e.g., for real-time updates or long-running operations), use the streamFlow function.

import { streamFlow } from 'genkit/beta/client';

async function streamHelloFlow() {
  try {
    const result = streamFlow({
      url: 'http://127.0.0.1:3400/helloFlow', // Replace with your deployed flow's URL
      input: { name: 'Streaming User' },
    });

    // Process the stream chunks as they arrive
    for await (const chunk of result.stream) {
      console.log('Stream chunk:', chunk);
    }

    // Get the final complete response
    const finalOutput = await result.output;
    console.log('Final streaming output:', finalOutput.greeting);
  } catch (error) {
    console.error('Error streaming helloFlow:', error);
  }
}

streamHelloFlow();

Authentication (Optional)

If your deployed flow requires authentication, you can pass headers with your requests:

const result = await runFlow({
  url: 'http://127.0.0.1:3400/helloFlow', // Replace with your deployed flow's URL
  headers: {
    Authorization: 'Bearer your-token-here', // Replace with your actual token
  },
  input: { name: 'Authenticated User' },
});

When deploying to Cloud Functions for Firebase

When deploying to Cloud Functions for Firebase, use the Firebase callable functions client library.

Detailed documentation can be found at https://firebase.google.com/docs/functions/callable?gen=2nd

Here’s a sample for the web:

// Get the callable by passing an initialized functions SDK.
const getForecast = httpsCallable(functions, "getForecast");

// Call the function with the `.stream()` method to start streaming.
const { stream, data } = await getForecast.stream({
  locations: favoriteLocations,
});

// The `stream` async iterable returned by `.stream()`
// will yield a new value every time the callable
// function calls `sendChunk()`.
for await (const forecastDataChunk of stream) {
  // update the UI every time a new chunk is received
  // from the callable function
  updateUi(forecastDataChunk);
}

// The `data` promise resolves when the callable
// function completes.
const allWeatherForecasts = await data;
finalizeUi(allWeatherForecasts);

source