ReactMarkdownでAI SDKメッセージを美しく

前回の記事では、VercelのAI SDKを利用したchatGPTサービスを作ってみました。

しかし、対話をしてみると文章がなんだか平凡です。

言っていることはわかるのですが、文章が詰まりすぎています。

classNameでwhitespace-pre-wrapを使うだけで美しく変わります。

<div className="text-gray-800 whitespace-pre-wrap">
    {message.content}
</div>

こうすると少なくともスペースは空きます。

よく見るとこの子、マークダウンで答えています。

それならReactMarkdownコンポーネントに回答を入れると少し美しくなりそうです。

1. ライブラリのインストールと設定

まず必要なライブラリをインストールしましょう。

yarn add react-markdown remark-gfm rehype-highlight highlight.js

• react-markdown: マークダウンをHTMLにレンダリングします。

• remark-gfm: 従来のマークダウンにいくつかの機能を追加したものです。

• rehype-highlight: コードハイライト機能。ただし多少の詳細設定が必要です。

• highlight.js: コードを解析して適切に強調してくれます。

これをdiv内に入れればいいです。

注意点はクラスからwhitespaceオプションを外すのを忘れないことです。

"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import "highlight.js/styles/atom-one-dark.css";

...
<div className="text-gray-800">
    <ReactMarkdown
    className="w-full h-5/6 prose"
    remarkPlugins={[remarkGfm]}
    rehypePlugins={[rehypeHighlight]}
    >
    {message.content}
    </ReactMarkdown>
</div>
...

こうすると上のようにマークダウン構文が強調されることがわかります。

テーブルやインラインコードブロックも可能です。

コードハイライトの色はhighllight公式サイトで確認できます。

入ってさまざまなスタイルを見て、最も気に入ったものを選べば良いです。

chatGPTが薦めるスタイルはDefault, Atom One Dark, Solarized Light, GitHubでした。

2. 後記

本当に一日に一つ追加すると時間が過ぎます。

それでも新学期が始まる前にはサービスを完成させる必要があるのが心配です。

論文は書けるのか…

もう少し頑張らないといけないですね。