How to Use the Vercel AI SDK with LangChain for Seamless React Streaming Integration

Make Your AI Apps Talk Smoothly: Vercel AI SDK with LangChain and React

Have you ever wanted to build an AI app that feels super fast and responsive, like it’s talking to you live? Imagine a chatbot or a content generator that shows you words appearing one by one, instead of waiting for a long pause. This is called a “streaming UI,” and it makes AI tools much more fun to use.

Today, we will learn how to make this magic happen using three powerful tools: LangChain, the Vercel AI SDK, and React. We will connect these pieces to build amazing, interactive AI experiences. Get ready to create a seamless streaming UI with LangChain Vercel AI SDK React!

What is the Vercel AI SDK?

The Vercel AI SDK is like a special toolbox built for making AI applications shine in React, Svelte, or Vue. It helps you quickly connect to AI models and display their responses in a smooth, flowing way. Think of it as the friendly face of your AI.

It comes with ready-to-use “hooks” for React, which are special functions that help you manage your app’s behavior. The useChat hook and the useCompletion hook are super useful for different kinds of AI interactions. This SDK makes building a responsive streaming UI much easier.

When you want to show AI responses word-by-word or sentence-by-sentence, the Vercel AI SDK is your go-to. It handles all the tricky parts of getting that real-time flow. You get to focus on making your app look great and work well.

Why LangChain?

LangChain is a fantastic toolkit for building complex AI applications. It helps you connect different AI models, data sources, and tools together like building blocks. You can create smart agents that can think, plan, and act.

With LangChain, you’re not just asking an AI a single question; you’re building a brain for your application. You can make chains of actions, like asking an AI to summarize a document and then answer a question about it. LangChain handles the deep logic and orchestration for your AI.

It lets you use many different language models, from OpenAI to Google Gemini, and many more. If you want to dive deeper into how LangChain empowers complex AI systems, check out this guide on LangChain Google Gemini Function Calling Agent Custom Tools. LangChain provides the powerful intelligence behind your AI apps.

Bringing Them Together: The LangChain Adapter

The Vercel AI SDK is great for the user interface, and LangChain is perfect for the AI’s brain. How do they talk to each other? That’s where the LangChain adapter comes in! This special adapter acts as a translator between LangChain’s complex outputs and the Vercel AI SDK’s streaming needs.

It takes the stream of data coming from your LangChain logic and formats it perfectly for the Vercel AI SDK. This allows the Vercel AI SDK to display the AI’s response in real-time, letter by letter. This adapter is key to enabling a smooth streaming UI.

Without this adapter, getting LangChain to stream directly to your React frontend would be much harder. It creates a seamless bridge, making the LangChain Vercel AI SDK React integration straightforward. You get the best of both worlds: powerful AI logic and a super-responsive user experience.

Setting Up Your Project

Before we can build our amazing streaming AI app, we need to set up a new project. We will use Next.js, which is a popular framework for React applications that handles both your frontend and backend. It makes the LangChain Vercel AI SDK React setup easy.

Starting a New Next.js App

First, open your terminal or command prompt. Then, type this command to create a new Next.js project. This command will ask you a few questions about your project setup.

npx create-next-app@latest my-ai-stream-app

When it asks if you want to use TypeScript, ESLint, Tailwind CSS, or the app router, you can say “yes” to most of them. The app router is especially good for our project because it simplifies creating API routes. Give your project a name, like my-ai-stream-app.

Once the project is created, navigate into your new project folder. You can do this by typing cd my-ai-stream-app in your terminal. This sets up the basic structure for our LangChain Vercel AI SDK React application.

Installing Dependencies

Now, we need to add the special tools we’ll be using. These are called “dependencies” and they give our project new abilities. We will install the Vercel AI SDK, LangChain, and a library to talk to OpenAI’s models (which is common for these types of projects).

Type the following command in your terminal within your project folder:

npm install ai langchain @langchain/openai

ai is the Vercel AI SDK itself. langchain is the core library for building our AI logic. @langchain/openai helps LangChain talk to OpenAI models. If you want to use other models, you would install their specific LangChain integrations instead. This step completes the essential setup for LangChain Vercel AI SDK React.

Building Your Backend API with LangChain

Our AI logic will live in a special place called an “API route” on our Next.js server. This route is like a secret doorway where your React frontend can send requests and get AI responses back. This is where we will use LangChain.

Understanding the API Route

In a Next.js app router project, API routes are files placed inside the app/api folder. For a chat application, we might create a file like app/api/chat/route.ts. This file will handle incoming chat messages and send back AI responses. It acts as the brain behind our streaming UI.

When your React frontend sends a message, it will talk to this route.ts file. This file then uses LangChain to process the message and sends the AI’s answer back to the frontend. This setup is crucial for our LangChain Vercel AI SDK React integration.

The API route is also where we keep our secret API keys safe, away from the user’s browser. This is a good security practice for any application dealing with external services.

Creating a Simple Chat Chain

Inside our app/api/chat/route.ts file, we’ll first set up a basic LangChain chat model. We’ll use ChatOpenAI as an example, but you could easily swap this for other models like Google Gemini. To learn more about different AI frameworks, you can check out Top LangChain Alternatives 2026: 10 Frameworks Compared & Ranked.

We’ll define a simple LangChain “chain” that takes a message and gets a response from the AI. This chain is the core of our AI’s intelligence. For now, it will be a very direct conversation with the AI model.

Here’s how you might set up the basic model:

// app/api/chat/route.ts
import { ChatOpenAI } from '@langchain/openai';
import { HumanMessage } from '@langchain/core/messages';
import { StringOutputParser } from '@langchain/core/output_parsers';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const currentMessageContent = messages[messages.length - 1].content;

  const model = new ChatOpenAI({
    temperature: 0.7,
    modelName: 'gpt-3.5-turbo', // Or 'gpt-4'
    // Ensure OPENAI_API_KEY is set in your .env.local file
  });

  const parser = new StringOutputParser();

  // A very simple chain: input -> model -> output
  const chain = model.pipe(parser);

  // We will replace this with streaming logic soon
  const result = await chain.invoke([new HumanMessage(currentMessageContent)]);

  return new Response(result);
}

This simple chain takes a human message, passes it to the OpenAI model, and gets a text response. This is just the starting point; next, we’ll make it stream!

Using the LangChain Adapter

Now, let’s make our AI response stream using the LangChainStream from the Vercel AI SDK. This is the magical part that connects LangChain to the streaming UI. We import LangChainStream and streamText to handle the data flow.

Instead of waiting for the full response, the streamText function will start sending data as soon as LangChain produces it. This is what makes your AI app feel so responsive. The LangChainStream handles converting LangChain’s output into a format the Vercel AI SDK understands.

We will use chain.stream() to get a stream from LangChain. Then, we pass this stream to LangChainStream to create a Response object that our frontend can read in real-time. This is the heart of the LangChain Vercel AI SDK React integration.

Full API Route Example

Here is the complete app/api/chat/route.ts file that uses the LangChain adapter to stream responses. Remember to create a .env.local file in your project root and add OPENAI_API_KEY="your_openai_api_key_here".

// app/api/chat/route.ts
import { LangChainStream, streamText } from 'ai';
import { ChatOpenAI } from '@langchain/openai';
import { HumanMessage, AIMessage } from '@langchain/core/messages';
import { StringOutputParser } from '@langchain/core/output_parsers';

export const dynamic = 'force-dynamic'; // Ensures this route is not cached

export async function POST(req: Request) {
  const { messages } = await req.json();

  // Extract only the content of the messages for LangChain
  // LangChain expects messages in a specific format (HumanMessage, AIMessage)
  const formattedMessages = messages.map((msg: any) =>
    msg.role === 'user' ? new HumanMessage(msg.content) : new AIMessage(msg.content)
  );

  const model = new ChatOpenAI({
    temperature: 0.7,
    modelName: 'gpt-3.5-turbo', // Or 'gpt-4'
  });

  const parser = new StringOutputParser();

  // Create a simple chain: model -> parser
  const chain = model.pipe(parser);

  // Use the Vercel AI SDK's streamText to handle the streaming
  // We pipe the LangChain stream into the Vercel AI SDK's streamText function
  const stream = await streamText({
    model: {
      stream: (input: string | HumanMessage[]) => {
        // LangChain's stream method expects a list of messages or a single message
        // If we are getting messages, we pass them as is.
        // If we are getting a simple string, we wrap it in HumanMessage for a simple prompt.
        const streamInput = Array.isArray(input) ? input : [new HumanMessage(input)];
        return chain.stream(streamInput);
      },
    },
    // The initial prompt is implicitly handled by the formattedMessages passed to chain.stream
    // The Vercel AI SDK handles the messages array and sends the last user message to our `stream` function.
    // However, for more complex chains, you might want to explicitly pass an initial prompt or context.
  });

  return stream.to
  // Return the stream as a Response
  // The Vercel AI SDK automatically creates the correct headers for streaming
  return new Response(stream.toAIStream());
}

This code creates a POST endpoint that accepts an array of messages. It converts them into a format LangChain understands. Then, it uses the streamText helper from ai to make the LangChain stream compatible with the Vercel AI SDK. This is a robust way to implement LangChain Vercel AI SDK React streaming.

Crafting Your React Frontend with Vercel AI SDK

Now that our backend is ready to stream AI responses, let’s build the React part that actually shows these responses to the user. This is where the Vercel AI SDK’s React hooks truly shine, providing a beautiful streaming UI.

The useChat Hook for Chatbots

The useChat hook is a powerful tool provided by the Vercel AI SDK, perfect for building interactive chatbots. It handles many things for you automatically. It keeps track of all the messages, manages your input field, and sends requests to your API.

When you use useChat, you get back a bunch of useful things. These include the current list of messages (both user and AI), the current input from the user, a function to handleInputChange as the user types, and a function to handleSubmit when the user sends a message. It also provides isLoading to show if the AI is thinking, and error if something goes wrong. This hook simplifies building a rich streaming UI with LangChain Vercel AI SDK React.

It connects directly to your /api/chat endpoint by default. This means you don’t have to write a lot of code to make the frontend talk to the backend. It’s designed to work seamlessly with the streamText function we used in our API route.

Building a Basic Chat Component

Let’s create a simple React component that uses the useChat hook to build a basic chatbot interface. This component will display messages and allow the user to type and send new ones. You’ll place this in your app/page.tsx file or a new component file.

This example will show you how to set up the chat interface and get responses from your LangChain-powered backend. Notice how easy it is to manage the messages array and input field. This is the core of your streaming UI for LangChain Vercel AI SDK React.

```typescript jsx // app/page.tsx or app/chat/page.tsx ‘use client’; // This directive tells Next.js this is a client-side component

import { useChat } from ‘ai/react’;

export default function ChatPage() { const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({ api: ‘/api/chat’, // Our backend API route });

return ( <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch"> <h1 className="text-2xl font-bold mb-4">AI Chatbot with LangChain and Vercel AI SDK</h1> {error && ( <div className="text-red-500 mb-4"> <p>Error: {error.message}</p> </div> )}

  {messages.length > 0 ? (
    messages.map((m) => (
      <div key={m.id} className="whitespace-pre-wrap mb-4">
        <span className="font-bold">{m.role === 'user' ? 'You: ' : 'AI: '}</span>
        {m.content}
      </div>
    ))
  ) : (
    <div className="text-gray-500 mb-4">Start a conversation!</div>
  )}

  {isLoading && (
    <div className="text-gray-400 mb-4">AI is thinking...</div>
  )}

  <form onSubmit={handleSubmit} className="flex mt-4">
    <input
      className="flex-grow border border-gray-300 rounded shadow-xl p-2 mr-2"
      value={input}
      placeholder="Say something..."
      onChange={handleInputChange}
      disabled={isLoading}
    />
    <button
      type="submit"
      className="bg-blue-500 text-white p-2 rounded shadow-xl"
      disabled={isLoading}
    >
      Send
    </button>
  </form>
</div>   ); } ```

This component is simple but effective! You can see how messages are mapped, how input is controlled, and how handleSubmit sends the data. The isLoading state provides feedback to the user. This is a direct application of the LangChain Vercel AI SDK React integration for chat.

The useCompletion Hook for Text Generation

Sometimes you don’t need a full back-and-forth chat, but rather a simple text generation task. For example, asking an AI to write a poem or summarize a paragraph. The useCompletion hook is perfect for these simpler scenarios. It focuses on taking a prompt and generating a single, streaming text output.

It works similarly to useChat but is streamlined for completion tasks. You get completion (the AI’s generated text), input, handleInputChange, handleSubmit, isLoading, and error. It’s designed for straightforward input-output text generation. This hook is another powerful part of the Vercel AI SDK for building a streaming UI.

This hook is ideal when you want to generate creative content or assist with writing. It makes it very easy to integrate a “write me something” feature into your app. For more advanced content generation, you might explore tools mentioned in LangChain Semantic Text Splitter Chunk by Meaning, which helps process text intelligently before generation.

Integrating useCompletion

Let’s build a simple component using useCompletion. This example will show how to generate text based on a user’s prompt, like asking the AI to “write a short story about a brave cat.” You’ll see the AI’s story appear character by character.

This component demonstrates a different kind of streaming UI. Instead of a chat history, you get a single evolving output. It’s a great way to use the LangChain Vercel AI SDK React power for focused generative tasks.

```typescript jsx // app/completion/page.tsx ‘use client’; // Again, this is a client-side component

import { useCompletion } from ‘ai/react’;

export default function CompletionPage() { const { completion, input, handleInputChange, handleSubmit, isLoading, error, } = useCompletion({ api: ‘/api/completion’, // We’ll create this API route next });

return ( <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch"> <h1 className="text-2xl font-bold mb-4">AI Text Generator</h1> {error && ( <div className="text-red-500 mb-4"> <p>Error: {error.message}</p> </div> )}

  <form onSubmit={handleSubmit} className="flex flex-col">
    <textarea
      className="border border-gray-300 rounded shadow-xl p-2 mb-4 h-32"
      value={input}
      placeholder="Tell AI what to write (e.g., 'Write a poem about a flying dog')..."
      onChange={handleInputChange}
      disabled={isLoading}
    />
    <button
      type="submit"
      className="bg-green-500 text-white p-2 rounded shadow-xl"
      disabled={isLoading}
    >
      Generate Text
    </button>
  </form>

  {isLoading && (
    <div className="text-gray-400 mt-4">AI is generating...</div>
  )}

  {completion && (
    <div className="mt-8 p-4 border border-gray-200 rounded shadow-inner bg-gray-50 whitespace-pre-wrap">
      <h2 className="font-bold text-xl mb-2">Generated Text:</h2>
      {completion}
    </div>
  )}
</div>   ); } ```

To make this useCompletion example work, you need a new API route: app/api/completion/route.ts. This route will be simpler than the chat one, as it only handles a single prompt.

// app/api/completion/route.ts
import { LangChainStream, streamText } from 'ai';
import { ChatOpenAI } from '@langchain/openai';
import { HumanMessage } from '@langchain/core/messages';
import { StringOutputParser } from '@langchain/core/output_parsers';

export const dynamic = 'force-dynamic';

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const model = new ChatOpenAI({
    temperature: 0.7,
    modelName: 'gpt-3.5-turbo',
  });

  const parser = new StringOutputParser();

  const chain = model.pipe(parser);

  // Use the Vercel AI SDK's streamText to handle the streaming
  const stream = await streamText({
    model: {
      stream: (input: string) => {
        // For useCompletion, the 'input' will be the raw prompt string
        return chain.stream([new HumanMessage(input)]);
      },
    },
    // The initial prompt is passed directly to the `stream` function here.
  });

  return new Response(stream.toAIStream());
}

