如何对 AI 聊天机器人进行国际化

2025年2月26日

Brian Lou

guideaichatbotinternationalizationnextjsvercel

介绍

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

所以我给它做了国际化。只花了 5 分钟。 具体步骤如下：

在这里查看效果：示例。

在这里查看代码：GitHub 仓库。

为什么要做国际化？

很多时候，开发者一门心思埋头做产品，反而忽略了用户。对于像 AI chatbot 这类天然多语言、面向所有人的应用来说，只支持英语的 chatbot 又有什么意义呢？

世界上大多数人甚至不会说英语。事实上，只有大约 20% 会。如果你在做一家创业公司的产品，而它只支持英语，那你是不是错过了超过 80% 的潜在用户？

其实，大多数产品只提供英语版本是有原因的。因为国际化真的很难。

像 next-intl 或 next-i18next 这样的现有库，配置和使用都非常麻烦。不仅如此，它们甚至不会帮你做翻译。你仍然需要雇佣翻译、维护包含数百个 key 的文案字典，还要处理国际化中的各种其他痛点。哪怕只是对文案做一点小改动，都可能需要花上几个小时，甚至几天才能完成翻译。

直到现在。

我开发了一个名为 gt-next 的新库，可以让你在几分钟内轻松为应用实现国际化。它是一个涵盖翻译、路由等功能在内的国际化一站式解决方案。

我用 gt-next 在 5 分钟 内就让 Vercel AI chatbot 支持了多语言。

安装

我先 fork 并克隆了这个代码仓库：

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 设置工具，并在每个问题上都选择了“是”：

npx gt-next-cli setup

接下来，我在 next.config.js 插件中添加了几个 locale：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来可以添加更多的 locale，不过这次只是想先用几种不同的语言来测试这个 chatbot。你可以随意添加任意数量的 locale！

这里是 gt-next 所支持的全部 locale 列表。

工作原理

该库的核心是 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>您可以将任何 JSX 作为 {'<T>'} 组件的子元素编写。</p>
      <p>
        例如,您可以编写一个<a href="/">链接</a>,并根据上下文翻译其中的文本。
      </p>
      <div>
        <div>
          <p>即使是深层嵌套的组件也会根据上下文进行翻译。</p>
          <button>点击我!</button>
        </div>
      </div>
    </T>
  )
}

任何包裹在 <T> 组件中的内容都可以被翻译。 CLI 安装工具使用自定义的 babel 解析器扫描我们的代码库，并自动用 <T> 包裹它找到的所有 React 组件。

使用 <T> 组件相比其他库有几个优势：

你完全不需要维护字典或管理 key。
翻译内容始终是最新的，并与代码保持同步。
翻译会自动包含所有相关上下文信息，从而实现更高质量的翻译。

运行聊天机器人

当然，我也不会忘记把所有环境变量都列出来。

cp .env.example .env.local

我需要在 General Translation 的 dashboard 上创建一个免费账号来获取 API 密钥。整个过程只需点几下就搞定了。

在配置好所有必需的环境变量之后，我就运行了这个聊天机器人：

npm run dev

就这样！我把浏览器语言切换成法语，界面就变成法语了。西班牙语和中文也是一样。

很简单，对吧？

我还在聊天机器人的页眉中加了一个语言选择器，让切换语言变得更加方便。

// 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 hook，并用它来翻译这些字符串，对它们进行了清理：

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 上。

总结

为这个 chatbot 做国际化的过程非常轻松。我完全不需要折腾任何配置文件、词典或复杂的路由设置。

短短几分钟内，我就搭建好了一个功能完整、完成国际化的 AI chatbot，并且支持西班牙语、法语和中文。

如果你对代码感兴趣，可以在这里查看。

如果你有兴趣使用 General Translation，可以访问官网、GitHub 仓库或文档。

如何对 AI 聊天机器人进行国际化

2025年2月26日

Brian Lou

guideaichatbotinternationalizationnextjsvercel

介绍

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

所以我给它做了国际化。只花了 5 分钟。 具体步骤如下：

在这里查看效果：示例。

在这里查看代码：GitHub 仓库。

为什么要做国际化？

其实，大多数产品只提供英语版本是有原因的。因为国际化真的很难。

直到现在。

我开发了一个名为 gt-next 的新库，可以让你在几分钟内轻松为应用实现国际化。它是一个涵盖翻译、路由等功能在内的国际化一站式解决方案。

