Skip to content
ShipSaaSShipSaaS Docs

AI

The AI module delivers end-to-end AI capabilities through TanStack AI and Cloudflare Workers AI, and is deeply integrated with TanStack AI’s fal adapter (@tanstack/ai-fal) to achieve image generation and image editing features.

Setup

Section titled “Setup”
Environment Variable Description
CLOUDFLARE_ACCOUNT_ID Cloudflare account ID, used for Workers AI REST API calls
CLOUDFLARE_API_TOKEN Cloudflare API token, requires Workers AI > Read permissions
FAL_KEY fal.ai API key, used for image generation, created in the fal.ai Dashboard

All Workers AI invocations are performed via the REST API. Therefore, configuring Workers bindings is not required, and it can run just as well in CI and other environment runtimes.

If you are setting up your environment, you can now return to the Environment Configuration document and continue. The remainder of this document can be read later.

Environment configuration set environment variables

Technology Stack

Section titled “Technology Stack”
  • TanStack AI - A service-first AI orchestration framework, supporting streaming outputs and tool calling.
  • Cloudflare Workers AI - An edge AI inference platform offering models such as Llama, Flux, Whisper, and more.
  • fal.ai - A high-quality image generation service hosting models like Gemini, Flux, GPT Image 2, etc.

Directory Structure

Section titled “Directory Structure”
src/api/
└── ai.ts                       # 8 Server Functions + helper utilities


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 synthesis (Deepgram Aura, 12 voices)
├── ai-caption-card.tsx         # Image description generator (LLaVA)
├── ai-cf-image-card.tsx        # Image generation via Workers AI (Flux / SDXL / DreamShaper)
├── ai-image-card.tsx           # Image generation via fal.ai (Gemini / Flux / GPT Image 2)
└── ai-image-edit-card.tsx      # Image editing via fal.ai (avatar stylization)

AI Capabilities Overview

Section titled “AI Capabilities Overview”

The AI module includes the following out-of-the-box AI features, each represented by a self-contained UI card component:

Text Processing

Section titled “Text Processing”
  • Text Summarization — Compresses long articles into concise summaries. Input 50–500 characters to get a refined abstract.
  • Text Translation — Supports multi-language translation among 10 languages, offering a one-click swap button to quickly switch source and target languages.
  • Tagline Generator — Input a product description to automatically generate 5 marketing taglines, perfect for rapid brand copywriting.

Audio and Visual Understanding

Section titled “Audio and Visual Understanding”
  • Speech Synthesis (TTS) — Converts text to natural-sounding speech with 12 optional voices (Asteria, Luna, Stella, etc.).
  • Image Description Generator — Upload an image to automatically generate descriptive text, supporting multiple preset prompt styles (short description, detailed description, keyword extraction, etc.).

Image Generation and Editing

Section titled “Image Generation and Editing”
  • Image Generation via Workers AI — Generates images via Cloudflare Workers AI, supporting multiple style models (Flux, SDXL, DreamShaper).
  • Image Generation via fal.ai — Generates high-quality images via fal.ai, covering multiple tiers of models from fast and cost-effective to premium and photorealistic.
  • Avatar Stylization — Upload a portrait photo to convert it with one click into various styles (Bobblehead, Pixar 3D, Anime Avatar, etc.) while retaining distinct personal facial characteristics.

Next Steps

Section titled “Next Steps”

Explore more related features: