Skip to content
VercelLogotypeVercelLogotype
LoginSign Up

Azure AI RAG Chatbot

Sample retrieval-augmented generation (RAG) AI chatbot app using Next.js, shadcn/ui, Azure AI Search, Azure OpenAI, and Vercel AI SDK

DeployView Demo

Azure AI + Vercel AI SDK RAG Template

Live sample: https://vercelazurerag.azurewebsites.net/

A Next.js application, powered by the Vercel AI SDK, that uses retrieval-augmented generation (RAG) to reason and respond with information outside of the model's training data.

Features

  • Information retrieval and addition through tool calls using the streamText function
  • Real-time streaming of model responses to the frontend using the useChat hook
  • Vector embedding retrieval with Azure AI Search using embeddings from Azure OpenAI
  • Generative text streaming with Azure OpenAI
  • Animated UI with Framer Motion

Getting Started

To get the project up and running, follow these steps:

  1. Install dependencies:

    npm install
  2. Copy the example environment file:

    cp .env.example .env
  3. Create prerequisite resources in Azure AI:

  • Azure AI Search index
    • Optionally create a semantic search configuration and include vector fields in the index

Note: create a vector search index via REST API or within Azure Portal)

  • Azure OpenAI Chat model
  • Azure OpenAI Embedding model, if using vector search

Note: see available Azure OpenAI models here and deploy them using this guide

  1. Add your Azure OpenAI and Azure AI Search variables to the .env file:

    AZURE_SEARCH_ENDPOINT=your_azure_search_endpoint_here
    AZURE_SEARCH_KEY=your_azure_search_key_here
    AZURE_SEARCH_INDEX_NAME=your_azure_search_index_name_here
    AZURE_SEARCH_CONTENT_FIELD=your_azure_search_content_field_here
    AZURE_SEARCH_VECTOR_FIELD=your_azure_search_vector_field_here # include if using vector search
    AZURE_SEARCH_SEMANTIC_CONFIGURATION_NAME=your_azure_search_semantic_configuration_name_here # include if using semantic search
    AZURE_OPENAI_API_ENDPOINT=your_azure_openai_api_endpoint_here
    AZURE_RESOURCE_NAME=your_azure_resource_name_here
    AZURE_DEPLOYMENT_NAME=your_azure_deployment_name_here # chat model deployment name
    AZURE_EMBEDDING_DEPLOYMENT_NAME=your_azure_embedding_deployment_name_here # embedding model deployment name
    AZURE_API_KEY=your_azure_api_key_here
  2. Start the development server:

    npm run dev

Your project should now be running on http://localhost:3000.

Virtual Dev Environments

Appendix

This template includes code from Vercel's AI SDK RAG Template, which is licensed under the MIT license.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

GitHub
OwnerAzure-Samples
Repositoryazure-ai-vercel-rag-starter
Use Cases
AI
Stack
Next.js
Tailwind

Related Templates

Chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel
Chatbot thumbnail

RAG with Vercel AI SDK

A retrieval-augmented generation chatbot built with Next.js, the Vercel AI SDK, Drizzle ORM, and PostgreSQL.
RAG with Vercel AI SDK thumbnail

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • ConnectNew
  • PassportNew
  • eveNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • Bot ID

Tools

  • Vercel DropNew
  • Vercel Agent
  • Vercel PluginNew
  • Agent Skills
  • Next.js
  • Domains
  • v0

Frameworks

  • eveNew
  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • xmcp
  • All frameworks

SDKs

  • Vercel SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDKNew
  • Queues SDKNew
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Vercel + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Vercel
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status

Social

  • GitHub
  • X
  • LinkedIn
  • YouTube
  • Instagram
  • VercelVercel
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Passport
  • eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD
Tools
  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
EnterprisePricing
Contact
Log InSign Up
Dashboard

Products

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Passport
  • eve

Core Platform

  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD

Tools

  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Resources

Learn

  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce

Explore

  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
Enterprise
Pricing
Sign UpLog In
Contact
DeployView Demo

Loading status…

Select a display theme: