diff --git a/README.md b/README.md index a5db39338c0..f5eb049c4be 100644 --- a/README.md +++ b/README.md @@ -46,21 +46,21 @@ The goal of this library lies in its commitment to work directly with each AI/Mo ```tsx // app/api/generate/route.ts -import { Configuration, OpenAIApi } from 'openai-edge'; -import { OpenAITextStream, StreamingTextResponse } from '@vercel/ai-utils'; +import { Configuration, OpenAIApi } from "openai-edge"; +import { OpenAITextStream, StreamingTextResponse } from "@vercel/ai-utils"; const config = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }); const openai = new OpenAIApi(config); -export const runtime = 'edge'; +export const runtime = "edge"; export async function POST() { const response = await openai.createChatCompletion({ - model: 'gpt-4', + model: "gpt-4", stream: true, - messages: [{ role: 'user', content: 'What is love?' }], + messages: [{ role: "user", content: "What is love?" }], }); const stream = OpenAITextStream(response); return new StreamingTextResponse(stream); @@ -99,8 +99,8 @@ Create a Next.js Route Handler that uses the Edge Runtime that we'll use to gene ```tsx // ./app/api/generate/route.ts -import { Configuration, OpenAIApi } from 'openai-edge'; -import { OpenAITextStream, StreamingTextResponse } from '@vercel/ai-utils'; +import { Configuration, OpenAIApi } from "openai-edge"; +import { OpenAITextStream, StreamingTextResponse } from "@vercel/ai-utils"; // Create an OpenAI API client (that's edge friendly!) const config = new Configuration({ @@ -109,7 +109,7 @@ const config = new Configuration({ const openai = new OpenAIApi(config); // IMPORTANT! Set the runtime to edge -export const runtime = 'edge'; +export const runtime = "edge"; export async function POST(req: Request) { // Extract the `prompt` from the body of the request @@ -117,7 +117,7 @@ export async function POST(req: Request) { // Ask OpenAI for a streaming chat completion given the prompt const response = await openai.createCompletion({ - model: 'gpt-3.5-turbo', + model: "gpt-3.5-turbo", stream: true, prompt, }); @@ -136,21 +136,21 @@ Create a Client component with a form that we'll use to gather the prompt from t ```tsx // ./app/form.ts -'use client'; +"use client"; -import { useState } from 'react'; -import { useCompletion } from '@vercel/ai-utils/react'; //@todo +import { useState } from "react"; +import { useCompletion } from "@vercel/ai-utils/react"; //@todo export function Form() { - const [value, setValue] = useState(''); - const { setPrompt, completion } = useCompletion('/api/generate'); + const [value, setValue] = useState(""); + const { setPrompt, completion } = useCompletion("/api/generate"); return (
{ e.preventDefault(); setPrompt(value); - setValue(''); + setValue(""); }} >