Kapable starter template: BYO-key AI Image Studio (auth, ai image, store)
- TypeScript 72.2%
- CSS 23.3%
- JavaScript 4.5%
cfd2721967
Forked from kapable-starter-kit. Demonstrates kapable-ai image modality (generic proxy pass-through; openrouter + google/gemini-2.5-flash-image via modalities:[image,text]), kapable-store (imagestudio-gallery bucket), and kapable-data (imagestudio_images metadata). Real generated bytes only. - app/lib/ai.server.ts: generateImage() — real bytes from the AI proxy - app/lib/store.server.ts: putImage/getImage — kapable-store - app/lib/gallery.server.ts: imagestudio_images metadata + listing - routes/api.generate.tsx: generate -> store -> record - routes/api.image.$id.tsx: stream stored bytes (+?download=1) - routes/home.tsx + app.css: impeccable composer + masonry gallery wall Verified locally end-to-end: 1.29MB PNG generated, stored, round-tripped, persisted on reload, downloaded with Content-Disposition. |
||
|---|---|---|
| app | ||
| public | ||
| .gitignore | ||
| .npmrc | ||
| bun.lock | ||
| DESIGN.md | ||
| package.json | ||
| react-router.config.ts | ||
| README.md | ||
| seed.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Image Studio — Kapable starter app
A BYO-key AI image generation studio. Type a prompt, generate a real image through the Kapable AI proxy (your org's own provider key), store it in kapable-store, and browse a gallery of everything you've conjured — each tile captioned with its prompt and re-downloadable.
Live: https://imagestudio.kapable-starters.kapable.run/
What it demonstrates
- kapable-ai (image modality) — the AI proxy is a generic OpenAI-compatible
pass-through, so an image-output model reached via
v1/chat/completionswithmodalities: ["image", "text"]returns real image bytes inline. Uses the org's existingopenrouterstrongbox key + an image model (google/gemini-2.5-flash-image, overridable viaIMAGESTUDIO_MODEL). No mocked images — every tile is real generated bytes. - kapable-store — generated PNGs are uploaded to the app-slug-prefixed
imagestudio-gallerybucket and re-served (the org credential stays server-side; the browser only hits this app's/api/image/:id). - kapable-data — gallery metadata (prompt, object key, model, timestamp)
lives in the
imagestudio_imagestable; the wall persists across reloads.
Architecture
| Layer | File | Role |
|---|---|---|
| SDK wiring | app/lib/kapable.server.ts |
per-service base URLs + the org key (KAPABLE_ORG_KEY) |
| Generate | app/lib/ai.server.ts |
prompt → real image bytes via the AI proxy |
| Store | app/lib/store.server.ts |
upload + re-serve the bytes (kapable-store) |
| Metadata | app/lib/gallery.server.ts |
the imagestudio_images table (kapable-data) |
| Generate route | app/routes/api.generate.tsx |
POST: generate → store → record |
| Image route | app/routes/api.image.$id.tsx |
stream stored bytes (?download=1 to download) |
| UI | app/routes/home.tsx + app/app.css |
composer + masonry gallery wall |
Run locally
bun install
bun run build
KAPABLE_ORG_KEY=sk_live_… bun run start # an sk_live_ org key with {read,write} scopes
Built on the kapable-starter-kit
golden skeleton. See DESIGN.md for the design rationale.