Skip to content

Commit bf8d6d6

Browse files
claudeclaude
committed
feat: Add Gemini AI editor example with Quick Start guide
- Created complete AI editor example using Google Gemini - Uses Gemini 2.0 Flash model via Vercel AI SDK - Includes comprehensive Quick Start guide with step-by-step setup - Features client-side AI integration (no backend required) - Supports all AI commands: improve writing, fix spelling, make shorter/longer, etc. - Complete documentation with installation, usage, customization, and troubleshooting Example location: examples/09-ai/08-gemini-quickstart/
1 parent eecbca5 commit bf8d6d6

11 files changed

Lines changed: 729 additions & 6 deletions

File tree

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@ai-sdk/anthropic": "^2.0.31",
18-
"@ai-sdk/google": "^2.0.23",
18+
"@ai-sdk/google": "^1.0.9",
1919
"@ai-sdk/groq": "^2.0.16",
2020
"@ai-sdk/mistral": "^2.0.19",
2121
"@ai-sdk/openai": "^2.0.52",

‎examples/09-ai/08-gemini-quickstart/.bnexample.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "blocknote",
5+
"tags": ["AI", "Gemini", "Google AI"],
6+
"dependencies": {
7+
"@blocknote/xl-ai": "latest",
8+
"@ai-sdk/google": "^1.0.9",
9+
"ai": "^5.0.45",
10+
"zustand": "^5.0.3"
11+
}
12+
}

