Multiple Field Forms with vercel ai streaming

[tall axle]

Has anyone had any success in using vercel ai streaming on forms with multiple inputs? As far as I can tell, it seems designed for single input, but I was playing with a workaround using a custom handleFormSubmit handler that serves as a wrapper for concatenating and then submitting the input.

The below works, but users need to hit submit twice which is unideal. I've played around with try / finally blocks but it didn't work either. Would love if anyone has any suggestions!

export default function SloganGenerator() {

const [name, setName] = useState("");
const [industry, setIndustry] = useState("");
const { completion, input, handleInputChange, handleSubmit } = useCompletion();

const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {

// Combine the three inputs into one prompt
const concatenatedInput = `Create a slogan for the following business with the name: ${name}, industry: ${industry}`;

// Create a synthetic ChangeEvent object
const syntheticEvent = {
  target: {
    value: concatenatedInput,
  },
} as ChangeEvent<HTMLInputElement>;

console.log("concatenated input was", concatenatedInput)

handleInputChange(syntheticEvent);

console.log("input was", input) // only updates when user hits submit twice

// Submit the form using the SDK's handleSubmit
handleSubmit(e);

console.log("input 2 was", input) // only updates when user hits submit twice

};

return (
<form onSubmit={handleFormSubmit}>
<input
value={name}
placeholder="Business Name..."
onChange={(e) => setName(e.target.value)}
/>
<input
value={industry}
placeholder="Industry..."
onChange={(e) => setIndustry(e.target.value)}
/>
<button type="submit">Submit</button>
<a>{completion}</a>
</form>
);

[sweet ravine]

Hi @tall axle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, it seems that you're trying to use the Vercel AI SDK to handle multiple inputs in a form. The SDK does provide hooks and utilities for handling inputs and submissions, as shown in the extract from Vercel Guide (https://vercel.com/guides/securing-ai-app-rate-limiting).

However, the issue you're facing seems to be related to the asynchronous nature of the setState function in React. When you call handleInputChange(syntheticEvent), it updates the state, but this update is not immediately reflected in the input variable. That's why you need to hit submit twice for the input to update.

One possible solution could be to use the useEffect hook to listen for changes in the name and industry states, and then call handleInputChange inside this hook. This way, whenever name or industry changes, your input will be updated.

Unfortunately, the extracts do not provide a specific example of handling multiple inputs with the Vercel AI SDK. For more detailed guidance, you may want to refer to the Vercel AI SDK documentation (https://sdk.vercel.ai/docs) or the Next.js documentation (https://nextjs.org/docs).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tall axle kapa.ai is still learning and improving, please let us know how it did by reacting below

[tall axle]

@sweet ravine Can you give me an example in code?

[sweet ravine]

Let me check the knowledge base for you. One moment! :books:

---

I'm sorry for any confusion, but the information extracts provided do not contain a specific example of handling multiple inputs with the Vercel AI SDK. The examples given are for single input scenarios.

However, based on the information available, you could try something like this:

import { useEffect, useState } from 'react';
import { useCompletion } from 'ai/react';

export default function SloganGenerator() {
  const [name, setName] = useState("");
  const [industry, setIndustry] = useState("");
  const { completion, input, handleInputChange, handleSubmit } = useCompletion();

  useEffect(() => {
    const concatenatedInput = `Create a slogan for the following business with the name: ${name}, industry: ${industry}`;
    const syntheticEvent = {
      target: {
        value: concatenatedInput,
      },
    } as React.ChangeEvent<HTMLInputElement>;
    handleInputChange(syntheticEvent);
  }, [name, industry]);

  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    handleSubmit(e);
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        value={name}
        placeholder="Business Name..."
        onChange={(e) => setName(e.target.value)}
      />
      <input
        value={industry}
        placeholder="Industry..."
        onChange={(e) => setIndustry(e.target.value)}
      />
      <button type="submit">Submit</button>
      <p>{completion}</p>
    </form>
  );
}

In this example, a useEffect hook is used to listen for changes in the name and industry states. When either of these states changes, the handleInputChange function is called with a synthetic event that contains the concatenated input.

Please note that this is a hypothetical example and may need adjustments based on your specific use case. For more detailed guidance, you may want to refer to the Vercel AI SDK documentation (https://sdk.vercel.ai/docs) or the Next.js documentation (https://nextjs.org/docs).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tall axle kapa.ai is still learning and improving, please let us know how it did by reacting below