.env - @ai-sdk/openai

.env 파일에 default 인 OPENAI_API_KEY로 셋팅을 했어도, server randering 이 디폴트인 Next.js 에서도, "use server" 가  별도 표기 되지 않으면 읽지를 못합니다. 물 .env 파일이 아니고 직접 apiKey= "xxxxx" 하면 실행은 되지만, 키가 프론트에 노출되므로 사용하면은 안되겠지요. 따라서 server 코드를 별도의 파일로 만들고, client 파일로 물러와야 해결이 됩니다.

'use server';

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai"

export const generateTextAction = async ()=>{
    const result = await generateText({    
        model: openai("gpt-3.5-turbo"),
        temperature:1,
        prompt: "Tell me a joke"
    })
}

 

또는

'use server';

import { generateText } from "ai";
import { createOpenAI} from "@ai-sdk/openai"

 const openai = createOpenAI({
 // 위의 "use server" 없으면 apiKey:"xxxxxx" 하면 되지만 ...
     apiKey: process.env.OPENAI_API_KEY,
 })

export const generateTextAction = async ()=>{
    const {text} = await generateText({
        model: openai("gpt-3.5-turbo"),
        temperature:1,
        prompt: "What is love?"
    })
   return text;
}

Client 

"use client";

import { Button } from "@/components/ui/button";
import { useState } from "react";
import { generateTextAction } from "./action";

export default function Page() {
    const [ generation, setGeneration ] = useState("")
  return (
    <div className="space-y-4 p-4">
        <Button variant="default"
            onClick= {async ()=>{
                const result = await generateTextAction();
                setGeneration(result)
            }}
        >Inquiry</Button>
        // 줄바꿈 기호 등을 이용 출력
        <pre className="text-blue-500">{generation}</pre>
    </div>
  )
}