Get started with Gemini 3

Gemini 3 represents a significant leap forward in AI capabilities, combining all of Gemini's strengths together to help you bring any idea to life. It delivers:

- State-of-the-art reasoning with unprecedented depth and nuance

- PhD-level performance on complex benchmarks like Humanity's Last Exam (37.5%) and GPQA Diamond (91.9%)

- Leading multimodal understanding with 81% on MMMU-Pro and 87.6% on Video-MMMU

- Best-in-class vibe coding and agentic capabilities

- Superior long-horizon planning for multi-step workflows

Gemini 3 Pro is currently available in preview, offering great performance across all benchmarks.

The AI TOOLKIT is the TypeScript toolkit designed to help developers build AI-powered applications with React, Next.js, Vue, Svelte, Node.js, and more. Integrating LLMs into applications is complicated and heavily dependent on the specific model provider you use.

The AI TOOLKIT abstracts away the differences between model providers, eliminates boilerplate code for building chatbots, and allows you to go beyond text output to generate rich, interactive components.

At the center of the AI TOOLKIT is AI TOOLKIT Core, which provides a unified API to call any LLM. The code snippet below is all you need to call Gemini 3 with the AI TOOLKIT:

import { google } from '@ai-toolkit/google';

import { generateText } from 'ai-toolkit';

const { text } = await generateText({

model: google('gemini-3-pro-preview'),

prompt: 'Explain the concept of the Hilbert space.',

});

console.log(text);

### Enhanced Reasoning with Thinking Mode

Gemini 3 models can use enhanced reasoning through thinking mode, which improves their ability to solve complex problems. You can control the thinking level using the thinkingLevel provider option:

import { google, GoogleGenerativeAIProviderOptions } from '@ai-toolkit/google';

import { generateText } from 'ai-toolkit';

const { text } = await generateText({

model: google('gemini-3-pro-preview'),

prompt: 'What is the sum of the first 10 prime numbers?',

providerOptions: {

google: {

thinkingConfig: {

includeThoughts: true,

thinkingLevel: 'low',

},

} satisfies GoogleGenerativeAIProviderOptions,

},

});

console.log(text);

The thinkingLevel parameter accepts different values to control the depth of reasoning applied to your prompt:

- Gemini 3 Pro supports: 'low' and 'high'

- Gemini 3 Flash supports: 'minimal', 'low', 'medium', and 'high'

### Using Tools with the AI TOOLKIT

Gemini 3 excels at tool calling with improved reliability and consistency for multi-step workflows. Here's an example of using tool calling with the AI TOOLKIT:

import { z } from 'zod';

import { generateText, tool, stepCountIs } from 'ai-toolkit';

import { google } from '@ai-toolkit/google';

const result = await generateText({

model: google('gemini-3-pro-preview'),

prompt: 'What is the weather in San Francisco?',

tools: {

weather: tool({

description: 'Get the weather in a location',

inputSchema: z.object({

location: z.string().describe('The location to get the weather for'),

}),

execute: async ({ location }) => ({

location,

temperature: 72 + Math.floor(Math.random() * 21) - 10,

}),

}),

},

stopWhen: stepCountIs(5), // enables multi-step calling

});

console.log(result.text);

console.log(result.steps);

### Using Google Search with Gemini

With search grounding, Gemini can access the latest information using Google search. Here's an example of using Google Search with the AI TOOLKIT:

import { google } from '@ai-toolkit/google';

import { GoogleGenerativeAIProviderMetadata } from '@ai-toolkit/google';

import { generateText } from 'ai-toolkit';

const { text, sources, providerMetadata } = await generateText({

model: google('gemini-3-pro-preview'),

tools: {

google_search: google.tools.googleSearch({}),

},

prompt:

'List the top 5 San Francisco news from the past week.' +

'You must include the date of each article.',

});

// access the grounding metadata. Casting to the provider metadata type

// is optional but provides autocomplete and type safety.

const metadata = providerMetadata?.google as

| GoogleGenerativeAIProviderMetadata

| undefined;

const groundingMetadata = metadata?.groundingMetadata;

const safetyRatings = metadata?.safetyRatings;

console.log({ text, sources, groundingMetadata, safetyRatings });

### Building Interactive Interfaces

AI TOOLKIT Core can be paired with AI TOOLKIT UI, another powerful component of the AI TOOLKIT, to streamline the process of building chat, completion, and assistant interfaces with popular frameworks like Next.js, Nuxt, SvelteKit, and SolidStart.

AI TOOLKIT UI provides robust abstractions that simplify the complex tasks of managing chat streams and UI updates on the frontend, enabling you to develop dynamic AI-driven interfaces more efficiently.

With four main hooks — `useChat`, `useCompletion`, `useObject`, and `useAssistant` — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.

Let's explore building a chatbot with Next.js, the AI TOOLKIT, and Gemini 3 Pro:

In a new Next.js application, first install the AI TOOLKIT and the Google Generative AI provider:

<Snippet text="pnpm install ai @ai-toolkit/google" />

Then, create a route handler for the chat endpoint:

import { google } from '@ai-toolkit/google';

import { streamText, UIMessage, convertToModelMessages } from 'ai-toolkit';

export async function POST(req: Request) {

const { messages }: { messages: UIMessage[] } = await req.json();

const result = streamText({

model: google('gemini-3-pro-preview'),

messages: await convertToModelMessages(messages),

});

return result.toUIMessageStreamResponse();

}

Finally, update the root page (app/page.tsx) to use the useChat hook:

'use client';

import { useChat } from '@ai-toolkit/react';

import { useState } from 'react';

export default function Chat() {

const [input, setInput] = useState('');

const { messages, sendMessage } = useChat();

return (

<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">

{messages.map(message => (

<div key={message.id} className="whitespace-pre-wrap">

{message.role === 'user' ? 'User: ' : 'Gemini: '}

{message.parts.map((part, i) => {

switch (part.type) {

case 'text':

return <div key={${message.id}-${i}}>{part.text}</div>;

}

})}

</div>

))}

<form

onSubmit={e => {

e.preventDefault();

sendMessage({ text: input });

setInput('');

}}

>

<input

className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"

value={input}

placeholder="Say something..."

onChange={e => setInput(e.currentTarget.value)}

/>

</form>

</div>

);

}

The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.

Ready to dive in? Here's how you can begin:

1. Explore the documentation at studio.khulnasoft.com/docs to understand the capabilities of the AI TOOLKIT.

2. Check out practical examples at studio.khulnasoft.com/examples to see the SDK in action.

3. Dive deeper with advanced guides on topics like Retrieval-Augmented Generation (RAG) at studio.khulnasoft.com/docs/guides.

4. Use ready-to-deploy AI templates at vercel.com/templates?type=ai.

5. Read more about the Google Generative AI provider.