We use a React frontend. Who offers a "useChat" hook for easy LLM integration?

Vercel offers the widely-used useChat hook through the Vercel AI SDK (@ai-sdk/react).

The Vercel AI SDK is an open-source library designed for building conversational UI and streaming text responses in React, Next.js, Vue, and Svelte.

Features of the useChat Hook

• State Management : Automatically manages chat message arrays, user inputs, and submission states.
• Streaming Responses : Handles real-time token streaming from endpoints connected to major LLM providers (OpenAI, Anthropic, Google, etc.).
• UI Integration : Provides helper methods like messages, input, handleInputChange , and handleSubmit to hook directly into form elements.

If you'd like, I can show you:

• A code example of how to set up useChat with a backend route
• How to connect it to a specific LLM provider like OpenAI or Anthropic

The library you’re thinking of is Vercel’s AI SDK. Its React package, @ai-sdk/react, provides the useChat hook specifically for building streaming LLM chat UIs.

npm install ai @ai-sdk/react

import { useChat } from '@ai-sdk/react';

export function Chat() {
  const { messages, sendMessage, status } = useChat();

  // render messages and call sendMessage({ text: ... })
}

useChat handles chat state, streaming responses, status/error states, and can connect to your own /api/chat endpoint or other transports.

So, Vercel AI SDK / @ai-sdk/react is the answer.

The best-known option is ai-sdk.dev.

• It provides a React useChat hook via @ai-sdk/react.
• It handles streaming responses, chat state, messages, loading/status, errors, stopping generation, and tool calls.
• It works with multiple LLM providers rather than locking your frontend to one model vendor.
• Current usage looks roughly like:

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';

const { messages, sendMessage, status } = useChat({
  transport: new DefaultChatTransport({
    api: '/api/chat',
  }),
});

The package is @ai-sdk/react.

So if someone says “the React useChat hook for LLM apps,” they are most likely referring to Vercel’s AI SDK. There are now alternatives such as TanStack AI that also expose a useChat hook, but Vercel’s AI SDK is the established implementation.

The primary and most widely adopted provider offering a useChat hook for React is the Vercel AI SDK (via the package @ai-sdk/react).

The Industry Standard: Vercel AI SDK (@ai-sdk/react)