This completes our useCompletion integration. You now have a working text generator with a streaming UI, thanks to LangChain Vercel AI SDK React.

Advanced Streaming UI Features

Making your AI app truly stand out involves more than just basic streaming. Let’s look at how to add some advanced features to improve the user experience. These additions make your streaming UI more robust and user-friendly.

Displaying Loading States

When your AI is thinking, it’s good to let the user know. The isLoading flag provided by both useChat and useCompletion hooks is perfect for this. You can use it to disable the submit button, show a “thinking…” message, or even display a cool animation. This prevents users from clicking multiple times and provides clear feedback.

Here’s how you might enhance your button and add a loading message in the chat component:

```typescript jsx // Inside your ChatPage component’s render method // … (previous code)

  {isLoading && (
    <div className="text-gray-400 mb-4 flex items-center">
      <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      AI is thinking...
    </div>
  )}

  <form onSubmit={handleSubmit} className="flex mt-4">
    <input
      className="flex-grow border border-gray-300 rounded shadow-xl p-2 mr-2"
      value={input}
      placeholder="Say something..."
      onChange={handleInputChange}
      disabled={isLoading} // Disable input while loading
    />
    <button
      type="submit"
      className={`p-2 rounded shadow-xl ${isLoading ? 'bg-gray-400' : 'bg-blue-500 text-white'}`}
      disabled={isLoading} // Disable button while loading
    >
      {isLoading ? 'Sending...' : 'Send'}
    </button>
  </form> // ... (rest of the code) ```

This small change makes a big difference in how users perceive your app’s responsiveness. It’s a key part of a polished LangChain Vercel AI SDK React experience.

Handling Errors Gracefully

Things can sometimes go wrong, like if the AI service is down or your API key is incorrect. The error object from useChat and useCompletion helps you show helpful messages to the user. Instead of just crashing, your app can tell the user what happened.

You can display an error message at the top of your component. This allows users to understand the problem and potentially try again. Good error handling is essential for any real-world application.

Here’s an example of displaying an error message:

```typescript jsx // Inside your ChatPage component’s render method // … (before messages display)

  {error && (
    <div className="text-red-500 bg-red-100 border border-red-400 p-3 rounded mb-4">
      <p className="font-bold">Oops! Something went wrong:</p>
      <p>{error.message}</p>
      <p>Please try again or check your API key.</p>
    </div>
  )}

// … (rest of the code) ```

This simple error display improves the user experience significantly. It’s a vital part of building robust applications with LangChain Vercel AI SDK React.

Adding User Input History

For chatbots, it’s very useful to let users re-use or quickly edit their previous inputs. You can implement a feature where pressing the up arrow key cycles through past messages. This requires a bit more custom logic but greatly enhances usability. You would need to manage a separate state for input history.

While useChat manages message history, it doesn’t directly manage input field history. You might add a custom useEffect and useState combination to store and retrieve past inputs. This creates a more fluent interaction for the user. Think about how many chat applications offer this feature; it’s a common expectation.

Practical Examples and Use Cases

The integration of LangChain Vercel AI SDK React opens up a world of possibilities. Let’s explore a few practical examples of applications you could build. These examples leverage the power of streaming UI combined with intelligent AI logic.

Simple Q&A Bot

Imagine building a bot that can answer questions about a specific document or a knowledge base. You could use LangChain’s RAG (Retrieval Augmented Generation) capabilities to fetch relevant information before answering. For example, if you want to build a Q&A bot over your documents, you might want to look at Build RAG Applications LangChain Vector Store 2026.

Your React frontend, using the useChat hook, would display the conversation in real-time. The user asks a question, LangChain fetches the answer, and the Vercel AI SDK streams it back. This creates a highly responsive and informed Q&A experience. This is a classic application for LangChain Vercel AI SDK React.

Content Generation Tool

Need to generate ideas for blog posts, marketing copy, or even creative writing? The useCompletion hook combined with a LangChain backend is perfect. Users can provide a prompt like “Generate 5 headlines for an article about remote work benefits,” and the AI will stream the results.

