docs: update langserve example (#672)

Yonom · Aug 18, 2024 · ce4ed84 · ce4ed84
1 parent f9640b6
commit ce4ed84
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 29 deletions.
diff --git a/apps/docs/content/docs/runtimes/langserve.mdx b/apps/docs/content/docs/runtimes/langserve.mdx
@@ -33,29 +33,31 @@ npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai ai/react @langchai
 
 ### Setup a backend route under `/api/chat`
 
-`@/app/api/chat/route.ts`
-
-```tsx
+```tsx twoslash title="@/app/api/chat/route.ts"
+// @errors: 2558 2345
 import { RemoteRunnable } from "@langchain/core/runnables/remote";
-import { streamText } from "ai";
+import type { RunnableConfig } from "@langchain/core/runnables";
+import { streamText, LangChainAdapter, type Message } from "ai";
 
 export const maxDuration = 30;
 
 export async function POST(req: Request) {
   const { messages } = await req.json();
 
-  // TODO replace with your own API URL
-  const remoteChain = new RemoteRunnable({
+  // TODO replace with your own langserve URL
+  const remoteChain = new RemoteRunnable<
+    { messages: Message },
+    string,
+    RunnableConfig
+  >({
     url: "<YOUR_LANGSERVE_URL>",
   });
 
   const stream = await remoteChain.stream({
     messages,
   });
 
-  const aiStream = LangChainAdapter.toAIStream(stream);
-
-  return new StreamingTextResponse(aiStream);
+  return LangChainAdapter.toDataStreamResponse(stream);
 }
 ```
 
@@ -64,9 +66,9 @@ export async function POST(req: Request) {
 
 ### Define a `MyRuntimeProvider` component
 
-`@/app/MyRuntimeProvider.tsx`
-
-```tsx
+```tsx twoslash include MyRuntimeProvider title="@/app/MyRuntimeProvider.tsx"
+// @filename: /app/MyRuntimeProvider.tsx
+// ---cut---
 "use client";
 
 import { useChat } from "ai/react";
@@ -97,27 +99,25 @@ export function MyRuntimeProvider({
 
 ### Wrap your app in `MyRuntimeProvider`
 
-`@/app/layout.tsx`
-
-```tsx {1,11,17}
-import { MyRuntimeProvider } from '@/app/MyRuntimeProvider';
-
-...
+```tsx twoslash title="@/app/layout.tsx"
+// @include: MyRuntimeProvider
+// @filename: /app/layout.tsx
+// ---cut---
+import type { ReactNode } from "react";
+import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <MyRuntimeProvider>
       <html lang="en">
-        <body className={inter.className}>
-          {children}
-        </body>
+        <body>{children}</body>
       </html>
     </MyRuntimeProvider>
-  )
+  );
 }
 ```
 

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -16,6 +16,7 @@
     "@assistant-ui/react-markdown": "workspace:^",
     "@assistant-ui/react-syntax-highlighter": "workspace:^",
     "@assistant-ui/tsconfig": "workspace:^",
+    "@langchain/core": "^0.2.27",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",