Skip to main content

Vertex AI

Plugin for AI Provider​

note

The following describes general usage, if you setup your project following getting-started/install then these next steps have already been handled for you.

Requirements​

  • Vertex AI middleware is setup

  • Vertex AI setup

    info

    If you don't already have a Google Cloud project follow the steps outlined in the "Prerequisites" section here.

Installation​

Install the AI provider

  • pnpm install @acromedia/gesso-ai

Install the Vertex AI plugin

  • pnpm install @acromedia/gesso-vertex

Install the Vertex AI middleware

  • pnpm install @acromedia/gesso-vertex-middleware

Configure the package

In your projects .env file set the corresponding variables with the credentials from requirements.

Required:

  • VERTEX_PROJECT
  • VERTEX_LOCATION
  • VERTEX_MODEL

Optional:

  • VERTEX_DATASTORE

If you didn't pass Vertex AI options to @acromedia/create-gesso and you're adding this module for the first time and want to setup the provider, run

  • pnpm gesso construct ai vertex

After running the construct script you will now see a ai.ts file in the root directory of your project. This file takes care of telling gesso-ai what plugin system is being used and ensures the correct hooks are exposed by gesso-ai.

Register the plugin with the provider

  • Under your source files directory (commonly src) there will be a newly added ai.ts file.
// ai.ts
// Import the AI provider
import { ai as gessoAI } from '@acromedia/gesso-ai';
// Import the provider plugins
import plugin from '@acromedia/gesso-vertex';
// Import the Gesso config.
import config from '../gesso.config.json';

// Register the plugins and config with ai provider.
const ai = gessoAI(plugin, config);

export default ai;

Usage​

// import the AI provider from the ai.ts file.
import ai from ./ai

// Import your required functionality.
const { useAI } = ai;

const Page = () => {
  // Example implementation of the useAI hook provided via AI
  const response = useAI('What is the first color of the rainbow?', {
    responseStructure: ['text'],
    conversationMode: true,
    model: 'gemini-2-5-pro,
  });

  // logs: "The first color of the rainbow is red."
  console.log(response);

  return <div>{response}</div>;
};

Options​

The useAI hook accepts an options object as the second parameter, allowing you to customize the AI behavior and specify advanced configurations.

Conversation Mode​

Enable conversation mode to maintain context across multiple prompts and responses.

Available Models​

If model is passed as an option to useAI then this overrides what is configured in the VERTEX_MODEL environment variable.

  • gemini-2.5-pro: Best for complex reasoning, analysis, and creative tasks
  • gemini-2.5-flash: Balanced performance and speed for general use cases
  • gemini-2.5-flash-lite: Fastest response times for simple queries