Overview#
Integration with a LangServe server via Vercel AI SDK.
Getting Started#
### Create a Next.JS projectnpx create-next-app@latest my-app
cd my-app
Install @langchain/core, AI SDK and @assistant-ui/react#
<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai", "@ai-sdk/react", "@langchain/core"]} />
Setup a backend route under /api/chat#
import { RemoteRunnable } from "@langchain/core/runnables/remote";
import { toDataStreamResponse } from "@ai-sdk/langchain";
export const maxDuration = 30;
export async function POST(req: Request) {
const { messages } = await req.json();
// TODO replace with your own langserve URL
const remoteChain = new RemoteRunnable({
url: "<YOUR_LANGSERVE_URL>",
});
const stream = await remoteChain.stream({
messages,
});
return toDataStreamResponse(stream);
}
Define a MyRuntimeProvider component#
// @filename: /app/MyRuntimeProvider.tsx
// ---cut---
"use client";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
export function MyRuntimeProvider({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const runtime = useChatRuntime();
return (
<AssistantRuntimeProvider runtime={runtime}>
{children}
</AssistantRuntimeProvider>
);
}
Wrap your app in MyRuntimeProvider#
// @include: MyRuntimeProvider
// @filename: /app/layout.tsx
// ---cut---
import type { ReactNode } from "react";
import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang="en">
<body>
<MyRuntimeProvider>{children}</MyRuntimeProvider>
</body>
</html>
);
}