From fc044857daf3adff18e54bdac8c2e2fbcef66e64 Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Wed, 19 Jun 2024 19:46:56 -0700 Subject: [PATCH] feat: LangServe runtime (#254) --- apps/www/pages/docs/runtimes/_meta.tsx | 1 + apps/www/pages/docs/runtimes/langserve.mdx | 111 +++++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 apps/www/pages/docs/runtimes/langserve.mdx diff --git a/apps/www/pages/docs/runtimes/_meta.tsx b/apps/www/pages/docs/runtimes/_meta.tsx index abd890bba..15c74b819 100644 --- 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 new file mode 100644 index 000000000..65d21e55c --- /dev/null +++ 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' + + + ### 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: "", + }); + + 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 ( + + {children} + + ); + } + ``` + + ### 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 ( + + + + {children} + + + + ) + } + ``` + +