Vercel AI SDK, Next.js, and Hugging Face Chat Example

This example shows how to use the Vercel AI SDK with Next.js and the Hugging Face Inference to create a ChatGPT-like AI-powered streaming chat bot with Open Assistant's SFT-4 12B as the chat model.

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example https://github.com/vercel/ai/tree/main/examples/next-huggingface next-huggingface-app

yarn create next-app --example https://github.com/vercel/ai/tree/main/examples/next-huggingface next-huggingface-app

pnpm create next-app --example https://github.com/vercel/ai/tree/main/examples/next-huggingface next-huggingface-app

To run the example locally you need to:

1. Sign up at Hugging Face.
2. Go to your Hugging Face account settings. Create a User Access Token with read access.
3. Set the required Hugging Face environment variable with the token as shown the example env file but in a new file called .env.local.
4. pnpm install to install the required dependencies.
5. pnpm dev to launch the development server.

About Hugging Face

Hugging Face is company that develops tools for building applications using machine learning. It is most notable for its Transformers Python library built for natural language processing applications and its platform that allows users to share machine learning models and datasets.

About Open Assistant

The model in the example is Open Assistant SFT-4 12B. This is the 4th iteration English supervised-fine-tuning (SFT) model of the Open-Assistant project. It is based on a Pythia 12B that was fine-tuned on human demonstrations of assistant conversations collected through the Open Assistant human feedback web app before March 25, 2023.

Learn More

To learn more about Hugging Face, Next.js, and the Vercel AI SDK take a look at the following resources:

• Vercel AI SDK docs
• Vercel AI Playground
• Hugging Face Inference Documentation - learn about Hugging Face Inference SDK features and API.
• Open-Assistant SFT-4 12B Model - learn about the AI model in use
• Open Assistant Project - learn about the Open Assistant project
• Next.js Documentation - learn about Next.js features and API.