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

ai-core/media-generation

Coordinate server-side media generation with SSE streaming and polling.

3.0k|295|Updated Oct 8, 2025
Search Tags:#transcription#image-generation#speech-synthesis#media-generation#sse-streaming#tanstack-ai#video-polling
One-click install
npx skills add https://github.com/TanStack/ai --skill ai-core-media-generation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-core/media-generation
Source: https://github.com/TanStack/ai/tree/main/packages/typescript/ai/skills/ai-core/media-generation
Command: npx skills add https://github.com/TanStack/ai --skill ai-core-media-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinating server- and client-side generation for images, speech, transcription, and video is complex, and this skill centralizes the SSE streaming, polling, and hook wiring so each media activity follows the same reliable pattern.

Core Features & Use Cases

  • Unified SSE streaming: Server functions generate media with generateImage, generateSpeech, generateTranscription, and generateVideo, then wrap everything with toServerSentEventsResponse so clients receive tidy event streams.
  • Adapter guidance: Use openaiImage, geminiImage, openaiSpeech, openaiTranscription, and openaiVideo with their model-specific options, handle OpenAI URL expirations, and respect polling cadence for long-running jobs.
  • Use Case: Stream a generated image to a React component, poll video job status while streaming updates, and transcribe speech with the same hooks for consistent UX.

Quick Start

Use the media generation skill by wiring a generateImage stream through toServerSentEventsResponse and parsing it with useGenerateImage to show results instantly.

Frequently Asked Questions about ai-core/media-generation

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

FAQPage Schema
How do I stream AI-generated images and speech to a client using SSE?▼

Stream AI-generated images and speech by wrapping server functions with toServerSentEventsResponse, allowing clients to parse tidy event streams via useGenerate* hooks for real-time media delivery.

What is the best way to handle video generation polling in a React application?▼

Handle video generation polling by tracking job status through generateVideo server functions, which manage polling cadence for long-running jobs and stream updates directly to client hooks.

Can I use OpenAI and Gemini models interchangeably for media generation tasks?▼

You can use OpenAI and Gemini models interchangeably for media generation via dedicated adapters like openaiImage and geminiImage, each configured with model-specific options and expiration handling.

How do I build a unified server function for transcription, speech, and image generation?▼

Build a unified server function by applying consistent generateTranscription, generateSpeech, and generateImage patterns, centralizing SSE streaming and hook wiring so each media activity follows the same reliable workflow.

Why do my OpenAI generated media URLs expire and how can I manage this in my pipeline?▼

OpenAI generated media URLs expire due to API constraints, so you must handle URL expirations within your adapter configuration when wiring generateImage or generateVideo streams to client hooks.

Does TanStack Start support real-time client hooks for multiple media generation types?▼

TanStack Start supports real-time client hooks for multiple media types by exposing useGenerate* hooks that share consistent status, error, and reset controls across image, speech, transcription, and video streams.

Related Skills

Explore More Software Engineering Skills→
dthuy62dthuy62

ck:tanstack

Build TanStack Start, Form, and AI implementations with routing, validation, and streaming.

Community
Advanced
zerx-labzerx-lab
62

gpui-context

Manage GPUI contexts for state updates, notifications, and async tasks.

Community
Intermediate
salmanrranasalmanrrana
7

TanStack Forms

Integrate TanStack Forms with React for form construction, validation, and submission.

Community
Advanced
ZoyaAfzalZoyaAfzal

openai-chatkit-gemini

Integrate Gemini models with OpenAI Agents SDK and ChatKit backends.

Community
Advanced