我用 gt-next 在 5 分钟 内就让 Vercel AI chatbot 支持了多语言。

安装

我先 fork 并克隆了这个代码仓库：

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 设置工具，并在每个问题上都选择了“是”：

npx gt-next-cli setup

接下来，我在 next.config.js 插件中添加了几个 locale：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来可以添加更多的 locale，不过这次只是想先用几种不同的语言来测试这个 chatbot。你可以随意添加任意数量的 locale！

这里是 gt-next 所支持的全部 locale 列表。

工作原理

该库的核心是 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>您可以将任何 JSX 作为 {'<T>'} 组件的子元素编写。</p>
      <p>
        例如,您可以编写一个<a href="/">链接</a>,并根据上下文翻译其中的文本。
      </p>
      <div>
        <div>
          <p>即使是深层嵌套的组件也会根据上下文进行翻译。</p>
          <button>点击我!</button>
        </div>
      </div>
    </T>
  )
}

任何包裹在 <T> 组件中的内容都可以被翻译。 CLI 安装工具使用自定义的 babel 解析器扫描我们的代码库，并自动用 <T> 包裹它找到的所有 React 组件。

使用 <T> 组件相比其他库有几个优势：

你完全不需要维护字典或管理 key。
翻译内容始终是最新的，并与代码保持同步。
翻译会自动包含所有相关上下文信息，从而实现更高质量的翻译。

运行聊天机器人

当然，我也不会忘记把所有环境变量都列出来。

cp .env.example .env.local

我需要在 General Translation 的 dashboard 上创建一个免费账号来获取 API 密钥。整个过程只需点几下就搞定了。

在配置好所有必需的环境变量之后，我就运行了这个聊天机器人：

npm run dev

就这样！我把浏览器语言切换成法语，界面就变成法语了。西班牙语和中文也是一样。

很简单，对吧？

我还在聊天机器人的页眉中加了一个语言选择器，让切换语言变得更加方便。

// 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 hook，并用它来翻译这些字符串，对它们进行了清理：

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 上。

总结

为这个 chatbot 做国际化的过程非常轻松。我完全不需要折腾任何配置文件、词典或复杂的路由设置。

短短几分钟内，我就搭建好了一个功能完整、完成国际化的 AI chatbot，并且支持西班牙语、法语和中文。

如果你对代码感兴趣，可以在这里查看。

如果你有兴趣使用 General Translation，可以访问官网、GitHub 仓库或文档。

如何对 AI 聊天机器人进行国际化

2025年2月26日

Brian Lou

guideaichatbotinternationalizationnextjsvercel

介绍

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

所以我给它做了国际化。只花了 5 分钟。 具体步骤如下：

在这里查看效果：示例。

在这里查看代码：GitHub 仓库。

为什么要做国际化？

其实，大多数产品只提供英语版本是有原因的。因为国际化真的很难。

直到现在。

我开发了一个名为 gt-next 的新库，可以让你在几分钟内轻松为应用实现国际化。它是一个涵盖翻译、路由等功能在内的国际化一站式解决方案。

我用 gt-next 在 5 分钟 内就让 Vercel AI chatbot 支持了多语言。

安装

我先 fork 并克隆了这个代码仓库：

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 设置工具，并在每个问题上都选择了“是”：

npx gt-next-cli setup

接下来，我在 next.config.js 插件中添加了几个 locale：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来可以添加更多的 locale，不过这次只是想先用几种不同的语言来测试这个 chatbot。你可以随意添加任意数量的 locale！

这里是 gt-next 所支持的全部 locale 列表。

工作原理

该库的核心是 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>您可以将任何 JSX 作为 {'<T>'} 组件的子元素编写。</p>
      <p>
        例如,您可以编写一个<a href="/">链接</a>,并根据上下文翻译其中的文本。
      </p>
      <div>
        <div>
          <p>即使是深层嵌套的组件也会根据上下文进行翻译。</p>
          <button>点击我!</button>
        </div>
      </div>
    </T>
  )
}

任何包裹在 <T> 组件中的内容都可以被翻译。 CLI 安装工具使用自定义的 babel 解析器扫描我们的代码库，并自动用 <T> 包裹它找到的所有 React 组件。

使用 <T> 组件相比其他库有几个优势：