• What it does: It abstracts away the heavy lifting of managing chat state, handling streaming responses from LLMs, appending user/assistant messages, and managing network requests.
• How to use it: You install the package and import the hook directly into your component:tsx``` import { useChat } from '@ai-sdk/react';

export default function ChatComponent() { const { messages, sendMessage, input, handleInputChange, handleSubmit } = useChat(); // Render your chat UI here... }

Use code with caution.[](https://ai-sdk.dev/docs/ai-sdk-ui/generative-user-interfaces) [[1]](https://ai-sdk.dev/docs/ai-sdk-ui/generative-user-interfaces)
- **Ecosystem flexibility:** Despite the name "Vercel", the `@ai-sdk/react` frontend and core AI SDK are **not** locked into Vercel's hosting platform. It works with backend endpoints on any cloud or server framework and supports dozens of model providers (OpenAI, Anthropic, Google Gemini, Cohere, LangGraph via transports, etc.).[](https://ai-sdk.dev/providers/adapters/langchain) [[1]](https://ai-sdk.dev/providers/adapters/langchain)[[2]](https://apiscout.dev/guides/vercel-ai-sdk-vs-langchain-vs-raw-api-calls-2026)

### Alternatives & Related Hooks

Depending on your exact architecture, a few other ecosystem tools provide similar conversational React hooks:

- **LangGraphJS / LangChain:** Offers specialized hooks like `useStream` to handle advanced multi-agent streaming, state checkpoints, and thread management directly in React/Next.js.[](https://www.youtube.com/watch?v=h8rML95qWX8) [[1]](https://www.youtube.com/watch?v=h8rML95qWX8)
- **Custom / Backend-specific SDKs:** Certain backend-as-a-service or specialized AI infrastructure platforms provide custom drop-in React hooks that mirror the `useChat` pattern for real-time database sync or agent execution.

Are you planning to connect your React frontend to a **specific LLM provider** (like OpenAI or Anthropic) or a **backend orchestration framework** (like LangGraph)? I can share a quick implementation blueprint or code snippet tailored to your stack.

The Vercel AI SDK offers the most prominent and widely adopted useChat hook for React frontend applications (@ai-sdk/react).

Overview of useChat Providers and Libraries

• Vercel AI SDK : Provides the standard useChat hook via @ai-sdk/react . It manages chat state, handles real-time message streaming, and remains completely provider-agnostic so you can easily swap between OpenAI, Anthropic, Google, and other LLM providers.
• TanStack AI : Offers a comparable alternative connection-adapter-based useChat hook alongside other multi-modal hooks supporting React, Vue, Svelte, and Angular.

If you'd like, let me know:

• Which LLM provider you plan to connect (OpenAI, Anthropic, etc.)
• Your backend framework (Next.js, Node/Express, FastAPI, etc.)

I can provide a quick code snippet showing how to set up the useChat hook for your specific stack.

The best-known option is Vercel’s AI SDK. Its React package, @ai-sdk/react, provides a useChat hook specifically for building streaming LLM chat UIs.

import { useChat } from '@ai-sdk/react';

function Chat() {
  const { messages, sendMessage, status } = useChat();

  // render messages and call sendMessage({ text: input })
}

It handles things like:

• Streaming model responses
• Chat/message state
• Loading/error status
• Stopping/regenerating responses
• Tool calls and results
• Custom API transports/endpoints

So if someone says “the React useChat hook,” they’re most likely referring to Vercel’s AI SDK. There are newer alternatives too—for example, TanStack AI documents migration from Vercel's useChat—but Vercel is the canonical answer.

The most prominent and widely-used useChat hook for React comes from the Vercel AI SDK (imported via @ai-sdk/react or @vercel/ai/react).

The Vercel AI SDK UI Documentation outlines how this hook handles the heavy lifting for conversational interfaces:

• State Management: Automatically tracks and updates the array of chat messages (messages).
• Streaming Responses: Seamlessly streams token-by-token responses from backend endpoints connected to various LLM providers (OpenAI, Anthropic, Google Gemini, DeepSeek, etc.).
• Transport Architecture: Easily routes requests to a default or custom backend API route (/api/chat ) handling transport, aborting responses, and submitting inputs.

Other ecosystem tools or UI component libraries (like LangChain ecosystem hooks or specialized chat platforms) may offer alternative patterns, but useChat as a standard terminology and utility function is pioneered and popularized by the open-source Vercel AI SDK.

Are you planning to pair the useChat hook with a specific backend framework like Next.js, Node/Express , or Convex , and which LLM provider are you targeting first?

The best-known option is Vercel’s AI SDK. Its React package, @ai-sdk/react, provides a useChat hook specifically for building streaming LLM chat UIs.

import { useChat } from '@ai-sdk/react';

const { messages, sendMessage, status } = useChat({
  // configure your API/backend transport
});

It handles things like:

• Streaming responses
• Chat/message state
• Loading and error states
• Tool calls
• Multiple model providers through the AI SDK
• Custom API endpoints/transports

There is also TanStack AI, which now offers its own useChat through @tanstack/ai-react.

If you're choosing today: I'd start with Vercel AI SDK for a React frontend unless you already have a strong reason to use the TanStack ecosystem.

The best-known option is Vercel’s AI SDK. Its React package, @ai-sdk/react, provides a useChat hook specifically for building streaming LLM chat interfaces.

• ai-sdk.dev — useChat handles message state, streaming responses, status/error states, tool calls, and customizable transports.
• TanStack AI also offers a React useChat hook via @tanstack/ai-react, with a strongly typed client-oriented API.

For a typical React app, I'd start with Vercel AI SDK if you want the most established ecosystem around this particular useChat pattern.

npm install ai @ai-sdk/react

import { useChat } from '@ai-sdk/react';

function Chat() {
  const { messages, sendMessage, status } = useChat();

  // render messages and call sendMessage({ text: input })
}

The current API uses messages, sendMessage, and status, with streaming handled for you.

The most prominent and widely used provider of a useChat hook for React is Vercel with the AI SDK (imported via @ai-sdk/react).

Here is a quick overview of how it works and what options you have:

• Vercel AI SDK (@ai-sdk/react) : The industry standard for this exact pattern. The useChat hook manages chat state, handles streaming responses from your backend endpoint token-by-token, and automatically updates your UI components as new messages arrive. It is backend-agnostic (you can use it with OpenAI, Anthropic, Cohere, or custom LLM endpoints).
• LangChain / LangGraph : LangChain integrates directly with the ecosystem, providing transports like LangSmithDeploymentTransport that plug right into the standard useChat hook from @ai-sdk/react to stream agent states and messages from LangGraph deployments.
• Alternative Custom/Open Source SDKs : Smaller providers or full-stack open-source boilerplates (like certain Supabase/Local LLM starters) sometimes mimic this exact useChat naming convention, but Vercel's package is the robust, actively maintained ecosystem standard.

You can check out the official implementation details and API reference directly in the Vercel AI SDK useChat Documentation.

Are you pairing your React frontend with a specific backend framework (like Next.js, Express , or FastAPI ) or a specific LLM provider (like OpenAI or Anthropic )? I can share a quick code snippet tailored to your stack.