Merge pull request #104 from langchain-ai/brace/use-next

refactor: Use next.js instead of vite

Author: bracesproul

.env.example

@@ -1,4 +1,5 @@
 # LangGraph Configuration
-VITE_API_URL=http://localhost:2024
-VITE_ASSISTANT_ID=agent
-VITE_LANGSMITH_API_KEY=
+NEXT_PUBLIC_API_URL=http://localhost:2024
+NEXT_PUBLIC_ASSISTANT_ID=agent
+# Do NOT prefix this with "NEXT_PUBLIC_" as we do not want this exposed in the client.
+LANGSMITH_API_KEY=

.gitignore

@@ -25,4 +25,6 @@ dist-ssr
 
 # LangGraph API
 .langgraph_api
-.env
+.env
+.next/
+next-env.d.ts

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

README.md

@@ -1,6 +1,6 @@
 # Agent Chat UI
 
-Agent Chat UI is a Vite + React application which enables chatting with any LangGraph server with a `messages` key through a chat interface.
+Agent Chat UI is a Next.js application which enables chatting with any LangGraph server with a `messages` key through a chat interface.
 
 > [!NOTE]
 > 🎥 Watch the video setup guide [here](https://youtu.be/lInrwVnZ83o).
@@ -36,7 +36,7 @@ Run the app:
 pnpm dev
 ```
 
-The app will be available at `http://localhost:5173`.
+The app will be available at `http://localhost:3000`.
 
 ## Usage
 
@@ -52,10 +52,9 @@ After entering these values, click `Continue`. You'll then be redirected to a ch
 
 You can bypass the initial setup form by setting the following environment variables:
 
-```
-VITE_API_URL=http://localhost:2024
-VITE_ASSISTANT_ID=agent
-VITE_LANGSMITH_API_KEY=your_api_key_if_needed
+```bash
+NEXT_PUBLIC_API_URL=http://localhost:2024
+NEXT_PUBLIC_ASSISTANT_ID=agent
 ```
 
 To use these variables:

index.html

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

next.config.mjs

@@ -10,28 +10,25 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "preview": "vite preview"
+    "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@langchain/core": "^0.3.41",
-    "@langchain/langgraph": "^0.2.54",
-    "@langchain/langgraph-api": "^0.0.15",
-    "@langchain/langgraph-cli": "^0.0.15",
-    "@langchain/langgraph-sdk": "^0.0.53",
+    "@langchain/core": "^0.3.44",
+    "@langchain/langgraph": "^0.2.63",
+    "@langchain/langgraph-sdk": "^0.0.66",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@tailwindcss/postcss": "^4.0.9",
-    "@tailwindcss/vite": "^4.0.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -47,7 +44,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.0.1",
-    "react-router-dom": "^6.17.0",
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.15.1",
     "rehype-katex": "^7.0.1",
@@ -62,23 +58,25 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
+    "@tailwindcss/postcss": "^4.0.13",
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.13.5",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.7",
     "eslint": "^9.19.0",
+    "eslint-config-next": "15.2.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",
+    "next": "^15.2.3",
+    "postcss": "^8.5.3",
     "tailwind-scrollbar": "^4.0.1",
-    "tailwindcss": "^4.0.6",
+    "tailwindcss": "^4.0.13",
     "typescript": "~5.7.2",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0"
+    "typescript-eslint": "^8.22.0"
   },
   "overrides": {
     "react-is": "^19.0.0-rc-69d4b800-20241021",