你完全不需要维护字典或管理 key。
翻译内容始终是最新的，并与代码保持同步。
翻译会自动包含所有相关上下文信息，从而实现更高质量的翻译。

运行聊天机器人

当然，我也不会忘记把所有环境变量都列出来。

cp .env.example .env.local

我需要在 General Translation 的 dashboard 上创建一个免费账号来获取 API 密钥。整个过程只需点几下就搞定了。

在配置好所有必需的环境变量之后，我就运行了这个聊天机器人：

npm run dev

就这样！我把浏览器语言切换成法语，界面就变成法语了。西班牙语和中文也是一样。

很简单，对吧？

我还在聊天机器人的页眉中加了一个语言选择器，让切换语言变得更加方便。

// 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 hook，并用它来翻译这些字符串，对它们进行了清理：

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 上。

总结

为这个 chatbot 做国际化的过程非常轻松。我完全不需要折腾任何配置文件、词典或复杂的路由设置。

短短几分钟内，我就搭建好了一个功能完整、完成国际化的 AI chatbot，并且支持西班牙语、法语和中文。

如果你对代码感兴趣，可以在这里查看。

如果你有兴趣使用 General Translation，可以访问官网、GitHub 仓库或文档。

如何对 AI 聊天机器人进行国际化

2025年2月26日

Brian Lou

guideaichatbotinternationalizationnextjsvercel

介绍

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

所以我给它做了国际化。只花了 5 分钟。 具体步骤如下：

在这里查看效果：示例。

在这里查看代码：GitHub 仓库。

为什么要做国际化？

其实，大多数产品只提供英语版本是有原因的。因为国际化真的很难。

直到现在。

我开发了一个名为 gt-next 的新库，可以让你在几分钟内轻松为应用实现国际化。它是一个涵盖翻译、路由等功能在内的国际化一站式解决方案。

我用 gt-next 在 5 分钟 内就让 Vercel AI chatbot 支持了多语言。

安装

我先 fork 并克隆了这个代码仓库：

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 设置工具，并在每个问题上都选择了“是”：

npx gt-next-cli setup

接下来，我在 next.config.js 插件中添加了几个 locale：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来可以添加更多的 locale，不过这次只是想先用几种不同的语言来测试这个 chatbot。你可以随意添加任意数量的 locale！

这里是 gt-next 所支持的全部 locale 列表。

工作原理

该库的核心是 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>您可以将任何 JSX 作为 {'<T>'} 组件的子元素编写。</p>
      <p>
        例如,您可以编写一个<a href="/">链接</a>,并根据上下文翻译其中的文本。
      </p>
      <div>
        <div>
          <p>即使是深层嵌套的组件也会根据上下文进行翻译。</p>
          <button>点击我!</button>
        </div>
      </div>
    </T>
  )
}

任何包裹在 <T> 组件中的内容都可以被翻译。 CLI 安装工具使用自定义的 babel 解析器扫描我们的代码库，并自动用 <T> 包裹它找到的所有 React 组件。

使用 <T> 组件相比其他库有几个优势：

你完全不需要维护字典或管理 key。
翻译内容始终是最新的，并与代码保持同步。
翻译会自动包含所有相关上下文信息，从而实现更高质量的翻译。

运行聊天机器人

当然，我也不会忘记把所有环境变量都列出来。

cp .env.example .env.local

我需要在 General Translation 的 dashboard 上创建一个免费账号来获取 API 密钥。整个过程只需点几下就搞定了。

在配置好所有必需的环境变量之后，我就运行了这个聊天机器人：

npm run dev

就这样！我把浏览器语言切换成法语，界面就变成法语了。西班牙语和中文也是一样。

很简单，对吧？

我还在聊天机器人的页眉中加了一个语言选择器，让切换语言变得更加方便。

// 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 hook，并用它来翻译这些字符串，对它们进行了清理：

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 上。

总结

为这个 chatbot 做国际化的过程非常轻松。我完全不需要折腾任何配置文件、词典或复杂的路由设置。

短短几分钟内，我就搭建好了一个功能完整、完成国际化的 AI chatbot，并且支持西班牙语、法语和中文。

如果你对代码感兴趣，可以在这里查看。

如果你有兴趣使用 General Translation，可以访问官网、GitHub 仓库或文档。

本页内容

本页内容

本页内容

本页内容