Blocks
AI media
Beyond chat: make images, read text aloud, turn speech into text, and make short videos. Each works with any provider TanStack AI supports.
Examples
Images
Describe an image, pick a shape and generate two. The demo draws star patterns colored by your words; your app shows the model's images.
Your images appear here.
<script lang="ts">
import ImageStudio from '#lib/blocks/media/ImageStudio.svelte';
// In your app: connection={fetchServerSentEvents('/api/image')}.
import { demoImages } from './demo-media';
</script>
<ImageStudio fetcher={demoImages} placeholder="A tiled courtyard floor in Isfahan, morning light" />Read aloud
Turns text into speech and plays it as soon as it's ready. In this demo a short melody stands in for the voice.
<script lang="ts">
import SpeechStudio from '#lib/blocks/media/SpeechStudio.svelte';
// In your app: connection={fetchServerSentEvents('/api/speech')}.
import { demoSpeech } from './demo-media';
</script>
<SpeechStudio
fetcher={demoSpeech}
text="Knowledge is a tree whose roots are in study and whose fruit is in practice."
/>Transcribe
Record from the microphone, or upload a recording, and get the words back as text. The demo returns a fixed line.
This browser can't record; upload a recording instead.
<script lang="ts">
import Transcriber from '#lib/blocks/media/Transcriber.svelte';
// In your app: connection={fetchServerSentEvents('/api/transcribe')}.
import { demoTranscribe } from './demo-media';
</script>
<Transcriber fetcher={demoTranscribe} />Video
Describe a scene and choose a length. The demo records a turning star pattern; your app shows the model's video.
Your video appears here.
<script lang="ts">
import VideoStudio from '#lib/blocks/media/VideoStudio.svelte';
// In your app: connection={fetchServerSentEvents('/api/video')}.
import { demoVideo } from './demo-media';
</script>
<VideoStudio fetcher={demoVideo} placeholder="Stars turning over the observatory at Maragheh" />Installation
npx sinaui add blocks/mediaCopy the block you want from src/lib/blocks/media/, with the Button, Icon, Segmented, Textarea, Slider, Progress and Spinner components it uses. Then install TanStack AI:
pnpm add @tanstack/ai@0.63.0 @tanstack/ai-svelte@0.24.3TanStack AI is still before version 1, so these versions are exact: a newer one may change its API.
Each block takes a connection to your endpoint, such as fetchServerSentEvents('/api/image'), or a fetcher function that returns
the result directly.
Props
| Block | Props |
|---|---|
ImageStudio | connection or fetcher, count (2), placeholder |
SpeechStudio | connection or fetcher, voices, text (bindable) |
Transcriber | connection or fetcher |
VideoStudio | connection or fetcher, placeholder |
Accessibility
- Results are announced when ready; the areas they appear in are busy while working.
- Every generation can be stopped part way.
- The record button says whether it's recording; a blocked microphone is explained, with upload offered instead.
- The player's position is a slider read as elapsed and total time.