support langchain api key

Author: Yonom

.env.example

@@ -1,2 +1,3 @@
-NEXT_PUBLIC_LANGGRAPH_API_URL=your_langgraph_api_url
+LANGCHAIN_API_KEY=your_langchain_api_key
+LANGGRAPH_API_URL=your_langgraph_api_url
 NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_assistant_id_or_graph_id 

README.md

@@ -5,8 +5,9 @@ This is the [assistant-ui](https://github.com/Yonom/assistant-ui) starter projec
 First, add your langgraph API url and assistant id to `.env.local` file:
 
 ```
-NEXT_PUBLIC_LANGGRAPH_API_URL=your_langgraph_api_url
-NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_assistant_id_or_graph_id
+LANGCHAIN_API_KEY=your_langchain_api_key
+LANGGRAPH_API_URL=your_langgraph_api_url
+NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_assistant_id_or_graph_id 
 ```
 
 Then, run the development server:

app/MyRuntimeProvider.tsx

@@ -13,15 +13,15 @@ export function MyRuntimeProvider({
   const threadIdRef = useRef<string | undefined>();
   const runtime = useLangGraphRuntime({
     threadId: threadIdRef.current,
-    stream: async (message) => {
+    stream: async (messages) => {
       if (!threadIdRef.current) {
         const { thread_id } = await createThread();
         threadIdRef.current = thread_id;
       }
       const threadId = threadIdRef.current;
       return sendMessage({
         threadId,
-        message,
+        messages,
       });
     },
   });

app/api/[..._path]/route.ts

@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const runtime = "edge";
+
+function getCorsHeaders() {
+  return {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
+    "Access-Control-Allow-Headers": "*",
+  };
+}
+
+async function handleRequest(req: NextRequest, method: string) {
+  try {
+    const path = req.nextUrl.pathname.replace(/^\/?api\//, "");
+    const url = new URL(req.url);
+    const searchParams = new URLSearchParams(url.search);
+    searchParams.delete("_path");
+    searchParams.delete("nxtP_path");
+    const queryString = searchParams.toString()
+      ? `?${searchParams.toString()}`
+      : "";
+
+    const options: RequestInit = {
+      method,
+      headers: {
+        "x-api-key": process.env["LANGCHAIN_API_KEY"] || "",
+      },
+    };
+
+    if (["POST", "PUT", "PATCH"].includes(method)) {
+      options.body = await req.text();
+    }
+
+    console.log({ url, path, queryString, options });
+
+    const res = await fetch(
+      `${process.env["LANGGRAPH_API_URL"]}/${path}${queryString}`,
+      options
+    );
+
+    return new NextResponse(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: {
+        ...res.headers,
+        ...getCorsHeaders(),
+      },
+    });
+  } catch (e: any) {
+    return NextResponse.json({ error: e.message }, { status: e.status ?? 500 });
+  }
+}
+
+export const GET = (req: NextRequest) => handleRequest(req, "GET");
+export const POST = (req: NextRequest) => handleRequest(req, "POST");
+export const PUT = (req: NextRequest) => handleRequest(req, "PUT");
+export const PATCH = (req: NextRequest) => handleRequest(req, "PATCH");
+export const DELETE = (req: NextRequest) => handleRequest(req, "DELETE");
+
+// Add a new OPTIONS handler
+export const OPTIONS = () => {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      ...getCorsHeaders(),
+    },
+  });
+};

app/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Thread } from "@assistant-ui/react";
 import { makeMarkdownText } from "@assistant-ui/react-markdown";
 

lib/chatApi.ts

@@ -4,7 +4,7 @@ import { LangChainMessage } from "@assistant-ui/react-langgraph";
 const createClient = () => {
   const apiUrl =
     process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"] ||
-    "https://localhost:8123/api";
+    new URL("/api", window.location.href).href;
   return new Client({
     apiUrl,
   });
@@ -17,15 +17,15 @@ export const createThread = async () => {
 
 export const sendMessage = async (params: {
   threadId: string;
-  message: LangChainMessage;
+  messages: LangChainMessage[];
 }) => {
   const client = createClient();
   return client.runs.stream(
     params.threadId,
     process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
     {
       input: {
-        messages: [params.message],
+        messages: params.messages,
       },
       streamMode: "messages",
     }

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@ai-sdk/openai": "^0.0.58",
     "@assistant-ui/react": "^0.5.51",
-    "@assistant-ui/react-langgraph": "^0.0.3",
+    "@assistant-ui/react-langgraph": "^0.0.5",
     "@assistant-ui/react-markdown": "^0.2",
     "@langchain/langgraph-sdk": "^0.0.8",
     "next": "14.2.9",