vercel · elunno · Nov 27, 2025 · Nov 27, 2025
diff --git a/examples/next-basic-chat/README.md b/examples/next-basic-chat/README.md
@@ -0,0 +1,23 @@
+# Next.js Basic Chat Example
+
+A minimal Next.js App Router chat example using the Vercel AI SDK.
+
+## Features
+
+- `@ai-sdk/react` → `useChat` hook for client-side chat
+- `@ai-sdk/openai` + `streamText` for server streaming
+- Edge runtime
+- Clean and minimal UI
+
+## Setup
+
+1. Add your key (`AI_GATEWAY_API_KEY`) to `.env.local` in the **repo root**:
+
+AI_GATEWAY_API_KEY=your_key_here
+
+
+2. Install & run:
+
+
+pnpm install
+pnpm dev --filter ai-examples-next-basic-chat
diff --git a/examples/next-basic-chat/app/api/chat/route.ts b/examples/next-basic-chat/app/api/chat/route.ts
@@ -0,0 +1,15 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
+
+export const runtime = "edge";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o-mini"),
+    messages
+  });
+
+  return result.toDataStreamResponse();
+}
diff --git a/examples/next-basic-chat/app/layout.tsx b/examples/next-basic-chat/app/layout.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+export const metadata = {
+  title: "AI SDK – Next.js Basic Chat",
+  description: "Minimal chat example using Vercel AI SDK."
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body
+        style={{
+          margin: 0,
+          fontFamily: "system-ui, sans-serif",
+          backgroundColor: "#0b1120",
+          color: "#e2e8f0"
+        }}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/next-basic-chat/app/page.tsx b/examples/next-basic-chat/app/page.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { FormEvent } from "react";
+
+export default function Page() {
+  const { messages, input, handleInputChange, handleSubmit, isLoading, error } =
+    useChat({
+      api: "/api/chat"
+    });
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleSubmit(e);
+  };
+
+  return (
+    <main
+      style={{
+        maxWidth: 720,
+        margin: "0 auto",
+        padding: "2rem 1rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1.5rem",
+        minHeight: "100vh"
+      }}
+    >
+      <h1 style={{ fontSize: "1.6rem", margin: 0 }}>Next.js Basic Chat</h1>
+
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          border: "1px solid rgba(148,163,184,0.35)",
+          padding: "1rem",
+          borderRadius: 12,
+          backgroundColor: "#0f172a90",
+          maxHeight: "60vh",
+          overflowY: "auto"
+        }}
+      >
+        {messages.map(m => (
+          <div
+            key={m.id}
+            style={{
+              alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+              backgroundColor:
+                m.role === "user"
+                  ? "rgba(59,130,246,0.2)"
+                  : "rgba(15,23,42,0.85)",
+              borderRadius: 8,
+              padding: "0.6rem 0.8rem",
+              maxWidth: "75%"
+            }}
+          >
+            <div
+              style={{
+                opacity: 0.7,
+                fontSize: "0.75rem",
+                marginBottom: 4
+              }}
+            >
+              {m.role === "user" ? "You" : "AI"}
+            </div>
+            {m.content}
+          </div>
+        ))}
+
+        {error && (
+          <div style={{ color: "#f87171", fontSize: "0.9rem" }}>
+            {String(error.message ?? error)}
+          </div>
+        )}
+      </div>
+
+      <form
+        onSubmit={onSubmit}
+        style={{
+          display: "flex",
+          gap: "0.75rem",
+          alignItems: "center"
+        }}
+      >
+        <input
+          value={input}
+          onChange={handleInputChange}
+          placeholder="Ask something..."
+          style={{
+            flex: 1,
+            padding: "0.7rem 1rem",
+            borderRadius: 999,
+            border: "1px solid rgba(148,163,184,0.5)",
+            backgroundColor: "#0f172a",
+            color: "#e2e8f0"
+          }}
+        />
+
+        <button
+          type="submit"
+          disabled={isLoading || !input.trim()}
+          style={{
+            padding: "0.7rem 1.1rem",
+            borderRadius: 999,
+            background:
+              "linear-gradient(to right, rgb(59,130,246), rgb(56,189,248))",
+            border: "none",
+            fontWeight: 600,
+            cursor: isLoading ? "default" : "pointer",
+            opacity: isLoading || !input.trim() ? 0.5 : 1
+          }}
+        >
+          {isLoading ? "..." : "Send"}
+        </button>
+      </form>
+    </main>
+  );
+}
diff --git a/examples/next-basic-chat/next.config.mjs b/examples/next-basic-chat/next.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    reactCompiler: false
+  }
+};
+
+export default nextConfig;
diff --git a/examples/next-basic-chat/package.json b/examples/next-basic-chat/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "ai-examples-next-basic-chat",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "ai": "workspace:*",
+    "@ai-sdk/react": "workspace:*",
+    "@ai-sdk/openai": "workspace:*",
+    "next": "15.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  }
+}
diff --git a/examples/next-basic-chat/tsconfig.json b/examples/next-basic-chat/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.with-examples.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}