skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

ai-persistence/build-cloudflare-artifact-store

Implements R2-backed BlobStore and D1-backed ArtifactStore for persisting TanStack AI generated media on Cloudflare Workers.

3.1k|316|Updated Oct 8, 2025
Search Tags:#r2#D1#blob storage#tanstack ai#Cloudflare workers#artifact persistence#range requests
One-click install
npx skills add https://github.com/TanStack/ai --skill ai-persistence-build-cloudflare-artifact-store
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-persistence/build-cloudflare-artifact-store
Source: https://github.com/TanStack/ai/tree/main/packages/ai-persistence/skills/ai-persistence/build-cloudflare-artifact-store
Command: npx skills add https://github.com/TanStack/ai --skill ai-persistence-build-cloudflare-artifact-store

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/ai-persistence, @tanstack/ai, @tanstack/ai-openai.

What problem does it solve?

Generated media from TanStack AI (images, audio, video, transcripts) disappears unless you persist both the bytes and their metadata, and wiring durable storage into a Cloudflare Worker requires handling R2 stream-length constraints, multipart uploads, D1 schemas, and HTTP range requests correctly.

Core Features & Use Cases

  • R2 BlobStore: Implements the five-method BlobStore contract with streaming puts, automatic multipart upload for length-less streams, ranged reads for 206 responses, and cursor-paged listing.
  • D1 ArtifactStore: Provides the SQL schema and store implementation for artifact metadata with run- and thread-ordered indexes.
  • Composition and serving: Shows how to compose both stores with withGenerationPersistence and serve bytes back through a GET route honoring Range requests.
  • Use Case: A Worker generates an image with generateImage; the middleware streams the bytes straight from the provider CDN into R2 while D1 records the artifact, and a GET route later serves the file with seeking support for video playback.

Quick Start

Ask the AI to build a Cloudflare Worker persistence module that stores TanStack AI generated media bytes in R2 and artifact metadata in D1, then serve them through a range-aware GET route.

Frequently Asked Questions about ai-persistence/build-cloudflare-artifact-store

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I persist TanStack AI generated images and video on Cloudflare Workers?▼

Add both an ArtifactStore backed by D1 and a BlobStore backed by R2 to your persistence, then pass it to withGenerationPersistence. The middleware streams artifact bytes to R2 at key artifacts/<runId>/<artifactId> and records metadata in D1.

Why does R2 bucket.put fail with a ReadableStream body?▼

workerd requires a stream with a known length, but the middleware hands a TransformStream-wrapped body when capping fetched bytes. Re-declare the length via FixedLengthStream when expectedLength is known, or stream through a multipart upload one 8 MiB part at a time.

Can I use Cloudflare KV instead of D1 for artifact metadata?▼

No. The ArtifactStore contract requires ordered, indexed reads by run and thread, which needs a transactional indexed database. Use D1 or another transactional indexed database for metadata and keep the bytes in R2.

How do I serve stored artifacts with HTTP Range support?▼

Use retrieveArtifact to load the record, parseRangeHeader to resolve the Range header against its size, and retrieveBlob with the range so R2 slices in the bucket. Respond with 206 and Content-Range headers, and always include accept-ranges.

Does this approach work with S3, GCS, or Vercel Blob instead of R2?▼

Yes. BlobStore is a five-method contract that maps onto any object store: put to the SDK upload, get to a streaming download, head to metadata fetch, delete, and prefixed cursor-paged list. The skill includes one-line mappings for S3, GCS, Vercel Blob, Supabase, and a dev filesystem.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

cloudflare-worker-deployment

Automate wrangler.toml configuration for Hono/TypeScript apps on Cloudflare Workers.

Official
Advanced
alexander-kastilalexander-kastil

angular-ssr

Configure Angular v20+ server-side rendering with hydration and prerendering.

Community
Advanced
finlaysonstudiofinlaysonstudio
2

test

Standardize Vitest testing workflows across JavaScript monorepo packages.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

zustand-middleware

Compose Zustand middleware for persistence, DevTools, and Immer updates.

Official
Advanced