戻る

AIチャットボットを国際化する方法

Brian Lou avatarBrian Lou
guideaichatbotinternationalizationnextjsvercel

Intro

先日、Vercel で Next.js の AI チャットボット用テンプレートを見つけました。 驚いたことに、英語版しかありませんでした。

そこで、国際化対応してみました。5分で。 やり方は次のとおりです。

実際の動作はこちらから確認できます。

コードはこちらから確認できます。

なぜ国際化が必要なのか？

多くの場合、開発者はプロダクトを作ることに集中しすぎて、ユーザーのことを忘れてしまいがちです。 AI チャットボットのように、本来多言語対応で誰でも使えることを前提に設計されているアプリにおいて、 英語にしか対応していないチャットボットに、一体どれだけの価値があるでしょうか？

世界のほとんどの人は英語を話しません。実際に話せるのは 20% 程度にすぎません。 もしあなたがスタートアップでプロダクトを開発していて、そのプロダクトが英語でしか利用できないとしたら、 潜在顧客の 80% 以上を取り逃していることになりませんか？

実は、多くのプロダクトが英語版しかないのには理由があります。国際化は難しいからです。

next-intl や next-i18next のような既存のライブラリは、セットアップも利用も面倒です。それだけでなく、翻訳自体は何もしてくれません。 翻訳者を雇い、何百ものキーを持つ辞書を管理し、国際化に伴うあらゆる面倒ごとに対処する必要があります。 テキストを少し変更するだけでも、翻訳が反映されるまでに数時間から数日かかることもあります。

これまでは。

私は gt-next という新しいライブラリを開発しており、数分でアプリを簡単に国際化できるようにしました。 翻訳、ルーティングなど、国際化に必要なものをひととおり揃えたワンストップソリューションです。

私は gt-next を使って、Vercel AI チャットボットを 5 分 で国際化しました。

インストール

まず、リポジトリをフォークしてクローンしました。

git clone https://github.com/vercel/ai-chatbot.git

次に、依存パッケージをインストールしました。

npm install

私と同じように依存関係の競合に遭遇している場合は、このブランチを試してみてください。

git clone -b base https://github.com/General-Translation/ai-chatbot.git

次に、gt-next と gt-next-cli の各パッケージをインストールしました。

npm install gt-next gt-next-cli

設定

次に、CLI セットアップツールを実行し、すべての質問に「Yes」を選択しました。

npx gt-next-cli setup

このあと、next.config.js のプラグインにいくつかのロケールを追加しました。

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // フランス語、スペイン語、中国語
})

もっと多くのロケールを追加することもできましたが、今回はチャットボットをいくつかの異なる言語でテストしてみたかっただけです。必要なだけロケールを自由に追加してください。

gt-next がサポートしているすべてのロケールの一覧はこちらです。

仕組み

このライブラリの中核となるのが <T> コンポーネントです。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>{'<T>'}コンポーネントの子要素として任意のJSXを記述できます。</p>
      <p>
        例えば、<a href="/">リンク</a>を記述すると、
        そのテキストがコンテキストに応じて翻訳されます。
      </p>
      <div>
        <div>
          <p>深くネストされたコンポーネントもコンテキストに応じて翻訳されます。</p>
          <button>クリックしてください！</button>
        </div>
      </div>
    </T>
  )
}

<T> コンポーネントでラップされた部分は、すべて翻訳できます。 CLI セットアップツールはカスタムの Babel パーサーを使用してコードベースをスキャンし、 検出した React コンポーネントを自動的に <T> でラップします。

<T> コンポーネントを使用することには、他のライブラリと比べていくつかの利点があります。

  • 辞書やキーの管理に悩まされることはありません。
  • 翻訳は常に最新の状態に保たれ、コードと自動的に同期されます。
  • 翻訳には周辺のコンテキスト情報がすべて自動的に含まれるため、より高品質な翻訳が可能になります。

チャットボットを実行する

もちろん、環境変数もすべてきちんと用意してあります。

cp .env.example .env.local

API キーを取得するために、General Translation の dashboard で無料アカウントを作成する必要がありました。 数回のクリックで完了しました。

必要な環境変数をすべて設定したあと、チャットボットを実行しました。

npm run dev

これで完了です！ブラウザの言語設定をフランス語に切り替えると、UI もフランス語に変わりました。スペイン語や中国語でも同様です。

簡単ですよね？

チャットボットのヘッダーに言語セレクターを追加して、言語の切り替えをさらに簡単にしました。

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... existing code ... */}
    <LocaleSelector />
    {/* ... existing code ... */}
  );
}

インストールしただけで、そのまま動きました。

クリーンアップ

CLI のセットアップツールはすべての React 要素をうまく翻訳してくれましたが、 いくつかの厄介な文字列がハードコードされたまま残っていました。

たとえば、model-selector.tsx ファイルにはチャットモデルの説明文がいくつかハードコードされていました。

{
  id: 'chat-model-large',
  name: '大規模モデル',
  description: '複雑なマルチステップタスクに対応する大規模モデル',
},

これらは、gt-next/client から useGT フックをインポートし、それを使って文字列を翻訳するようにして整理しました。

import { useGT } from 'gt-next/client';
const t = useGT();
{
  id: 'chat-model-large',
  name: t('大規模モデル'),
  description: t('複雑なマルチステップタスクに対応する大規模モデル'),
},

以上です！これでチャットボット内のテキストはすべて国際化され、どの言語でも利用できるようになりました。

本番環境へのデプロイ

本番環境へのデプロイはさらに簡単でした。GT_API_KEY 環境変数を本番用の API キーに入れ替えて、translate コマンドを実行しました。

npx gt-next-cli translate --locales es fr zh

最後に、チャットボットをVercelにデプロイしました。

まとめ

このチャットボットの多言語対応は、とてもスムーズに行えました。 設定ファイルや辞書、複雑なルーティングなどをいじる必要はまったくありませんでした。

数分で、スペイン語・フランス語・中国語に対応した、 完全に動作する多言語 AI チャットボットを用意できました。

コードに興味があれば、こちらから確認できます。

General Translation の利用に興味があれば、Web サイト、GitHub リポジトリ、または ドキュメント をチェックしてみてください。