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

2025年2月26日

Brian Lou

ガイドAIチャットボット国際化nextjsvercel

はじめに

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

そこで、これを国際化してみました。しかも 5 分で。 やり方はこちらです。

実際に試すにはこちらをご覧ください。

コードはこちらです。

なぜ国際化するのか？

開発者は往々にして、プロダクトの開発に集中するあまり、ユーザーのことを後回しにしてしまいます。特に AI チャットボットのように、もともと多言語での利用が前提で、誰でも使えるように設計されたアプリでは、英語にしか対応していないチャットボットにどれほどの価値があるでしょうか？

そもそも、世界の大半の人は英語を話しません。実際、英語を話せる人は**20%ほどしかいません。スタートアップに取り組んでいて、プロダクトが英語でしか使えないとしたら、潜在顧客の80%**以上を取りこぼしていることになりませんか？

実際、ほとんどのプロダクトが英語でしか提供されていないのには理由があります。国際化は難しいからです。

next-intl や next-i18next のような既存ライブラリは、設定も使い方も面倒です。しかも、翻訳そのものはしてくれません。結局のところ、翻訳者を雇い、何百ものキーを持つ辞書を管理し、国際化にまつわるさまざまな煩雑さにも対処しなければなりません。テキストのちょっとした変更ですら、翻訳されるまでに数時間、場合によっては数日かかることもあります。

ですが、それももう過去の話です。

私は gt-next という新しいライブラリを開発してきました。これを使えば、数分でアプリを国際化できます。翻訳、ルーティング、そのほか国際化に必要な機能をまとめて提供する、ワンストップのライブラリです。

私は gt-next を使って、Vercel AI chatbot を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 のパッケージをインストールしました。

npm install gt-next gt

設定

その後、CLI のセットアップツールを実行し、すべての質問で "はい" を選択しました。

npx gt init

その後、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>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

<T> コンポーネントで囲まれたものは、すべて翻訳対象にできます。 CLI のセットアップツールはカスタムの Babel パーサーを使ってコードベースを走査し、見つかった React コンポーネントを自動的に <T> でラップします。

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

辞書を扱ったりキーを管理したりする必要がありません。
翻訳は常に最新の状態に保たれ、コードとの同期も維持されます。
翻訳には周辺のコンテキスト情報がすべて自動的に含まれるため、より適切な翻訳が可能になります。

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

もちろん、環境変数もすべて忘れずに含めています。

cp .env.example .env.local

API キーを取得するには、General Translation のダッシュボードで無料アカウントを作成する必要がありました。数回クリックするだけで済みました。

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

npm run dev

以上です！ブラウザの言語をフランス語に切り替えると、UI もフランス語に変わりました。スペイン語や中国語でも同じです。

簡単ですよね？

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

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 既存のコード ... */}
    <LocaleSelector />
    {/* ... 既存のコード ... */}
  );
}

特別な設定なしで動作しました。

クリーンアップ

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

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

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

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

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

これで完了です！チャットボット内のすべてのテキストが国際化され、どの言語でも使えるようになりました。

本番環境へのデプロイ

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

npx gt translate --locales es fr zh

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

結論

チャットボットの国際化は驚くほど簡単でした。設定ファイルや辞書、複雑なルーティングをあれこれいじる必要もありませんでした。

わずか数分で、スペイン語、フランス語、中国語に対応した、完全に動作する国際化済みの AI チャットボットを構築できました。

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

General Translation の利用に興味があれば、Web サイト、GitHub リポジトリ、またはドキュメントをご覧ください。

戻る

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

2025年2月26日

Brian Lou

ガイドAIチャットボット国際化nextjsvercel

はじめに

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

そこで、これを国際化してみました。しかも 5 分で。 やり方はこちらです。

実際に試すにはこちらをご覧ください。

コードはこちらです。

なぜ国際化するのか？

実際、ほとんどのプロダクトが英語でしか提供されていないのには理由があります。国際化は難しいからです。

ですが、それももう過去の話です。

私は gt-next を使って、Vercel AI chatbot を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 のパッケージをインストールしました。

npm install gt-next gt

設定

その後、CLI のセットアップツールを実行し、すべての質問で "はい" を選択しました。

npx gt init

その後、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>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

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

辞書を扱ったりキーを管理したりする必要がありません。
翻訳は常に最新の状態に保たれ、コードとの同期も維持されます。
翻訳には周辺のコンテキスト情報がすべて自動的に含まれるため、より適切な翻訳が可能になります。

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

もちろん、環境変数もすべて忘れずに含めています。

cp .env.example .env.local

API キーを取得するには、General Translation のダッシュボードで無料アカウントを作成する必要がありました。数回クリックするだけで済みました。

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

npm run dev

以上です！ブラウザの言語をフランス語に切り替えると、UI もフランス語に変わりました。スペイン語や中国語でも同じです。

簡単ですよね？

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

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 既存のコード ... */}
    <LocaleSelector />
    {/* ... 既存のコード ... */}
  );
}