LangChain can be configured with specific prompts or even use tools to brainstorm ideas more effectively. The streaming nature of the Vercel AI SDK means the user sees the ideas populating immediately. This enhances the creative process by making it feel collaborative and fast.

Interactive Storyteller

Imagine an AI that helps you write a story. You give it a starting sentence, and it generates the next paragraph. You can then choose to continue from there, or guide the story in a new direction. This kind of interactive experience is easily built with LangChain Vercel AI SDK React.

Each turn in the story could be a separate interaction using the useChat or useCompletion pattern. LangChain handles the creative generation, potentially even remembering past parts of the story. The Vercel AI SDK ensures that the new story sections stream smoothly onto the page.

You could even make the AI an agent that can decide on its own next steps, like those discussed in LangGraph StateGraph Multi-Step AI Agent. This would allow for even more dynamic and engaging storytelling experiences.

Troubleshooting Common Issues

Even with great tools, sometimes things don’t work as expected. Here are a few common issues you might run into and how to fix them. Knowing these can save you a lot of time when working with LangChain Vercel AI SDK React.

• OPENAI_API_KEY not found: Make sure you have a .env.local file in your project’s root directory. Inside it, put OPENAI_API_KEY="your_api_key_here". Restart your Next.js development server (npm run dev) after adding or changing environment variables.
• CORS errors: If your frontend is on a different domain/port than your backend API, you might encounter CORS issues. In a Next.js app, with the API route within the same project, this is usually not a problem. However, if you are calling an external API, ensure the server has proper CORS headers.
• No streaming response: If the AI response appears all at once instead of streaming, double-check your app/api/chat/route.ts (or completion/route.ts) file. Ensure you are correctly using streamText from ai and that your LangChain chain is returning a stream (e.g., chain.stream()).
• TypeScript errors: If you’re seeing red squiggly lines in your code, ensure all necessary types are imported. For instance, HumanMessage and AIMessage for LangChain. Sometimes, npm install or yarn install might be needed if packages aren’t fully linked.
• Errors in LangChain logic: If your AI is giving strange answers or errors, the problem might be in your LangChain chain. Try debugging your chain logic separately. You can temporarily log the output of chain.invoke() (without streaming) to see the full response from LangChain.
• Outdated dependencies: Always ensure your ai and langchain packages are up to date. Sometimes, new features or bug fixes are released that resolve issues. Run npm update or yarn upgrade to get the latest versions.

Benefits of this Integration

Combining the Vercel AI SDK with LangChain and React offers many advantages for building AI applications. This powerful combination of LangChain Vercel AI SDK React provides a robust foundation.

1. Superior User Experience (UX): Streaming responses make AI feel faster and more interactive. Users don’t have to wait for a full response, improving satisfaction. It’s a responsive streaming UI that keeps users engaged.
2. Simplified Frontend Development: The useChat and useCompletion React hooks abstract away complex streaming logic. This means you write less code and focus more on your app’s unique features. It greatly simplifies building the streaming UI.
3. Powerful Backend Logic: LangChain provides the flexibility to build highly sophisticated AI applications. You can integrate multiple models, tools, and data sources, creating intelligent agents. For instance, you could even create a LangChain Custom Output Parser Tutorial to fine-tune how your AI responds.
4. Faster Development Cycle: With ready-made components and adapters, you can prototype and deploy AI applications much quicker. This reduces the time from idea to a working product.
5. Scalability: Next.js provides a robust framework for building scalable web applications. The Vercel AI SDK and LangChain are designed to work well in production environments.

Conclusion

You’ve learned how to bring together the power of LangChain for intelligent AI logic and the Vercel AI SDK for a seamless React streaming UI. We covered setting up your Next.js project, building a streaming backend with the LangChain adapter, and creating dynamic frontends with the useChat and useCompletion React hooks. This combination, LangChain Vercel AI SDK React, is incredibly powerful.

Now you have the tools to build highly responsive and engaging AI applications that feel alive. Start experimenting, build your own chatbots, content generators, or interactive AI experiences. The future of AI application development is streaming, and you’re now ready to be a part of it!