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

Feedback
1

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? :smiley:

1 Like
3

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

1 Like
4

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.

2 Likes
5

Was working on an issue just now, thank you!

6

Just opened an issue. Let me know if it should be any clearer.

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

7

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. :smiling_face_with_tear:

8

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.

@nicoalbanese @pawlean 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. :smiley:

1 Like
9

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

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 :laughing:
That said, I would love to contribute :heart:

10

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

1 Like
11

@pawlean 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 :smiley: