feat: LangServe runtime (#254)

Yonom · Jun 20, 2024 · fc04485 · fc04485
1 parent 78ebc4a
commit fc04485
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 0 deletions.
diff --git a/apps/www/pages/docs/runtimes/_meta.tsx b/apps/www/pages/docs/runtimes/_meta.tsx
@@ -1,5 +1,6 @@
 export default {
   "pick-a-runtime": "Picking a Runtime",
   "vercel-ai-sdk": "Vercel AI SDK",
+  "langserve": "LangChain LangServe",
   "custom-rest": "Custom REST API",
 };
diff --git a/apps/www/pages/docs/runtimes/langserve.mdx b/apps/www/pages/docs/runtimes/langserve.mdx
@@ -0,0 +1,111 @@
+---
+title: Langserve Runtime
+---
+
+## Overview
+
+Integration with a Langserve server via Vercel AI SDK.
+
+## Getting Started
+
+import { Steps } from 'nextra/components'
+
+<Steps>
+  ### Create a Next.JS project
+
+  ```sh
+  npx create-next-app@latest my-app
+  cd my-app
+  ```
+
+  ### Install `@langchain/core`, `ai-sdk` and `@assistant-ui/react`
+
+  ```sh npm2yarn
+  npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/react @langchain/core
+  ```
+
+  ### Setup a backend route under `/api/chat`
+
+  `@/app/api/chat/route.ts`
+
+  ```tsx
+  import { RemoteRunnable } from "@langchain/core/runnables/remote";
+  import { streamText } 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({
+      url: "<YOUR_LANGSERVE_URL>",
+    });
+
+    const stream = await remoteChain.stream({
+      messages,
+    });
+
+    const aiStream = LangChainAdapter.toAIStream(stream);
+
+    return new StreamingTextResponse(aiStream);
+  }
+  ```
+
+  ### Define a `MyRuntimeProvider` component
+
+  `@/app/MyRuntimeProvider.tsx`
+
+  ```tsx
+  "use client";
+
+  import { useChat } from '@ai-sdk/react';
+  import { AssistantRuntimeProvider } from '@assistant-ui/react';
+  import { useVercelUseChatRuntime } from '@assistant-ui/react-ai-sdk';
+
+  export function MyRuntimeProvider({
+    children,
+  }: Readonly<{
+    children: React.ReactNode;
+  }>) { 
+    const chat = useChat({
+      api: '/api/chat',
+    });
+
+    const runtime = useVercelUseChatRuntime(chat);
+
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        {children}
+      </AssistantRuntimeProvider>
+    );
+  }
+  ```
+
+  ### Wrap your app in `MyRuntimeProvider`
+
+  `@/app/layout.tsx`
+
+  ```tsx {1,11,17}
+  import { MyRuntimeProvider } from '@/app/MyRuntimeProvider';
+
+  ...
+
+  export default function RootLayout({
+    children,
+  }: Readonly<{
+    children: React.ReactNode;
+  }>) {
+    return (
+      <MyRuntimeProvider>
+        <html lang="en">
+          <body className={inter.className}>
+            {children}
+          </body>
+        </html>
+      </MyRuntimeProvider>
+    )
+  }
+  ```
+
+</Steps>