vercel ai sdk usecompletion or usechat

[still moon]

Hi i'm generating a cover letter based from user given information. Should i Be using usecompletion or useChat from vercel ai sdk? The plan is just to Ask The API generate The answer once

[chrome pike]

Hi @still moon. 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, you should use the useCompletion hook from the Vercel AI SDK for your use case. The useCompletion hook is used to generate text completions based on user input, which seems to align with your requirement of generating a cover letter based on user-provided information.

Here's an example of how to use the useCompletion hook in your Next.js application:

import { useCompletion } from 'ai/react'

export default function Completion() {
  const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion({ api: '/api/completion' })

  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      <form onSubmit={handleSubmit} className="flex items-center gap-3 mb-8">
        <label className="grow">
          <input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={input} onChange={handleInputChange} placeholder="Ask anything..." />
        </label>
        <button type="button" onClick={stop}> Stop </button>
        <button disabled={isLoading} type="submit"> Send </button>
      </form>
      <output>Completion result: {completion}</output>
    </div>
  )
}

(Source: Vercel Guides (https://vercel.com/guides/cohere-nextjs-vercel-ai-sdk))

On the other hand, the useChat hook is used to implement streaming chat experiences, which doesn't seem to be what you're looking for in this case.

Remember to replace '/api/completion' with the appropriate endpoint for your application.

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

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

[still moon]

@chrome pike could u explain Eli5 what is The difference between usecompletion and usechat?

[chrome pike]

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

---

Sure, I'd be happy to explain the difference between useCompletion and useChat in a simple way.

1. useCompletion: This hook is used when you want to generate some text based on user input. Think of it like auto-complete or predictive text. You start typing something, and useCompletion helps you finish it based on what it thinks you might want to say. It's a one-time request to the AI model to generate a completion of the text.

   Here's an example: Let's say you're writing a story and you start with "Once upon a time, there was a". You could use useCompletion to suggest how to finish that sentence, like "Once upon a time, there was a brave knight who lived in a grand castle."

2. useChat: This hook is used when you want to have a back-and-forth conversation with the AI model. It's like chatting with a friend where you send a message, get a response, then send another message, and so on. It's useful for creating interactive chatbots.

   Here's an example: You could use useChat to create a chatbot that answers questions about a topic. You ask "What's the weather like today?", the chatbot responds "It's sunny and warm." Then you ask "What about tomorrow?", and the chatbot responds "Tomorrow it's expected to be cloudy with a chance of rain."

So, in summary, useCompletion is for one-time text generation, while useChat is for ongoing conversations.

(Source: Vercel Guides (https://vercel.com/guides/cohere-nextjs-vercel-ai-sdk), Vercel Guides (https://vercel.com/guides/securing-ai-app-rate-limiting))

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

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

[still moon]

Could u explain what The useCompletion functions does? I'm having a small problems with ot because i'm using React Hook Form same Time and trying to Have controlled input

@chrome pike Could u explain what The useCompletion functions does? I'm having a small problems with ot because i'm using React Hook Form same Time and trying to Have controlled input

[chrome pike]

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

---

The useCompletion function is a custom hook provided by the Vercel AI SDK. It's used to interact with an AI model to generate text completions based on user input.

Here's a breakdown of what the useCompletion function does:

• It takes an object as an argument, which includes the API endpoint (api) to which it will send the user's input for text completion.
• It returns an object with several properties and functions that you can use in your component:
  • completion: The text completion generated by the AI model.
  • input: The current value of the input field.
  • stop: A function to stop the text completion process.
  • isLoading: A boolean indicating whether the text completion is currently being processed.
  • handleInputChange: A function to handle changes to the input field. It should be passed to the onChange prop of your input field.
  • handleSubmit: A function to handle the form submission. It should be passed to the onSubmit prop of your form.

If you're using React Hook Form at the same time and trying to have a controlled input, you might run into issues because both useCompletion and React Hook Form are trying to control the input field.

One possible solution could be to manage the input state yourself using the useState hook, and then pass the input value to both useCompletion and React Hook Form. However, without more specific information about the issues you're facing, it's hard to provide a more detailed solution.

Here's the example usage of useCompletion from the extracts:

import { useCompletion } from 'ai/react'

export default function Completion() {
  const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion({ api: '/api/completion' })

return (
<div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
<form onSubmit={handleSubmit} className="flex items-center gap-3 mb-8">
<label className="grow">
<input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={input} onChange={handleInputChange} placeholder="Ask anything..." />
</label>
<button type="button" onClick={stop}> Stop </button>
<button disabled={isLoading} type="submit"> Send </button>
</form>
<output>Completion result: {completion}</output>
</div>
)
}

(Source: **Vercel Guides** (<https://vercel.com/guides/cohere-nextjs-vercel-ai-sdk>))
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

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

[still moon]

@chrome pike what is The correct way to add More content to send The API? Naturally IT seems that The useCompletion takes only one input as its value

[chrome pike]

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

---

The useCompletion hook from the Vercel AI SDK is designed to work with a single input value, which is used as the prompt for the AI model to generate a text completion.

If you want to include more information in the request to the AI model, you would need to concatenate or format your multiple inputs into a single string, and then pass that string as the input to useCompletion.

Here's a simple example of how you might do this:

import { useCompletion } from 'ai/react'
import { useState } from 'react'

export default function Completion() {
  const [additionalInput, setAdditionalInput] = useState('')
  const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion({ api: '/api/completion' })

  const handleAdditionalInputChange = (event) => {
    setAdditionalInput(event.target.value)
  }

  const handleFormSubmit = (event) => {
    event.preventDefault()
    handleSubmit(input + ' ' + additionalInput)
  }

  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      <form onSubmit={handleFormSubmit} className="flex items-center gap-3 mb-8">
        <label className="grow">
          <input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={input} onChange={handleInputChange} placeholder="Ask anything..." />
        </label>
        <label className="grow">
          <input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={additionalInput} onChange={handleAdditionalInputChange} placeholder="Additional input..." />
        </label>
        <button type="button" onClick={stop}> Stop </button>
        <button disabled={isLoading} type="submit"> Send </button>
      </form>
      <output>Completion result: {completion}</output>
    </div>
  )
}

In this example, we're managing an additional input value with its own state and input field. When the form is submitted, we concatenate the main input and the additional input into a single string, and pass that to the handleSubmit function.

Please note that this is a simplified example and you might need to adjust it based on your specific requirements and the behavior of your AI model.

(Source: Vercel Guides (https://vercel.com/guides/cohere-nextjs-vercel-ai-sdk))

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

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

[still moon]

@chrome pike i actually added useStae Hook value to The completion body? Is that a good way?

[chrome pike]

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

---

Yes, using the useState hook to manage the value of the input is a common and recommended way in React. This allows you to have a controlled input, where the value of the input is directly controlled by the state of your component.

When you use useState, you get a pair: the current state value and a function that lets you update it. You can use this function to update the state when the input changes.

Here's a simplified example:

import { useState } from 'react'
import { useCompletion } from 'ai/react'

export default function Completion() {
  const [inputValue, setInputValue] = useState('')
  const { completion, stop, isLoading, handleSubmit } = useCompletion({ api: '/api/completion' })

  const handleInputChange = (event) => {
    setInputValue(event.target.value)
  }

  const handleFormSubmit = (event) => {
    event.preventDefault()
    handleSubmit(inputValue)
  }

  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      <form onSubmit={handleFormSubmit} className="flex items-center gap-3 mb-8">
        <label className="grow">
          <input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={inputValue} onChange={handleInputChange} placeholder="Ask anything..." />
        </label>
        <button type="button" onClick={stop}> Stop </button>
        <button disabled={isLoading} type="submit"> Send </button>
      </form>
      <output>Completion result: {completion}</output>
    </div>
  )
}

In this example, inputValue is the current value of the input, and setInputValue is the function we use to update that value. We pass setInputValue to the onChange prop of the input field, so that every time the user types into the field, we update inputValue with the new text.

Then, when the form is submitted, we pass inputValue to the handleSubmit function from useCompletion, which sends the input to the AI model to generate a completion.

(Source: Vercel Guides (https://vercel.com/guides/cohere-nextjs-vercel-ai-sdk))

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

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

[still moon]

@chrome pike i mean that i give The input on The body prop that usecompletion has

[chrome pike]

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

---

Yes, you can certainly do that. The useCompletion hook accepts an object as an argument, and you can include an input property in this object to set the initial input value. This can be a value from your component's state that you're managing with the useState hook.

Here's an example:

import { useState } from 'react'
import { useCompletion } from 'ai/react'

export default function Completion() {
  const [inputValue, setInputValue] = useState('')

  const { completion, stop, isLoading, handleSubmit } = useCompletion({
    api: '/api/completion',
    input: inputValue
  })

  const handleInputChange = (event) => {
    setInputValue(event.target.value)
  }

  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      <form onSubmit={handleSubmit} className="flex items-center gap-3 mb-8">
        <label className="grow">
          <input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={inputValue} onChange={handleInputChange} placeholder="Ask anything..." />
        </label>
        <button type="button" onClick={stop}> Stop </button>
        <button disabled={isLoading} type="submit"> Send </button>
      </form>
      <output>Completion result: {completion}</output>
    </div>
  )
}

In this example, we're using useState to manage the inputValue state. We then pass inputValue as the input property to useCompletion. This sets the initial input for the text completion. When the input field changes, we update inputValue with the new text.

Please note that this will only set the initial input for the text completion. If you want to update the input for useCompletion after the initial render, you would need to call handleSubmit with the new input value.

(Source: Vercel Guides (https://vercel.com/guides/cohere-nextjs-vercel-ai-sdk))

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