特別な設定なしで動作しました。

クリーンアップ

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

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

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

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

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

これで完了です！チャットボット内のすべてのテキストが国際化され、どの言語でも使えるようになりました。

本番環境へのデプロイ

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

npx gt translate --locales es fr zh

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

結論

チャットボットの国際化は驚くほど簡単でした。設定ファイルや辞書、複雑なルーティングをあれこれいじる必要もありませんでした。

わずか数分で、スペイン語、フランス語、中国語に対応した、完全に動作する国際化済みの AI チャットボットを構築できました。

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

General Translation の利用に興味があれば、Web サイト、GitHub リポジトリ、またはドキュメントをご覧ください。

戻る

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

2025年2月26日

Brian Lou

ガイドAIチャットボット国際化nextjsvercel

はじめに

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

そこで、これを国際化してみました。しかも 5 分で。 やり方はこちらです。

実際に試すにはこちらをご覧ください。

コードはこちらです。

なぜ国際化するのか？

実際、ほとんどのプロダクトが英語でしか提供されていないのには理由があります。国際化は難しいからです。

ですが、それももう過去の話です。

私は gt-next を使って、Vercel AI chatbot を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 のパッケージをインストールしました。

npm install gt-next gt

設定

その後、CLI のセットアップツールを実行し、すべての質問で "はい" を選択しました。

npx gt init

その後、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>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

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

辞書を扱ったりキーを管理したりする必要がありません。
翻訳は常に最新の状態に保たれ、コードとの同期も維持されます。
翻訳には周辺のコンテキスト情報がすべて自動的に含まれるため、より適切な翻訳が可能になります。

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

もちろん、環境変数もすべて忘れずに含めています。

cp .env.example .env.local

API キーを取得するには、General Translation のダッシュボードで無料アカウントを作成する必要がありました。数回クリックするだけで済みました。

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

npm run dev

以上です！ブラウザの言語をフランス語に切り替えると、UI もフランス語に変わりました。スペイン語や中国語でも同じです。

簡単ですよね？

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

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 既存のコード ... */}
    <LocaleSelector />
    {/* ... 既存のコード ... */}
  );
}

特別な設定なしで動作しました。

クリーンアップ

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

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

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

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

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

これで完了です！チャットボット内のすべてのテキストが国際化され、どの言語でも使えるようになりました。

本番環境へのデプロイ

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

npx gt translate --locales es fr zh

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

結論

チャットボットの国際化は驚くほど簡単でした。設定ファイルや辞書、複雑なルーティングをあれこれいじる必要もありませんでした。

わずか数分で、スペイン語、フランス語、中国語に対応した、完全に動作する国際化済みの AI チャットボットを構築できました。

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

General Translation の利用に興味があれば、Web サイト、GitHub リポジトリ、またはドキュメントをご覧ください。

戻る

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

2025年2月26日

Brian Lou

ガイドAIチャットボット国際化nextjsvercel

はじめに

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

そこで、これを国際化してみました。しかも 5 分で。 やり方はこちらです。

実際に試すにはこちらをご覧ください。

コードはこちらです。

なぜ国際化するのか？

実際、ほとんどのプロダクトが英語でしか提供されていないのには理由があります。国際化は難しいからです。

ですが、それももう過去の話です。

私は gt-next を使って、Vercel AI chatbot を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 のパッケージをインストールしました。

npm install gt-next gt

設定

その後、CLI のセットアップツールを実行し、すべての質問で "はい" を選択しました。

npx gt init

その後、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>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

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

辞書を扱ったりキーを管理したりする必要がありません。
翻訳は常に最新の状態に保たれ、コードとの同期も維持されます。
翻訳には周辺のコンテキスト情報がすべて自動的に含まれるため、より適切な翻訳が可能になります。

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

もちろん、環境変数もすべて忘れずに含めています。

cp .env.example .env.local

API キーを取得するには、General Translation のダッシュボードで無料アカウントを作成する必要がありました。数回クリックするだけで済みました。

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

npm run dev

以上です！ブラウザの言語をフランス語に切り替えると、UI もフランス語に変わりました。スペイン語や中国語でも同じです。

簡単ですよね？

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

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 既存のコード ... */}
    <LocaleSelector />
    {/* ... 既存のコード ... */}
  );
}

特別な設定なしで動作しました。

クリーンアップ

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

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

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

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

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

これで完了です！チャットボット内のすべてのテキストが国際化され、どの言語でも使えるようになりました。

本番環境へのデプロイ

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

npx gt translate --locales es fr zh

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

結論

チャットボットの国際化は驚くほど簡単でした。設定ファイルや辞書、複雑なルーティングをあれこれいじる必要もありませんでした。

わずか数分で、スペイン語、フランス語、中国語に対応した、完全に動作する国際化済みの AI チャットボットを構築できました。

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

General Translation の利用に興味があれば、Web サイト、GitHub リポジトリ、またはドキュメントをご覧ください。

このページについて

このページについて

このページについて

このページについて