MCPcopy Index your code
hub / github.com/Azure-Samples/serverless-chat-langchainjs

github.com/Azure-Samples/serverless-chat-langchainjs @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
43 symbols 126 edges 16 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Serverless AI Chat with RAG using LangChain.js

Open project in GitHub Codespaces Join Azure AI Foundry Discord Official Learn documentation Watch to learn about RAG and this sample on YouTube dev.to blog post walkthrough

Build Status Node version Ollama + Llama3.1 TypeScript License

:star: If you like this sample, star it on GitHub — it helps a lot!

OverviewGet startedRun the sampleResourcesFAQTroubleshooting

Animation showing the chat app in action

This sample shows how to build a serverless AI chat experience with Retrieval-Augmented Generation using LangChain.js and Azure. The application is hosted on Azure Static Web Apps and Azure Functions, with Azure Cosmos DB for NoSQL as the vector database. You can use it as a starting point for building more complex AI applications.

[!TIP] You can test this application locally without any cost using Ollama. Follow the instructions in the Local Development section to get started.

Overview

Building AI applications can be complex and time-consuming, but using LangChain.js and Azure serverless technologies allows to greatly simplify the process. This application is a chatbot that uses a set of enterprise documents to generate responses to user queries.

We provide sample data to make this sample ready to try, but feel free to replace it with your own. We use a fictitious company called Contoso Real Estate, and the experience allows its customers to ask support questions about the usage of its products. The sample data includes a set of documents that describes its terms of service, privacy policy and a support guide.

Application architecture

This application is made from multiple components:

  • A web app made with a single chat web component built with Lit and hosted on Azure Static Web Apps. The code is located in the packages/webapp folder.

  • A serverless API built with Azure Functions and using LangChain.js to ingest the documents and generate responses to the user chat queries. The code is located in the packages/api folder.

  • A database to store chat sessions and the text extracted from the documents and the vectors generated by LangChain.js, using Azure Cosmos DB for NoSQL.

  • A file storage to store the source documents, using Azure Blob Storage.

We use the HTTP protocol for AI chat apps to communicate between the web app and the API.

Features

  • Serverless Architecture: Utilizes Azure Functions and Azure Static Web Apps for a fully serverless deployment.
  • Retrieval-Augmented Generation (RAG): Combines the power of Azure Cosmos DB and LangChain.js to provide relevant and accurate responses.
  • Chat Sessions History: Maintains a personal chat history for each user, allowing them to revisit previous conversations.
  • Scalable and Cost-Effective: Leverages Azure's serverless offerings to provide a scalable and cost-effective solution.
  • Local Development: Supports local development using Ollama for testing without any cloud costs.

Getting started

There are multiple ways to get started with this project.

The quickest way is to use GitHub Codespaces that provides a preconfigured environment for you. Alternatively, you can set up your local environment following the instructions below.

[!IMPORTANT] If you want to run this sample entirely locally using Ollama, you have to follow the instructions in the local environment section.

Use your local environment

You need to install following tools to work on your local machine:

  • Node.js LTS
  • Azure Developer CLI
  • Git
  • PowerShell 7+ (for Windows users only)
  • Important: Ensure you can run pwsh.exe from a PowerShell command. If this fails, you likely need to upgrade PowerShell.
  • Instead of Powershell, you can also use Git Bash or WSL to run the Azure Developer CLI commands.
  • Azure Functions Core Tools (should be installed automatically with NPM, only install manually if the API fails to start)

Then you can get the project code:

  1. Fork the project to create your own copy of this repository.
  2. On your forked repository, select the Code button, then the Local tab, and copy the URL of your forked repository.

Screenshot showing how to copy the repository URL

  1. Open a terminal and run this command to clone the repo: git clone <your-repo-url>

Use GitHub Codespaces

You can run this project directly in your browser by using GitHub Codespaces, which will open a web-based VS Code:

Open in GitHub Codespaces

Use a VSCode dev container

A similar option to Codespaces is VS Code Dev Containers, that will open the project in your local VS Code instance using the Dev Containers extension.

You will also need to have Docker installed on your machine to run the container.

Open in Dev Containers

Run the sample

There are multiple ways to run this sample: locally using Ollama or Azure OpenAI models, or by deploying it to Azure.

Deploy the sample to Azure

Azure prerequisites

Cost estimation

