Set your OpenAI API key as an environment variable accessible to the server route:

OPENAI_API_KEY=sk-...

For Expo Go / EAS builds, add it to .env.local and expose it server-side only (never embed in the client bundle).

Project setup

1. Copy source files. Paste the src/ directory into your project root. Adjust the alias @/ in your imports if your project uses a different src layout.

2. Configure path alias. Ensure tsconfig.json maps @/* to src/*:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

3. Wire Metro. Replace or merge your existing metro.config.js with:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./src/global.css" });

4. Wire Babel. Replace or merge babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

5. Wire Tailwind. Ensure tailwind.config.js points at your source and includes the NativeWind preset (as shown in the provided file).

6. Import global CSS. In your root layout (src/app/_layout.tsx) add:

import "@/global.css";

7. Set OPENAI_API_KEY. Add it to .env.local. The API route at src/app/api/chat+api.ts reads it server-side via process.env.OPENAI_API_KEY.

Public API

Page (default export from src/app/index.tsx)

export default function Page(): JSX.Element

The Expo Router screen component for the / route. Renders <Chat /> directly. Drop this file into your app/ directory to register the route, or call <Chat /> from any existing screen.

Chat (default export from src/components/chat.tsx)

import { Chat } from "@/components/chat";
// usage:
<Chat />

The stateful chat container. Manages message history, calls the /api/chat streaming endpoint, and composes all sub-components (UserMessage, ToolCards, KeyboardPadding). Use this as the single mount point for the entire AI chat experience.

withNativeWind (re-exported from metro.config.js usage)

withNativeWind(config: MetroConfig, options: { input: string }): MetroConfig

Metro transform that enables NativeWind's CSS-to-JS compilation. The input path must point to your global.css that contains @tailwind directives. Called once in metro.config.js; no runtime usage needed.

cn (from src/lib/utils.ts)

import { cn } from "@/lib/utils";
cn(...classes: ClassValue[]): string

Class-name merger (wraps clsx + tailwind-merge). Use it anywhere you conditionally compose Tailwind class strings in components, keeping NativeWind-compatible output.

Working examples

Scenario - Embed the full chat in an existing screen

Drop the chat view into any existing Expo Router screen without touching the API route.

// src/app/(tabs)/assistant.tsx
import { Chat } from "@/components/chat";
import { SafeAreaView } from "react-native-safe-area-context";

export default function AssistantTab() {
  return (
    <SafeAreaView className="flex-1 bg-white">
      <Chat />
    </SafeAreaView>
  );
}

Scenario - Use the user message bubble in a custom layout

Render UserMessage independently inside a custom list renderer.

// src/components/custom-thread.tsx
import { UserMessage } from "@/components/user-message";
import { ScrollView } from "react-native";

const messages = [
  { id: "1", content: "Hello, what can you do?" },
  { id: "2", content: "Show me the weather in Berlin." },
];

export function CustomThread() {
  return (
    <ScrollView className="flex-1 p-4">
      {messages.map((msg) => (
        <UserMessage key={msg.id} content={msg.content} />
      ))}
    </ScrollView>
  );
}

Scenario - Integrate the streaming API route with a custom model

Modify the server-side API route to swap the model or add a system prompt.

// src/app/api/chat+api.ts  (extended version)
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai("gpt-4o"),
    system: "You are a concise assistant. Reply in plain text only.",
    messages,
    maxTokens: 512,
  });

  return result.toDataStreamResponse();
}

Scenario - Apply the fetch polyfill in a standalone native module

If you add another file that relies on streaming fetch on native, import the polyfill at the top:

// src/utils/my-streaming-client.ts
import "@/utils/fetch-polyfill";

export async function streamFromCustomEndpoint(prompt: string) {
  const res = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ messages: [{ role: "user", content: prompt }] }),
  });
  return res.body; // ReadableStream available after polyfill
}

File walkthrough

• src/app/index.tsx - Single-route entry screen; delegates all UI to <Chat />.
• src/app/_layout.tsx - Expo Router root layout; imports global CSS, provides safe-area and navigation context.
• src/app/api/chat+api.ts - Server function (Expo Router API route) that proxies messages to the OpenAI streaming endpoint via the AI SDK.
• src/components/chat.tsx - Stateful chat container; owns message list, input field, and streaming lifecycle.
• src/components/keyboard-padding.tsx - Listens to Keyboard events and insets scroll content so the input is never hidden.
• src/components/tool-cards.tsx - Renders AI tool-call results (structured data) as card UI elements.
• src/components/user-message.tsx - Presentational bubble for outgoing user messages.
• src/lib/utils.ts - cn helper combining clsx and tailwind-merge for safe class composition.
• src/utils/fetch-polyfill.ts - Patches global fetch on React Native to support ReadableStream bodies needed by the AI SDK.
• src/utils/fetch-polyfill.web.ts - Platform override that skips the polyfill on web where native fetch is sufficient.
• src/global.css - NativeWind entry stylesheet with @tailwind base/components/utilities directives.
• tailwind.config.js - Tailwind config scoped to src/**, using NativeWind preset and hoverOnlyWhenSupported.
• metro.config.js - Metro config with withNativeWind wrapper pointing at global.css.
• babel.config.js - Expo Babel preset with jsxImportSource: "nativewind" and nativewind/babel plugin.
• nativewind-env.d.ts - Auto-generated; provides TypeScript types for className prop on RN components.
• app.json - Expo project manifest (name, slug, SDK version, plugins).
• tsconfig.json - TypeScript config with path aliases and Expo preset extension.
• global.d.ts - Ambient declarations for non-TS assets or global augmentations.

Common pitfalls and fixes

• Streaming fetch fails silently on iOS/Android. Import @/utils/fetch-polyfill before any AI SDK call in native entry points; the polyfill patches fetch to handle ReadableStream.
• className prop not recognized by TypeScript. Ensure nativewind-env.d.ts is included in tsconfig.json include array and never manually edited.
• NativeWind styles not applied at runtime. Confirm metro.config.js uses withNativeWind with the correct input path; a wrong path silently produces unstyled output.
• OPENAI_API_KEY leaks to the client bundle. Only read it inside src/app/api/ server files; never import it in component files. Expo Router API routes run server-side only.
• Metro cache stale after changing tailwind.config.js. Run npx expo start --clear to force a full cache invalidation.
• babel-preset-expo version mismatch with NativeWind. Pin nativewind and babel-preset-expo to mutually compatible versions; check the NativeWind release notes for the exact pairing.

Vibe-coding prompt template

I have an Expo Router project. I want to integrate the `with-router-ai` source block into it.

Context files available:
- source/ (the full block, as described in USAGE.md)
- USAGE.md (integration guide)

Please help me do the following step by step:

1. Copy the files from source/src/ into my project's src/ directory, resolving any naming conflicts with my existing files.
2. Merge metro.config.js, babel.config.js, tailwind.config.js, and tsconfig.json changes into my existing config files without overwriting my current settings.
3. Add all required npm dependencies listed in USAGE.md ## Required dependencies.
4. Wire the OPENAI_API_KEY environment variable so it is only accessible server-side in the API route.
5. Register the /api/chat route and the root Chat screen in my existing Expo Router layout.
6. Verify that the NativeWind fetch polyfill is imported before any AI SDK usage in native entry points.
7. Run a quick sanity check: show me what the final src/app/_layout.tsx and metro.config.js should look like in my project.

My existing project structure is: [PASTE YOUR FILE TREE HERE]
My existing package.json dependencies are: [PASTE HERE]

License and credit

See source/LICENSE if present. This example originates from the official Expo Examples repository, maintained by the Expo team. Refer to that repository for the upstream license (typically MIT) and the latest source.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

The full install guide and integration prompts unlock after purchase.