# LangChain LangServe
URL: /docs/runtimes/langserve
Connect to LangServe endpoints via Vercel AI SDK integration.
This integration has not been tested with AI SDK v5.
Overview \[#overview]
Integration with a LangServe server via Vercel AI SDK.
Getting Started \[#getting-started]
Create a Next.JS project \[#create-a-nextjs-project]
```sh
npx create-next-app@latest my-app
cd my-app
```
Install @langchain/core, AI SDK and @assistant-ui/react \[#install-langchaincore-ai-sdk-and-assistant-uireact]
Setup a backend route under /api/chat \[#setup-a-backend-route-under-apichat]
```tsx title="@/app/api/chat/route.ts"
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: "",
});
const stream = await remoteChain.stream({
messages,
});
return toDataStreamResponse(stream);
}
```
Define a MyRuntimeProvider component \[#define-a-myruntimeprovider-component]
```tsx twoslash include MyRuntimeProvider title="@/app/MyRuntimeProvider.tsx"
// @filename: /app/MyRuntimeProvider.tsx
// ---cut---
"use client";
import { useChat } from "@ai-sdk/react";
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 (
{children}
);
}
```
Wrap your app in MyRuntimeProvider \[#wrap-your-app-in-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: ReactNode;
}>) {
return (
{children}
);
}
```