Vercel AI SDK 6 – Next.js : テキスト生成

by

プロンプトに応じてテキストを生成する必要がある際にこの状況は発生する場合があります。ボタンがクリックされたときに /api/completion エンドポイントに POST リクエストを送信する、単純な React コンポーネントを作成しましょう。

Vercel AI SDK 6 : クックブック – Next.js : テキスト生成

作成 : Masashi Okumura (@classcat.com)
作成日時 : 02/21/2026
バージョン : ai@6.0.97

* 本記事は ai-sdk.dev/docs の以下のページを参考にしています :

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

 

Vercel AI SDK 6.x : クックブック – Next.js : テキスト生成

View Example on GitHub

プロンプトに応じてテキストを生成する必要がある際にこの状況は発生する場合があります。例えば、質問への応答を作成したり、テキストの本文を要約したい場合です。generateText 関数は入力プロンプトに基づいてテキストを生成するために使用できます。

 

クライアント

ボタンがクリックされたときに /api/completion エンドポイントに POST リクエストを送信する、単純な React コンポーネントを作成しましょう。エンドポイントは入力プロンプトに基づいてテキストを生成します。

app/page.tsx

'use client';

import { useState } from 'react';

export default function Page() {
  const [generation, setGeneration] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div>
      <div
        onClick={async () => {
          setIsLoading(true);

          await fetch('/api/completion', {
            method: 'POST',
            body: JSON.stringify({
              prompt: 'Why is the sky blue?',
            }),
          }).then(response => {
            response.json().then(json => {
              setGeneration(json.text);
              setIsLoading(false);
            });
          });
        }}
      >
        Generate
      </div>

      {isLoading ? 'Loading...' : generation}
    </div>
  );
}

 

サーバ

入力プロンプトに基づいてテキストを生成する、 /api/completion のルートハンドラを作成しましょう。このルートは ai モジュールの generateText 関数を呼び出します、これは入力プロンプトに基づいてテキストを生成してそれを返します。

app/api/completion/route.ts

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

export async function POST(req: Request) {
  const { prompt }: { prompt: string } = await req.json();

  const { text } = await generateText({
    model: openai("gpt-4o-mini"),
    system: 'You are a helpful assistant.',
    prompt,
  });

  return Response.json({ text });
}

 

以上