AI SDKを利用して校正したテキストをdiffで表示する

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

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    system:
      'あなたは文章校正の専門アシスタントです。以下の文章について、誤字・脱字・誤変換を検出し、修正後の文章を出力してください。',
    prompt,
  });

  return result.toDataStreamResponse();
}

'use client';

import { useState } from 'react';

import { useCompletion } from '@ai-sdk/react';
import { diffChars } from 'diff';

export default function Page() {
  const [input, setInput] = useState('');
  const [text, setText] = useState('');
  const { completion, complete, isLoading } = useCompletion({
    api: '/api/completion',
  });
  const diff = diffChars(text, completion);

  return (
    <div className="flex flex-col gap-4 p-10">
      <div className="flex gap-4">
        <textarea
          className="w-full min-w-1/2 rounded border"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          rows={20}
          placeholder="入力してください"
        />

        <div className="min-w-1/2 rounded border wrap-anywhere whitespace-pre-wrap">
          {completion && !isLoading ? (
            <>
              {diff.map((part, index) => (
                <span
                  key={index}
                  className={`${part.added && 'text-green-700'} ${part.removed && 'text-red-600 line-through'}`}
                >
                  {part.value}
                </span>
              ))}
            </>
          ) : (
            completion
          )}
        </div>
      </div>
      <button
        className="w-full rounded border bg-gray-50 p-2 hover:bg-gray-200"
        onClick={async () => {
          setText(input);
          await complete(input);
        }}
      >
        検証
      </button>
    </div>
  );
}