Next.js Discord

Discord Forum

How to use ai/sdk on client only

Unanswered
Common Pochard posted this in #help-forum
Open in Discord
Common PochardOP
im building a plugin for obsidian, and therefore I cannot scaffold a nextjs app within a obsidian plugin, i need to use ai/sdk only on client i wonder if there are any pitfalls to avoid and if not using edge runtime can lead to issues?

6 Replies

@Common Pochard im building a plugin for obsidian, and therefore I cannot scaffold a nextjs app within a obsidian plugin, i need to use ai/sdk only on client i wonder if there are any pitfalls to avoid and if not using edge runtime can lead to issues?
you cant. you must use a private api key to communicate with the ai provider (e.g. an openai api key), this must be private so you cannot expose it in clients. you must run a server and make your plugin send requests to your server
Common PochardOP
apart from this issue, is it possible to use AI/SDK only on client? i'm getting some issues dealing with streams response
@Common Pochard apart from this issue, is it possible to use AI/SDK only on client? i'm getting some issues dealing with streams response
you pretty much can use it for any api endpoint, not just /api/chat. so as long as your api endpoint
* is made using the vercel sdk
* returns suitable headers so CORS is not an issue, if applicable
then it can be used as [the api value of useChat](https://sdk.vercel.ai/docs/api-reference/use-chat) and everything should work normally
Common PochardOP
thanks for the reply! i'm using a proxy server to avoid CORS issue and then in my react component i'm doing:
const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: async (messages) => {
      const response = await createChatCompletion(messages);
      return response;
    },
  }); 


and the createChatCompletion looks like:
export async function createChatCompletion(messages: any) {
  const response = await anthropic.messages.create({
    messages: messages.messages,
    model: 'claude-2.1',
    stream: true,
    max_tokens: 300,
  });

  const stream = AnthropicStream(response);
  return new StreamingTextResponse(stream);
}


with Anthropic being defined
const anthropic = new Anthropic({
  baseURL: proxyURL
  apiKey: apikey
});
`
but it seems i'm getting some issues with how streams are handled, seems I get only the first token and then it somehow stops and i still have to figure out why
Common PochardOP
i dont understand the limitation, i'm trying to use AI/SDK in an electron app so there's way to ensure that the api key is not exposed in the client by using obsidian sdk, and indeed the message is created (also looking at the antrhopic dashboard logs) but the streams returns empty - not sure if your answer is related to how new Anthropicfunction is implemented or something else...