ShipTanStarter DocsAI
AI module integration with Cloudflare Workers AI and fal.ai, providing text generation, image generation, and more
The AI module delivers end-to-end AI capabilities through TanStack AI and Cloudflare Workers AI, with deep integration of TanStack AI's fal adapter (@tanstack/ai-fal) for image generation and editing.
Setup
| Environment Variable | Description |
|---|---|
CLOUDFLARE_ACCOUNT_ID | Cloudflare account ID for Workers AI REST calls |
CLOUDFLARE_API_TOKEN | Cloudflare API token with Workers AI > Read permission |
FAL_KEY | fal.ai API key for image generation, create one in fal.ai Dashboard |
All Workers AI calls go through the REST API, so no Workers Binding configuration is needed — they work in CI and external runtimes too.
If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.
Tech Stack
TanStack AI
Server-first AI orchestration framework with streaming and tool-calling support.
Cloudflare Workers AI
Edge AI inference platform offering Llama, Flux, Whisper, and more.
fal.ai
High-quality image generation service featuring Gemini, Flux, GPT Image 2, and more.
Directory Structure
src/api/
└── ai.ts # 8 server functions + helper functions
src/routes/(pages)/
└── ai.tsx # AI playground page
src/components/ai/
├── ai-summarization-card.tsx # Text summarization (BART)
├── ai-translation-card.tsx # Translation (m2m100, 10 languages)
├── ai-tagline-card.tsx # Tagline generator (Llama 3.1 chat)
├── ai-tts-card.tsx # Text to speech (Deepgram Aura, 12 voices)
├── ai-caption-card.tsx # Image captioning (LLaVA)
├── ai-cf-image-card.tsx # Image generation · Workers AI (Flux / SDXL / DreamShaper)
├── ai-image-card.tsx # Image generation · fal.ai (Gemini / Flux / GPT Image 2)
└── ai-image-edit-card.tsx # Image editing · fal.ai (avatar stylizer)AI Capabilities Overview
The AI module ships with the following out-of-the-box AI features, each backed by a dedicated UI card component:
Text Processing
- Text Summarization — Compress long articles into concise summaries; input 50–500 characters to get a refined overview.
- Text Translation — Many-to-many translation across 10 languages, with a one-click swap button to quickly toggle source and target languages.
- Tagline Generator — Provide a product description and automatically generate 5 marketing taglines, perfect for rapid brand copywriting.
Speech and Image Understanding
- Text to Speech (TTS) — Convert text into natural-sounding speech with 12 selectable voices (Asteria, Luna, Stella, etc.).
- Image Captioning — Upload an image to automatically generate descriptive text, with multiple preset prompt styles (short caption, detailed description, keyword extraction, etc.).
Image Generation and Editing
- Image Generation · Workers AI — Generate images via Cloudflare Workers AI, supporting multiple style models (Flux, SDXL, DreamShaper).
- Image Generation · fal.ai — Generate high-quality images via fal.ai, covering models from fast and cheap to premium and photorealistic.
- Avatar Stylizer — Upload a portrait and convert it into multiple styles in one click (Bobblehead, Pixar 3D, Anime Portrait, etc.) while preserving the subject's identity.