gt-next + Vercel AI Chatbot

This is an example project showcasing a multilingual AI Chatbot using gt-next.

This project was using the Vercel AI Chatbot Template.

See it live here.

Change your browser language to see the translations in action.

• Chrome
• Firefox
• Safari
• Edge

Deploy to Vercel

One-click deploy to Vercel:

Everything works out of the box!

Docs

See the docs for more information on how to use gt-next with Next.js.

Cloning

To clone this example and see it in action yourself, follow the following steps:

1. Run

git clone https://github.com/General-Translation/gt-libraries.git
cd gt-libraries/examples/next-chatbot
npm install

2. (Optional) Create a .local.env file and populate it with GT_PROJECT_ID and GT_API_KEY, obtainable via the GT Dashboard here

   • This example comes with translations for French, Spanish, and Chinese out of the box, but if you want to experiment with other locales or modify some content, you'll need to add your own API keys.

3. Run npm run dev

Step by Step Setup

Here is a list of steps done to reach this repo state:

1. npx create-next-app@latest
2. npm install gt-next gt-next-cli
3. npx gt-next-cli setup
4. Add locales to the next.config.ts file:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['en-US', 'fr', 'es', 'zh'],
});

5. Wrap strings with t:

const t = useGT();
t('Hello, world!');

6. (optional) Create a .local.env file and populate it with GT_PROJECT_ID and GT_API_KEY
   • These environment variables are needed for local translations during development. The GT_API_KEY should be a development API key. A separate production API Key is needed for subsequent steps when deploying to production.
7. npm run dev

To deploy this app to production:

1. Add GT_PROJECT_ID and GT_API_KEY to your .env.local file
   • The GT_API_KEY should be a production API key.
2. npx gt-next-cli translate --locales es fr zh
3. Deploy to Vercel / Render / etc..