Chat App — PowerSync + TanStack Start + Mastra

A simple AI chat application demonstrating PowerSync for local-first reactive data, TanStack Start for the full-stack React framework, and Mastra for AI agent integration.

How It Works

• Messages are stored locally in SQLite via PowerSync's client-side database. Queries are reactive — the UI updates instantly when data changes.
• AI responses are generated server-side using a Mastra agent through a TanStack Start server function. The server function is called as a regular async function from the client — no manual API routes needed.
• Optional sync: The app includes a Docker Compose setup with Postgres and self-hosted PowerSync Service for full offline-first sync. Without it, the app works in local-only mode.

Tech Stack

Layer	Technology
Framework	TanStack Start (React + Vite)
Local Database	PowerSync Web SDK (SQLite via wa-sqlite)
AI	Mastra agent with MiniMax M2.5 via OpenRouter
Server Functions	createServerFn from TanStack Start
Sync Backend (optional)	Self-hosted PowerSync Service + Postgres

Quick Start

Prerequisites

• Node.js 18+
• An OpenRouter API key

Local-Only Mode (no Docker required)

# Install dependencies
npm install

# Create .env
cp .env.example .env
# Add your OpenRouter API key to .env

# Start the dev server
npm run dev

Open http://localhost:3000 and start chatting.

With Sync Backend (Docker)

To enable cross-device sync with Postgres and self-hosted PowerSync:

# Start Postgres, MongoDB, and PowerSync Service
docker compose up -d

# Start the dev server
npm run dev

Update src/routes/__root.tsx to call database.connect(new Connector()) and uncomment the Connector import to enable sync.

Project Structure

src/
├── lib/
│   ├── schema.ts         # PowerSync table schema
│   ├── connector.ts      # PowerSync backend connector (for sync mode)
│   └── server-fns.ts     # TanStack Start server function (Mastra AI)
├── routes/
│   ├── __root.tsx         # Root layout, PowerSync initialization
│   └── index.tsx          # Chat UI
├── router.tsx             # TanStack Router config
docker-compose.yml         # Postgres + MongoDB + PowerSync Service
powersync/
├── service.yaml           # PowerSync Service config
└── sync-config.yaml       # Sync rules
init.sql                   # Postgres schema

Environment Variables

Variable	Description
OPENROUTER_API_KEY	Your OpenRouter API key (required)
DATABASE_URL	Postgres connection string (sync mode only)
POWERSYNC_URL	PowerSync Service URL (sync mode only)
JWT_SECRET	JWT secret for PowerSync auth (sync mode only)

Testing

# Install Playwright browsers
npx playwright install chromium

# Run tests
npx playwright test

License

MIT