Next.js Discord

Discord Forum

How to use pass message to Vercel/ai package without taking the prompt directly from the user?

Answered
Tibetan Terrier posted this in #help-forum
Open in Discord
Tibetan TerrierOP
 'use client'
 
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}>
        <input
          className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
          value={input}
          placeholder="Enter your prompt..."
          onChange={handleInputChange}
        />
        <p>Completion result: {completion}</p>
        <button type="button" onClick={stop}>
          Stop
        </button>
        <button disabled={isLoading} type="submit">
          Submit
        </button>
      </form>
    </div>
  )
}

this is from vercel's ai package. How can I pass the input to the useCompletion method without using an input field. I want it to be my own prompt.
Answered by tafutada777
View full answer

2 Replies

Answer
Tibetan TerrierOP
Thank you so much, that worked!