Next.js AI Chatbot for Azure

A fork of An Open-Source AI Chatbot Template. Everything is the same, but repurposed for Azure.

Read Docs · Features · Model Providers · Deploy Your Own · Running locally

Features

• Next.js App Router
  • Advanced routing for seamless navigation and performance
  • React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
• AI SDK
  • Unified API for generating text, structured objects, and tool calls with LLMs
  • Hooks for building dynamic chat and generative user interfaces
  • Supports xAI (default), OpenAI, Fireworks, and other model providers
• shadcn/ui
  • Styling with Tailwind CSS
  • Component primitives from Radix UI for accessibility and flexibility
• Data Persistence
  • Azure CosmosDB for PostgreSQL for saving chat history and user data
  • Azure Blob Storage for efficient file storage
• NextAuth.js
  • Simple and secure authentication

Model Providers

This template comes with three default Azure OpenAI model configurations through environment variables: a small model (e.g., o3-mini), a large model (e.g., o1), and a reasoning model (e.g., DeepSeek). Using the AI SDK with AzureProvider, you can easily configure additional models and LLM providers with just a few environment variable updates, see .env.example for guidance.

Deploy Your Own

You can deploy your own version of the Next.js AI Chatbot either directly or containerized to a Azure App Service.

Dockerfile template is taken from Next.js example repo with a slight modification of updating image to node:21-alpine

Running locally

You will need to use the environment variables defined in .env.example to run Next.js AI Chatbot.

Note: You should not commit your .env file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.

Create .env.local, copy over, and fill in all the environment variables from .env.example

pnpm install
pnpm dev

Your app template should now be running on localhost:3000.

Running with Docker

1. Build your container: docker build -t nextjs-docker ..
2. Run your container: docker run -p 3000:3000 nextjs-docker.

Additional instructions for Azure CosmosDB for Postgres

If you are getting permission denied error, you can first grant create permission to particular user with that database.

GRANT CREATE ON DATABASE citus to citus;

NOTE: PG15 introduced the concept of security invoker and security definer views. All views pre-PG15 are security definer views. However Citus treats all views as security invoker views.