Loading pattern preview
BlocksTools & Utilities
Local Image Ingest
Local Image Ingest
Caption a curated image, embed the caption, and export a portable image index without a vector database.
Use this when teaching or prototyping caption-then-embed for images and you want a downloadable index file as the result.
Loading pattern preview
Problems solved
Technical challenges this implementation handles out of the box.
- Caption an image then embed the caption in React state
- Export a portable image index without a vector database
- Teach caption-then-embed as a starting point for image search
Use cases
Products and workflows this pattern is designed to support.
- Image caption then embed prototypes
- Building a portable image index for browser search
- Workshops on embeddings without a vector database
Compare with
Similar patterns, and when each one is the better fit.
Local Image SearchUse this when you already have an exported image index and need to search it by meaning in the browser using caption embeddings.
Local RAG IngestUse this when a small docs or knowledge-base prototype needs its text turned into embeddings held in React state and saved as a portable index.
Generate Image (Grok Imagine)FreeUse this when your app should generate images on xAI Grok Imagine and you want a starting setup that shows results in a basic UI.
JSON Render ImageUse this when users describe a social card or marketing graphic in plain language and need a downloadable SVG or PNG image as the result.
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in. Then wire env vars and routes the same way.
- 1
Download → Next.js app
Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).
- 2
Extract the zip and install dependencies
Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.
- 3
Fill .env.local
The download includes .env.local placeholders when needed. Add real values for: AI_GATEWAY_API_KEY.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions in the generated project for your product.
- 5
Run the app and open the pattern route
Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.
Environment variables
AI_GATEWAY_API_KEYGet key
Capabilities
AI SDK APIs
generateTextembedExternal services
gatewayvercel-ai-gatewayUpstash
Files added
14 files
app/page.tsxapp/layout.tsxapp/api/caption-embed/route.tscomponents/local-image-ingest.tsxhooks/use-local-image-ingest.tslib/hash.tslib/caption-config.tslib/embedding-config.tslib/local-image-index.tslib/rate-limit.tslib/request-utils.tslib/sample-images.tsfixtures/sample-images.jsonREADME.md
Dependencies
8 total
npm packages
6UpstashAISDKlucide-reactNext.jsReactZod
Registry components
alert-dialogbutton
Critical files
3 files
lib/local-image-index.tsV1 portable image-index contract (schema, Zod validation, invariants, export constructor). Local Image Search must reuse this module as the compatibility seam—reject incompatible schema/version/model/dimensions/caption identity before cosineSimilarity.
lib/caption-config.tsPinned caption identity: google/gemini-2.5-flash with caption-prompt-v1, plus ALLOW_UNLISTED_IMAGES toggle (false for the deployed gallery allowlist).
caption-embed/route.tsStateless caption-then-embed boundary: generateText with a vision model, then Core embed of the caption using openai/text-embedding-3-small at 512 dimensions. Never persist images, captions, or vectors.
Requirements
- Complexity
- Intermediate
- Setup time
- ~10 minutes
- Node
- 24+
- Memory
- 256MB
Upstash Redis for deployed demo rate limiting
