0.0.2 • Published 1 year ago
@typedai/react v0.0.2
A package for OpenAI to easily create text in realtime like you were writing a haiku.
Install the package for React or Next.js
npm install @typedai/react
Example in the client using Next.js 13
'use client'
import { useTypedAI } from './hooks/useTypedAI'
import { useEffect, useState } from 'react'
export default function Home() {
const [msg, setMsg] = useState('')
const { realTimeTypedAI, startTypedAI, setUserInput } = useTypedAI('/api/explain')
useEffect(() => {
setUserInput(msg)
}, [msg])
const handleForm = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
startTypedAI()
}
return (
<main>
<div>
<form onSubmit={handleForm}>
<label htmlFor="userInput">Type something</label>
<input type="text" value={msg} onChange={(e) => setMsg(e.currentTarget.value)} />
<button type="submit">Ask</button>
</form>
<p>{realTimeTypedAI}</p>
</div>
</main>
)
}
Example in the server using Next.js 13 route handler
import { oneLine, stripIndent } from 'common-tags'
import type { CreateCompletionRequest } from 'openai'
const OPENAPI_TOKEN = ''
export const POST = async (request: Request) => {
try {
if (!OPENAPI_TOKEN) {
throw new Error('OPENAPI_TOKEN is not set')
}
// request.json() is a function that returns a promise
const body = await request.json()
if (!body) {
throw new Error('No openapi field')
}
// prompt is the text that the model will use to generate a response
const prompt = stripIndent`
${oneLine`
You are going to answer a few questions about if someone is a good fit for a course.
Here is the information that gpt-3 will use to generate a response:
"""
name: foo
course: foo
age: foo
instructor: foo
"""
`}
Context: """${body.trim()}"""
Answer:
`
const completionsOpts = {
// engine is the name of the model to use
model: 'text-davinci-003',
// prompt is the text that the model will use to generate a response
prompt,
// max_tokens is how many words the model will generate
max_tokens: 256,
// temperature means how much the model will deviate from the prompt
temperature: 0.9,
// stream true means the API will return results as available
stream: true,
} satisfies CreateCompletionRequest
console.log(
`
Hello, this is a test of the OpenAI API.
`
)
const resp = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
Authorization: `Bearer ${OPENAPI_TOKEN}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(completionsOpts),
})
if (!resp.ok) {
throw new Error('OpenAI API error')
}
return new Response(resp.body, {
headers: {
'Content-Type': 'text/event-stream',
},
})
} catch (err) {
console.log(err)
}
}