Client-side TanStack AI Demo

A browser-only demo for calling OpenRouter models with TanStack AI. It has two modes:

• Text: stream a chat response from an OpenRouter text model.
• Image: generate one image from an OpenRouter image model.

The app runs entirely in the client. There is no backend proxy. Instead, the user enters their OpenRouter API key in the browser, and it can optionally be saved in localStorage.

Deployed Demo

Tech Stack

• TanStack AI: text streaming and image generation APIs.
• OpenRouter: model provider for text and image requests.
• Solid: reactive UI.
• Civet: source language for the app UI and logic.
• Vite: dev server and production build.
• Sass: styling.
• pnpm: package manager.

Development

Install dependencies:

pnpm install

Start the dev server:

pnpm dev

Open the local URL shown by Vite, then enter an OpenRouter API key.

Available Scripts

# Run the Vite dev server on 127.0.0.1.
pnpm dev

# Typecheck the Civet source.
pnpm test

# Build the production site into dist.
pnpm build

# Preview the production build locally.
pnpm preview

Default Models

The demo starts with these editable model IDs:

• Text: moonshotai/kimi-k2.6
• Image: google/gemini-2.5-flash-image

Any compatible OpenRouter model ID can be entered in the model fields. The text request also includes an editable OpenRouter reasoning effort selector. See the OpenRouter models list for available model IDs.

Security Note

Because this is a client-side demo, the OpenRouter API key is visible to the browser runtime, including browser extensions. Use a development key, set appropriate limits in OpenRouter, and avoid sharing a deployed instance with a privileged key prefilled.