Skip to main content
The Chat Interface provides a natural way to have conversations with Gemini Nano running directly in your browser. It features context-aware responses, file attachments, voice conversations, and advanced history management.
Chat Interface

Core Features

Page Context

Ask questions about the webpage you’re viewing

File Attachments

Attach images and audio files for context

Voice Mode

Hands-free conversation with TTS and STT

Chat History

Auto-saved conversations with search and branching

Page Context

Chat with AI about the current webpage you’re viewing. VAssist automatically extracts and analyzes page content to provide relevant answers.

What You Can Ask

“Summarize this article”“What are the main points on this page?”“Give me a TL;DR of this documentation”
“What’s the author’s contact information?”“List all the products mentioned”“Find pricing details on this page”
“Explain this technical term in simple words”“How does this feature work?”“What’s the difference between these two options?”

How It Works

1

Page Analysis

VAssist extracts text content, headings, links, and structure from the current page
2

Context Injection

Page content is automatically included in your conversation context
3

Intelligent Responses

Gemini Nano uses page context to provide accurate, specific answers
// VAssist automatically extracts page content
const pageContext = await DocumentInteractionService.getPageContext();

// Context is added to the conversation
const messages = [
  {
    role: 'system',
    content: `Page URL: ${pageContext.url}\nPage Content: ${pageContext.text}`
  },
  {
    role: 'user',
    content: 'Summarize this article'
  }
];

File Attachments

Attach images and audio files to provide additional context for your conversations.

Supported File Types

Formats: JPG, PNG, GIF, WebP, BMPUse Cases:
  • Describe image content
  • Extract text from screenshots (OCR)
  • Identify objects and scenes
  • Compare multiple images
  • Get design feedback
const session = await self.LanguageModel.create({
  temperature: 1.0,
  topK: 3
});

const response = await session.prompt(
  'What objects do you see in this image?',
  { image: imageFile }
);

How to Attach Files

1

Drag and Drop

Drag files directly into the chat window
2

Click to Upload

Click the attachment icon to browse and select files
3

Send with Message

Type your question and send - VAssist processes files with your message
File attachments are processed entirely on-device using Chrome’s Multimodal Input API. Your files never leave your computer.

Voice Mode

Have hands-free conversations with VAssist using voice input and text-to-speech output.

Features

Speech-to-Text

Chrome AI Multimodal InputSpeak naturally and see your words transcribed in real-time

Text-to-Speech

Kokoro.js TTSHear responses with natural-sounding on-device voices

Continuous Mode

Automatic listening after each response for seamless conversation flow

Privacy First

All voice processing happens locally - no cloud services

Voice Configuration

Configure STT in the Control Panel:
STT Configuration
{
  enabled: true,
  provider: 'chrome-ai-multimodal',
  'chrome-ai-multimodal': {
    temperature: 0.1,
    topK: 3,
    outputLanguage: 'en' // en, es, ja
  },
  recordingFormat: 'webm',
  maxRecordingDuration: 60
}
Supported languages: English, Spanish, Japanese

How to Use Voice Mode

1

Enable Voice Mode

Click the microphone icon in the chat input area
2

Start Speaking

Begin speaking - your words appear as text in real-time
3

Send Message

Click send or say “send” to submit your message
4

Hear Response

VAssist responds with natural speech synthesis
Voice mode works completely offline using Chrome’s built-in AI and Kokoro.js for text-to-speech.

Chat History with Branching

VAssist automatically saves all conversations with powerful branching support.

History Features

Auto-Save

Conversations saved automatically to IndexedDB

Search

Full-text search across all conversations

Branching

Create multiple conversation branches from any message

Export

Export conversations to JSON or Markdown

Conversation Branching

Create alternative conversation paths without losing context:
1

Edit Message

Click the edit icon on any previous message
2

Modify Content

Change the message text to explore a different direction
3

Create Branch

Send the edited message - creates a new conversation branch
4

Switch Branches

Use branch navigation to switch between conversation paths
import { ChatHistoryService } from './services/ChatHistoryService';

// Save conversation
await ChatHistoryService.saveChat({
  title: 'Page Analysis',
  messages: conversationMessages,
  metadata: {
    url: window.location.href,
    timestamp: Date.now()
  }
});

// Load conversation with branches
const chat = await ChatHistoryService.loadChat(chatId);
const branches = chat.branches || [];

// Create new branch
const branchId = await ChatHistoryService.createBranch({
  chatId,
  fromMessageId,
  newMessage: editedMessage
});

Message Actions

Enhance your chat experience with these message actions:

Edit

Modify any message to explore different responses

Regenerate

Get a new response without changing your message

Copy

Copy message text to clipboard

TTS Playback

Listen to any message with text-to-speech

Delete

Remove messages from conversation

Branch

Create new conversation branch from this point

Regenerate Responses

Not satisfied with the AI’s response? Regenerate it:
  1. Hover over the assistant’s message
  2. Click the regenerate icon (circular arrows)
  3. Get a new response with the same context
Each regeneration creates a branch, allowing you to compare different responses.

Temporary Chats

Start conversations that don’t save to history - perfect for sensitive topics or quick questions.

When to Use Temporary Chats

  • Testing features
  • Sensitive or private information
  • Quick one-off questions
  • Experimenting with prompts

Enable Temporary Mode

1

Open Settings

Click the settings icon in the chat interface
2

Toggle Temporary

Enable “Temporary Chat” mode
3

Start Chatting

All messages in this session won’t be saved
Temporary chats are permanently deleted when you close the chat window. There is no way to recover them.

Smooth Animations

Words fade in smoothly one at a time as the AI responds, creating a natural typing effect:
  • Streaming responses - Text appears word-by-word in real-time
  • Smooth transitions - Fade-in effects for each word
  • Stop generation - Click stop button to halt response generation
  • Resume context - Partial responses maintain conversation context
// Stream AI response token by token
const session = await self.LanguageModel.create();
const stream = session.promptStreaming(userMessage);

for await (const chunk of stream) {
  // Display each word with fade-in animation
  appendWordToChat(chunk, { animate: true });
}

Performance Tips

Gemini Nano has a 1024 token context window. VAssist automatically manages context:
  • Recent messages prioritized
  • Older messages summarized
  • Page context truncated if needed
Start a new conversation if you hit the limit.
Processing large files may take time:
  • Images: Automatically resized for optimal processing
  • Audio: Maximum 60 seconds per recording
  • Multiple files: Processed sequentially
Reduce voice mode latency:
  • Keep TTS model loaded (keepModelLoaded: true)
  • Use WebGPU device for faster synthesis
  • Choose Q4 quantization for speed

Privacy & Security

Local Storage

All chats stored locally in your browser’s IndexedDB

No Cloud Sync

Conversations never leave your device

On-Device AI

All processing happens with Chrome’s built-in AI

Clear Anytime

Delete conversations or clear all history instantly

Next Steps

Virtual Companion

Learn about the animated 3D assistant

Chrome AI APIs

Understand the underlying AI technology

Build docs developers (and LLMs) love