Artificial Intelligence

Starter comes with a pre-configured Chat And Image generation AI features set using the Vercel AI SDK. It includes built-in support for Gemini and a robust mocking system for local development.

1. Add AI Environment Variables

Generate a Gemini API key from Google AI Studio and add it to your .env file.

GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key

2.Model Configuration

To switch providers (e.g., to OpenAI), simply update the provider factory and model strings in this file (its also type-safe).

const openAIModel = openai("model-of-your-choice");

Architecture

The AI feature is split into server-side logic and client-side state management:

1. Server Actions (chat.ts, image.ts)

These files export generateTextFn and generateImageFn. They interact directly with the AI SDK.

• Security: These functions utilize "use server" to ensure AI logic and environment variables are executed exclusively on the server, preventing sensitive configurations from being exposed to the client.
• Mocking: By default, these import models from config.mock.ts. To use real AI, change the import to ./config.

2. Client Hooks (use-image-gen.ts)

We use TanStack Form and TanStack Query to manage the AI lifecycle:

• Validation: zod handles prompt length, image constraints and form reset.
• Mutation: useMutation triggers the server action and handles the loading state.
• State: The history state keeps track of generations within the current session.

AI Image Studio

The ImageGeneration component is a complete "Studio" UI:

• GenerationForm: A controlled form for prompts, dimensions, and image counts.
• GenerationGallery: A real-time feed that displays generated images as base64 strings.
• Auto scroll: The gallery automatically scrolls to the newest generation upon success.

Common Tasks

Best Practices

• Mocking: Keep using config.mock.ts during UI development to avoid unnecessary costs.
• Data Persistence: The default setup does not store images in a database. If you need persistence, integrate the response from generateImageFn with your database and S3 bucket.