Possible to use AI SDK's useChat hook without an API route?

Leaderboard GOAT

Right now, I'm using the Vercel ai SDK's useChat hook because it makes chat state management much easier. However, this requires that I have an API route (e.g., app/api/chat/route.ts). I would like to be able to use the useChat hook client-side with a client-provided API key instead of an API route. This would make it possible to easily use the AI SDK in static sites (frontend-only).

What do you think?

Vercel Alum

Thank you for sharing this detailed feedback, ! I've forwarded to the AI SDK team.

Vercel Staff

Hey! Unfortunately, this isn't currently possible but it's been raised before. Could you file an issue as that's the best place for feature requests? Thanks!

Something to note - all the AI SDK Core functions (generateText, streamText etc.) work client-side. But you would have to manage the message state yourself.

Leaderboard GOAT

Was working on an issue just now, thank you!

Leaderboard GOAT

Just opened an issue. Let me know if it should be any clearer. https://github.com/vercel/ai/issues/5140

GitHub

Support useChat Without an API Route (Client-side usage) · Issue #5140 · vercel/ai

Feature Description Right now, the Vercel AI SDK's useChat hook is good for managing chat state, but it requires an API route (e.g., app/api/chat/route.ts). So even in simple projects or static sit...

Excited to see what Vercel does with the AI SDK next!

reply to #4

Leaderboard GOAT

Note to people in this topic:

I did succeed in doing this in my fork of the AI SDK. I would make a PR, but right now I only have it to the point where you provide a model to useChat and it waits for the response to finish. I don't have streaming responses figured out.

Leaderboard GOAT

And I just got streaming working, client side! My usage is something like this:

"use client";
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { useChat } from "@ai-sdk/react";

// Existing function, I made no changes here
const google = createGoogleGenerativeAI({
  apiKey: "(pass the key from somewhere)",
});

function ChatComponent() {
  const { messages, append, input, setInput, handleSubmit } = useChat({
    model: google("gemini-2.0-flash-001"), // Pass the model instance - this is the change I made
  });

  return (
    <div>
      {/* Some UI */}
    </div>
  );
}

export default ChatComponent;

And, it streams! No backend at all! I would share a video here, but it appears I can't.

Would you guys be interested in a PR for this, or does the team have something else in mind? I'd be happy to contribute once I get everything polished up.

Leaderboard GOAT

I've got a type-safe working useChat hook with streaming now. You can see my branch here:

https://github.com/The-Best-Codes/vercel-ai-sdk/tree/best/use-chat-model

GitHub

GitHub - The-Best-Codes/vercel-ai-sdk at best/use-chat-model

[FORK] The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents - The-Best-Codes/vercel-ai-sdk

I only have the React useChat hook done. I'm not going to migrate the Solid JS one unless I get a go-ahead from you guys; I don't want to spend a lot of work on it and then discover the team has it done That said, I would love to contribute

reply to #4

Leaderboard GOAT

Just opened a PR — I'm sure there are plenty of ways you can criticize it, let me know what I should change

https://github.com/vercel/ai/pull/5207

GitHub

Add `model` prop to useChat hook to remove the need for a backend by The-Best-Codes · Pull Request #5207 · vercel/ai

Add model prop to useChat hook to remove the need for a backend This PR introduces the model prop to the useChat hook, enabling direct interaction with Language Model V1 compliant AI providers (e.g...

reply to #3

Leaderboard GOAT

My PR has been open for a week now… is there any feedback? I have to keep maintaining the PR (fixing merge conflicts so it will be ready to merge), so if the team isn't planning this it would be nice to be able to just close it

Leaderboard GOAT

It looks like Vercel has something else in mind for this, hopefully they add it soon!

https://github.com/vercel/ai/pull/5207#issuecomment-2747238836

GitHub

Add `model` prop to useChat hook to remove the need for a backend by The-Best-Codes · Pull Request #5207 · vercel/ai

This topic is closed. It no longer accepts new replies.

And I just got streaming working, client side! My usage is something like this:

"use client";
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { useChat } from "@ai-sdk/react";

// Existing function, I made no changes here
const google = createGoogleGenerativeAI({
  apiKey: "(pass the key from somewhere)",
});

function ChatComponent() {
  const { messages, append, input, setInput, handleSubmit } = useChat({
    model: google("gemini-2.0-flash-001"), // Pass the model instance - this is the change I made
  });

  return (
    <div>
      {/* Some UI */}
    </div>
  );
}

export default ChatComponent;

And, it streams! No backend at all! I would share a video here, but it appears I can't.

Would you guys be interested in a PR for this, or does the team have something else in mind? I'd be happy to contribute once I get everything polished up.