Gemini

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

• Gemini middleware is setup

• Gemini API key

  info

  If you don't already have a API key follow the steps provided by Google here.

Installation

Install the AI provider

• pnpm install @acromedia/gesso-ai

Install the Gemini plugin

• pnpm install @acromedia/gesso-gemini

Install the Gemini middleware

• pnpm install @acromedia/gesso-gemini-middleware

Configure the package

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

Required:

• GEMINI_API_KEY=your-gemini-api-key

Optional:

• GEMINI_MODEL=model
• GEMINI_SAFETY_SETTINGS=settings
• GEMINI_SYSTEM_INSTRUCTION=instructions

If you didn't pass Gemini 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 gemini

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-gemini';
// 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?', ['text']);

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

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