See the cost estimation details for running this sample on Azure.

Deploy the sample

  1. Open a terminal and navigate to the root of the project.
  2. Authenticate with Azure by running azd auth login.
  3. Run azd up to deploy the application to Azure. This will provision Azure resources, deploy this sample, and build the search index based on the files found in the ./data folder.
  4. You will be prompted to select a base location for the resources. If you're unsure of which location to choose, select eastus2.
  5. By default, the OpenAI resource will be deployed to eastus2. You can set a different location with azd env set AZURE_OPENAI_RESOURCE_GROUP_LOCATION <location>. Currently only a short list of locations is accepted. That location list is based on the OpenAI model availability table and may become outdated as availability changes.

The deployment process will take a few minutes. Once it's done, you'll see the URL of the web app in the terminal.

Screenshot of the azd up command result

You can now open the web app in your browser and start chatting with the bot.

Enhance security

When deploying the sample in an enterprise context, you may want to enforce tighter security restrictions to protect your data and resources. See the enhance security guide for more information.

Enable CI/CD

If you want to enable Continuous Deployment for your forked repository, you need to configure the Azure pipeline first:

  1. Open a terminal at the root of your forked project.
  2. Authenticate with Azure by running azd auth login.
  3. Run azd pipeline config to configure the required secrets and variables for connecting to Azure from GitHub Actions.
  4. This command will set up the necessary Azure service principal and configure GitHub repository secrets.
  5. Follow the prompts to complete the configuration.

Once configured, the GitHub Actions workflow will automatically deploy your application to Azure whenever you push changes to the main branch.

Clean up

To clean up all the Azure resources created by this sample:

  1. Run azd down --purge
  2. When asked if you are sure you want to continue, enter y

The resource group and all the resources will be deleted.

Run the sample locally with Ollama

If you have a machine with enough resources, you can run this sample entirely locally without using any cloud resources. To do that, you first have to install Ollama and then run the following commands to download the models on your machine:

ollama pull llama3.1:latest
ollama pull nomic-embed-text:latest

[!NOTE] The llama3.1 model with download a few gigabytes of data, so it can take some time depending on your internet connection.

After that you have to install the NPM dependencies:

npm install

Then you can start the application by running the following command which will start the web app and the API locally:

npm start

Then, open a new terminal running concurrently and run the following command to upload the PDF documents from the /data folder to the API:

npm run upload:docs

This only has to be done once, unless you want to add more documents.

You can now open the URL http://localhost:8000 in your browser to start chatting with the bot.

[!NOTE] While local models usually works well enough to answer the questions, sometimes they may not be able to follow perfectly the advanced formatting instructions for the citations and follow-up questions. This is expected, and a limitation of using smaller local mode

Extension points exported contracts — how you extend this code

HTMLElementTagNameMap (Interface)
(no doc)
packages/webapp/src/components/history.ts
HTMLElementTagNameMap (Interface)
(no doc)
packages/webapp/src/components/chat.ts

Core symbols most depended-on inside this repo

getCredentials
called by 7
packages/api/src/security.ts
badRequest
called by 5
packages/api/src/http-response.ts
ok
called by 4
packages/api/src/http-response.ts
onSendClicked
called by 4
packages/webapp/src/components/chat.ts
getUserId
called by 3
packages/api/src/security.ts
notFound
called by 3
packages/api/src/http-response.ts
getAzureOpenAiTokenProvider
called by 2
packages/api/src/security.ts
serviceUnavailable
called by 2
packages/api/src/http-response.ts

Shape

Function 22
Method 15
Class 4
Interface 2

Languages

TypeScript100%

Modules by API surface

packages/webapp/src/components/chat.ts12 symbols
packages/webapp/src/components/history.ts10 symbols
packages/api/src/http-response.ts5 symbols
packages/api/src/security.ts3 symbols
packages/webapp/src/api.ts2 symbols
packages/api/src/functions/documents-post.ts2 symbols
packages/api/src/functions/documents-get.ts2 symbols
packages/api/src/functions/chats-post.ts2 symbols
scripts/upload-documents.js1 symbols
packages/webapp/vite.config.ts1 symbols
packages/webapp/src/message-parser.ts1 symbols
packages/api/src/functions/chats-get.ts1 symbols

For agents

$ claude mcp add serverless-chat-langchainjs \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact