chat-template-ios.mp4
A high-performance AI chatbot template built with Expo and Expo Router. Ships with iOS 26 Liquid Glass support, a responsive web UI, and runs on iOS, Android, and web from a single codebase.
- Liquid Glass -- glassmorphic prompt composer, navigation bars, and toolbar buttons on iOS 26 via
expo-glass-effect - Web-first sidebar -- collapsible sidebar with Radix context menus, dropdown menus, and tooltips for a desktop-grade web experience
- Streaming messages with throttled ~30fps updates, markdown rendering (code blocks, tables, inline formatting), and shimmer loading states
- Platform-adaptive layouts -- native gesture-driven drawer on iOS/Android, sidebar + inset content panel on web
- Dark mode -- automatic light/dark theme using OKLCH design tokens in Tailwind CSS v4
- Native UI controls -- SwiftUI model picker menu, toolbar buttons, and haptic feedback on iOS
- Keyboard-aware -- prompt input stays above the keyboard with
react-native-keyboard-controller - Virtualized chat -- performant scrolling with
@legendapp/listand Reanimated-powered scroll-to-bottom button
| Layer | Technology |
|---|---|
| Framework | Expo SDK 55, React Native 0.83, React 19 |
| Navigation | Expo Router (file-based) with typed routes, Legend List for virtualized chat |
| Styling | Tailwind CSS v4 via Uniwind + tailwind-merge |
| Native UI | @expo/ui (SwiftUI), expo-symbols, expo-haptics, expo-glass-effect |
| Web UI | Radix UI (context menu, dropdown menu, tooltips), Lucide icons |
| Markdown | Custom AST renderer with mdast-util-from-markdown + react-syntax-highlighter |
| Animations | react-native-reanimated, react-native-gesture-handler |
Copy .env.example to .env and fill in the values:
cp .env.example .env| Variable | Description |
|---|---|
ANTHROPIC_API_KEY |
Your Anthropic API key. Used by the server-side chat API route (app/api/chat+api.ts) via @ai-sdk/anthropic. |
EXPO_PUBLIC_MOCK_AI |
Set to 1 to use mock streaming responses instead of calling the Anthropic API. Useful for UI development without an API key. |
# Install dependencies
bun install
# Start the dev server
bun start
# Run on a specific platform
bun run ios
bun run android
bun run webRequires Bun and the Expo CLI. For iOS, you'll need Xcode and a simulator or device.
Edit global.css to change the design tokens. Colors use OKLCH for perceptual uniformity across light and dark modes. The @theme block maps CSS variables to Tailwind classes:
--app-background -> bg-background
--app-foreground -> text-foreground
--app-muted -> bg-muted
--app-border -> border-border
/* etc. */The template ships with mock streaming responses in app/index.tsx. Replace mockStreamResponse with your API integration -- the streaming architecture (createStreamingStore + throttled token callback) is ready for real LLM APIs.
I recommend using Convex, which you can setup in a single command:
npx eas-cli@latest integrations:convex:connect
Pair this with better-auth for authentication. Convex also has support for Expo Notifications: Learn more.
This template was made for https://agent.expo.dev and is made freely available under the MIT license.