Next.js 15 + Vercel AI SDK 5 + AI Elements + Pinecone
A polished RAG (Retrieval-Augmented Generation) app with streaming chat, citations, explore, summarize-range, and flashcards.
Optimized for performance, clarity, and modern Vercel AI workflows. Powered by Google Gemini with 12 languages supported: English, Spanish, Portuguese, French, German, Italian, Chinese, Japanese, Korean, Arabic, Russian, and Hindi.
pnpm i
cp .env.example .env.local
# Add your environment variables:
# GOOGLE_GENERATIVE_AI_API_KEY=your-api-key
# PINECONE_API_KEY=your-pinecone-key
# PINECONE_INDEX=your-index-name
# GENERATION_MODEL=gemini-2.5-flash-preview-09-2025 (or your preferred Gemini model)
# EMBEDDING_MODEL=text-embedding-004 (Google's embedding model)npx ai-elements@latest init
npx ai-elements@latest add conversation message prompt-input sources inline-citation responsePlace your thesis file at:
public/thesis.pdf
This project uses Pinecone for vector storage and similarity search.
- Create a Pinecone index with 1536 dimensions (for Google's text-embedding-004)
- Add your API key and index name to
.env.local - Run the ingestion script (see next step)
pnpm ingestThis script:
- Parses
public/thesis.pdfwith pdfjs-dist - Splits content per-page into semantic chunks
- Embeds chunks using Google's text-embedding-004 via Vercel AI SDK
- Stores vectors in Pinecone for fast similarity search
pnpm devThen open: 👉 http://localhost:3000 (English - default)
Access the app in any of these languages by changing the URL prefix:
- 🇺🇸 English:
/or/en - 🇪🇸 Spanish:
/es - 🇵🇹 Portuguese:
/pt - 🇫🇷 French:
/fr - 🇩🇪 German:
/de - 🇮🇹 Italian:
/it - 🇨🇳 Chinese:
/zh - 🇯🇵 Japanese:
/ja - 🇰🇷 Korean:
/ko - 🇸🇦 Arabic:
/ar - 🇷🇺 Russian:
/ru - 🇮🇳 Hindi:
/hi
The app includes a LocaleSwitcher in the top-right corner with a scrollable dropdown for seamless language switching.
- Add the following as Vercel Project Environment Variables:
GOOGLE_GENERATIVE_AI_API_KEYPINECONE_API_KEYPINECONE_INDEXGENERATION_MODEL(optional)EMBEDDING_MODEL(optional)
- Deploy your app (the
/api/chatroute streams UI responses in real time).
- 🤖 Google Gemini AI - Uses
gemini-2.5-flash-previewfor fast, high-quality responses - 🌍 12 Languages - Full i18n support via next-intl v4 (EN, ES, PT, FR, DE, IT, ZH, JA, KO, AR, RU, HI)
- 🎯 Pinecone Vector Search - Fast, scalable semantic search
- 🎨 AI Elements - Beautiful UI components:
Conversation,Message,PromptInput,InlineCitation - 📚 Multiple Modes - Chat, Explore, Summarize, and Flashcards
- 🔗 Citations - Inline citations with page references
- ⚡ Streaming - Real-time AI responses with streaming support
- 🎓 Flashcard Generator - AI-powered flashcards with contextual chat
- 📱 Responsive Design - Mobile-first approach with Tailwind CSS
| Component | Purpose |
|---|---|
| Vercel AI SDK 5 | Unified text generation & streaming (streamText) with typed tool & embedding APIs — perfect for route handlers or server actions. |
| Google Gemini | Latest multimodal AI with excellent performance, cost-effectiveness, and long context windows. |
| AI Elements | Real AI-native UI built on shadcn/ui — plug-and-play components for beyond-chat interactions. |
| Pinecone | Managed vector database with fast similarity search, automatic scaling, and production-ready infrastructure. |
| next-intl v4 | Type-safe internationalization with automatic locale routing and SEO optimization. |
- Change
GENERATION_MODELin.env.localto use different Gemini models:gemini-2.5-flash-preview-09-2025(fast, recommended)gemini-2.0-flash(quicker)gemini-2.5-pro(more capable)
- Adjust temperature and other parameters in
/api/chat/route.ts
- Tune chunk size / overlap in
lib/chunk.tsfor best retrieval accuracy - Adjust the number of retrieved chunks in
searchSimilar()(default: 6) - Pinecone automatically handles index optimization
The app supports 12 languages out of the box:
- European: English, Spanish, Portuguese, French, German, Italian
- Asian: Chinese (Simplified), Japanese, Korean, Hindi
- Middle Eastern: Arabic
- Eastern European: Russian
To add more languages:
- Add locale code to
src/i18n/routing.tslocales array - Create
messages/{locale}.jsonwith all translation keys - Add locale to middleware matcher in
src/middleware.ts - Update LocaleSwitcher component with locale display code
All translation files are in the messages/ directory with consistent JSON structure.
- For inline hover citations (Perplexity-style), wire token-level data into
InlineCitation - AI Elements includes patterns for advanced interactions
✅ Chat Interface - Streaming responses with inline citations
✅ Explore Tab - Semantic search across your thesis
✅ Summarize Tab - Page-range summarization
✅ Flashcards Tab - AI-generated study cards with contextual chat
✅ PDF Viewer - Integrated thesis viewer with page jumping
✅ 12 Language Support - Full internationalization with next-intl v4
✅ Responsive Design - Mobile-optimized layout
✅ Type-Safe - Complete TypeScript coverage
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm ingest # Ingest PDF into Pinecone
pnpm migrate # (Legacy) Pinecone migration if needed- Vercel AI SDK Docs - AI SDK documentation
- next-intl Docs - Internationalization guide
- Pinecone Docs - Vector database documentation
Author: Alejandro Comi | Koffe AI | El Café de los Sentidos
Tech stack: Next.js 15 • TypeScript • React 19 • Vercel AI SDK 5 • Google Gemini • AI Elements • Pinecone • next-intl v4 • Shadcn UI • Tailwind CSS
License: MIT