‎examples/09-ai/08-gemini-quickstart/README.md‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
# Gemini AI Editor - Quick Start Guide
2+
3+
A complete, ready-to-use AI-powered editor using Google's Gemini AI with BlockNote.
4+
5+
## What This Example Demonstrates
6+
7+
This example shows you how to build a full-featured AI editor with:
8+
- **AI-powered text editing** (improve writing, fix spelling, change tone)
9+
- **AI commands via slash menu** (type `/ai` for AI options)
10+
- **AI toolbar button** (select text and click AI button)
11+
- **Google Gemini integration** (using the fast Gemini 2.0 Flash model)
12+
13+
## Prerequisites
14+
15+
- Node.js 18+ installed
16+
- npm or yarn package manager
17+
- A free Google Gemini API key
18+
19+
## Quick Start (5 minutes)
20+
21+
### Step 1: Get Your Gemini API Key (1 minute)
22+
23+
1. Visit [Google AI Studio](https://aistudio.google.com/apikey)
24+
2. Sign in with your Google account
25+
3. Click **"Create API Key"**
26+
4. Copy your API key (it starts with `AI...`)
27+
28+
> **Note**: Gemini offers a generous free tier with no credit card required!
29+
30+
### Step 2: Install Dependencies (2 minutes)
31+
32+
From the BlockNote repository root, navigate to this example:
33+
34+
```bash
35+
cd examples/09-ai/08-gemini-quickstart
36+
npm install
37+
```
38+
39+
### Step 3: Configure Your API Key (1 minute)
40+
41+
Create a `.env` file in this directory (`examples/09-ai/08-gemini-quickstart/.env`):
42+
43+
```bash
44+
VITE_GEMINI_API_KEY=your_api_key_here
45+
```
46+
47+
Replace `your_api_key_here` with the API key you copied in Step 1.
48+
49+
**Example:**
50+
```bash
51+
VITE_GEMINI_API_KEY=AIzaSyC-AbCdEfGhIjKlMnOpQrStUvWxYz12345
52+
```
53+
54+
### Step 4: Start the Editor (1 minute)
55+
56+
```bash
57+
npm start
58+
```
59+
60+
The editor will open at `http://localhost:5173` (or another port if 5173 is busy).
61+
62+
## How to Use the AI Features
63+
64+
Once the editor is running, try these AI features:
65+
66+
### Method 1: AI Toolbar Button
67+
1. **Select any text** in the editor
68+
2. Click the **AI button** (sparkle icon) in the toolbar
69+
3. Choose an AI command:
70+
- **Improve writing** - Enhance clarity and flow
71+
- **Fix spelling & grammar** - Correct errors
72+
- **Make shorter** - Create a concise version
73+
- **Make longer** - Expand with more detail
74+
- **Simplify** - Use simpler language
75+
- **Change tone** - Adjust formality/style
76+
77+
### Method 2: Slash Menu
78+
1. Type **`/ai`** anywhere in the editor
79+
2. Select an AI command from the menu
80+
3. The AI will process the current block
81+
82+
### Method 3: Custom Prompts
83+
1. Select text and click the AI button
84+
2. Choose **"Custom prompt"**
85+
3. Type your own instruction (e.g., "translate to Spanish", "add examples")
86+
4. Press Enter
87+
88+
## Features Included
89+
90+
✅ **Full BlockNote editor** - Rich text, headings, lists, and more
91+
✅ **Gemini 2.0 Flash** - Fast, high-quality AI responses
92+
✅ **Client-side integration** - Direct API calls, no backend needed
93+
✅ **Pre-built AI commands** - Improve, fix, shorten, lengthen, simplify
94+
✅ **Custom prompts** - Ask the AI to do anything
95+
✅ **Selection-based editing** - AI modifies selected text in place
96+
✅ **Streaming responses** - See AI output in real-time
97+
98+
## Customization
99+
100+
### Using a Different Gemini Model
101+
102+
Edit `src/App.tsx` and change the model:
103+
104+
```typescript
105+
// Use Gemini 1.5 Pro (more capable, slower)
106+
const model = google("gemini-1.5-pro");
107+
108+
// Use Gemini 1.5 Flash (balanced)
109+
const model = google("gemini-1.5-flash");
110+
111+
// Use Gemini 2.0 Flash (fastest, default)
112+
const model = google("gemini-2.0-flash-exp");
113+
```
114+
115+
### Adding Custom AI Commands
116+
117+
You can add your own AI commands to the menu. See the BlockNote documentation for details:
118+
[Custom AI Menu Items](https://www.blocknotejs.org/docs/ai/custom-menu-items)
119+
120+
### Environment Variables
121+
122+
The example uses Vite's environment variable system:
123+
124+
- **Development**: Create `.env` file with `VITE_GEMINI_API_KEY=...`
125+
- **Production**: Set the `VITE_GEMINI_API_KEY` environment variable in your deployment platform
126+
127+
## Troubleshooting
128+
129+
### "Gemini API Key Required" Warning
130+
131+
**Problem**: The editor shows a warning instead of loading.
132+
133+
**Solution**:
134+
1. Make sure you created the `.env` file in `examples/09-ai/08-gemini-quickstart/`
135+
2. Verify the file contains `VITE_GEMINI_API_KEY=your_key`
136+
3. Restart the dev server (`npm start`)
137+
138+
### API Key Not Working
139+
140+
**Problem**: AI features don't work or show errors.
141+
142+
**Solutions**:
143+
1. **Check your API key**: Visit [Google AI Studio](https://aistudio.google.com/apikey) and verify it's active
144+
2. **Check API quota**: Free tier has rate limits (15 requests/minute)
145+
3. **Check browser console**: Look for error messages
146+
4. **Verify .env format**: No quotes, no spaces around `=`
147+
148+
### CORS or Network Errors
149+
150+
**Problem**: Browser shows CORS or network errors.
151+
152+
**Solution**: This example uses **client-side API calls**, which work directly from the browser. Make sure:
153+
1. You're using a valid Gemini API key
154+
2. Your browser has internet access
155+
3. No browser extensions are blocking requests
156+
157+
### Port Already in Use
158+
159+
**Problem**: `npm start` fails because port is busy.
160+
161+
**Solution**: Vite will automatically try the next available port. Check the terminal output for the actual URL.
162+
163+
## Building for Production
164+
165+
To create a production build:
166+
167+
```bash
168+
npm run build:prod
169+
```
170+
171+
The built files will be in the `dist/` folder.
172+
173+
**Important for Production**:
174+
- Never commit your `.env` file to version control
175+
- Set `VITE_GEMINI_API_KEY` as an environment variable in your hosting platform
176+
- Consider using a backend proxy to secure your API key (see [Client-Side Transport example](../06-client-side-transport))
177+
178+
## Architecture
179+
180+
This example uses:
181+
- **BlockNote** - Rich text editor framework
182+
- **@blocknote/xl-ai** - AI extension for BlockNote
183+
- **Vercel AI SDK** - Unified AI interface (`ai` package)
184+
- **@ai-sdk/google** - Google Gemini provider
185+
- **ClientSideTransport** - Direct browser-to-Gemini communication
186+
187+
```
188+
User → BlockNote Editor → AI Extension → Vercel AI SDK → Gemini API
189+
```
190+
191+
## Next Steps
192+
193+
- **Explore other AI examples**: See `examples/09-ai/` for more patterns
194+
- **Add a backend**: Use [Server Prompt Builder](../07-server-promptbuilder) for better security
195+
- **Customize AI prompts**: Modify the system prompts for different behavior
196+
- **Add more features**: Check the [BlockNote docs](https://www.blocknotejs.org) for collaboration, custom blocks, and more
197+
198+
## Cost and Rate Limits
199+
200+
**Gemini Free Tier**:
201+
- ✅ No credit card required
202+
- ✅ 15 requests per minute
203+
- ✅ 1,500 requests per day
204+
- ✅ 1 million tokens per month
205+
206+
For higher limits, see [Gemini pricing](https://ai.google.dev/pricing).
207+
208+
## Resources
209+
210+
- [BlockNote Documentation](https://www.blocknotejs.org)
211+
- [BlockNote AI Extension Docs](https://www.blocknotejs.org/docs/ai)
212+
- [Google Gemini API Docs](https://ai.google.dev/docs)
213+
- [Vercel AI SDK Docs](https://sdk.vercel.ai/docs)
214+
215+
## Support
216+
217+
- Issues: [BlockNote GitHub Issues](https://github.com/TypeCellOS/BlockNote/issues)
218+
- Discussions: [BlockNote Discussions](https://github.com/TypeCellOS/BlockNote/discussions)
219+
220+
---
221+
222+
**That's it!** You now have a complete AI editor powered by Gemini. 🎉

‎examples/09-ai/08-gemini-quickstart/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Gemini AI Editor - Quick Start Guide</title>
6+
<script>
7+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
8+
</script>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/09-ai/08-gemini-quickstart/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./src/App.jsx";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/09-ai/08-gemini-quickstart/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@blocknote/example-ai-gemini-quickstart",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"type": "module",
5+
"private": true,
6+
"version": "0.12.4",
7+
"scripts": {
8+
"start": "vite",
9+
"dev": "vite",
10+
"build:prod": "tsc && vite build",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@blocknote/ariakit": "latest",
15+
"@blocknote/core": "latest",
16+
"@blocknote/mantine": "latest",
17+
"@blocknote/react": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"@mantine/core": "^8.3.4",
20+
"@mantine/hooks": "^8.3.4",
21+
"@mantine/utils": "^6.0.22",
22+
"react": "^19.2.0",
23+
"react-dom": "^19.2.0",
24+
"@blocknote/xl-ai": "latest",
25+
"@ai-sdk/google": "^1.0.9",
26+
"ai": "^5.0.45",
27+
"zustand": "^5.0.3"
28+
},
29+
"devDependencies": {
30+
"@types/react": "^19.2.2",
31+
"@types/react-dom": "^19.2.1",
32+
"@vitejs/plugin-react": "^4.7.0",
33+
"vite": "^5.4.20"
34+
}
35+
}

0 commit comments

Comments
 (0)