Share via

DeepSeek-R1 JavaScript starter

Browse code

This sample shows how to deploy a secure Azure AI Services infrastructure with DeepSeek-R1 model, along with reusable components to build a web UI with authentication. It provides a starting point for building secure AI chat applications, using RBAC permissions and Azure AI Inference SDK with keyless (Entra) authentication. The backend resources are secured within an Azure Virtual Network, and the frontend is hosted on Azure Static Web Apps.

Note

The DeepSeek-R1 model focus is on complex reasoning tasks, and it is not designed for general conversation. It is best suited for tasks that require a deep understanding of the context and a complex reasoning process to provide an answer. This also means that you may experience longer response times compared to other models, because it simulates a though process (englobed under the <think> tag) before providing an actual answer.

Animation showing the chat app in action

Overview

Building AI applications can be complex and time-consuming, but using accelerator components with Azure allows to greatly simplify the process. This template provides a starting point for building a secure UI with Azure AI Services, using a keyless authentication mechanism and a virtual network to secure the backend resources. It also demonstrates how to set up user authentication and authorization with configurable providers with Azure Static Web Apps Easy Auth.

Application architecture

This application is made from multiple components:

  • Reusable and customizable web components built with Lit handling user authentication and providing an AI chat UI. The code is located in the packages/ai-chat-components folder.

  • Example web app integrations of the web components, hosted on Azure Static Web Apps. There are example using static HTML, React, Angular, Vue and Svelte.

  • A serverless API built with Azure Functions and using Azure AI Inference SDK to generate responses to the user chat queries. The code is located in the packages/api folder.

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

Prerequisites

  • 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 account. If you're new to Azure, get an Azure account for free to get free Azure credits to get started. If you're a student, you can also get free credits with Azure for Students.
  • Azure account permissions:
    • Your Azure account must have Microsoft.Authorization/roleAssignments/write permissions, such as Role Based Access Control Administrator, User Access Administrator, or Owner. If you don't have subscription-level permissions, you must be granted RBAC for an existing resource group and deploy to that existing group by running these commands: 
      azd env set AZURE_RESOURCE_GROUP <name of existing resource group>
azd env set AZURE_LOCATION <location of existing resource group>
    • Your Azure account also needs Microsoft.Resources/deployments/write permissions on the subscription level.

Setup the sample

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

  1. Fork the project to create your own copy of this repository.
  2. On your forked repository, select the Code button, then the Codespaces tab, and clink on the button Create codespace on main. Screenshot showing how to create a new codespace
  3. Wait for the Codespace to be created, it should take a few minutes.

Deploy on Azure

  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.
    • You will be prompted to select a base location for the resources. If you're unsure of which location to choose, select eastus2.
    • By default, the AI Services resource will be deployed to eastus2. You can set a different location with azd env set AZURE_AI_SERVICES_LOCATION <location>.

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.

Key learnings

To use Azure AI Services in your application, you can use the Azure AI Inference SDK or the OpenAI SDK.

Both of these SDKs supports Managed Identity authentication, which allows you to authenticate without using any secrets. This is a great way to secure your application and avoid hardcoding secrets in your code.

Using Azure AI Inference SDK

import { DefaultAzureCredential } from '@azure/identity';
import ModelClient, { isUnexpected } from '@azure-rest/ai-inference';

const credentialScopes = {
  credentials: { scopes: ['https://cognitiveservices.azure.com/.default'] }
};
const endpoint = 'https://<YOUR_INSTANCE_NAME>.services.ai.azure.com/models';

// Use the current user identity to authenticate.
// No secrets needed, it uses `az login` or `azd auth login` locally,
// and managed identity when deployed on Azure.
const credentials = new DefaultAzureCredential();
const client = ModelClient(endpoint, credentials, credentialScopes);

const response = await client.path('/chat/completions').post({
  body: {
    messages: [{ role: 'user', content: 'Say hello' }],
    model: 'DeepSeek-R1',
  },
});

console.log(response.body.choices[0].message.content);

Using OpenAI SDK

Note: Currently, only the v5 beta version of the OpenAI SDK supports managed identity authentication with Azure AI Service. You can install it using the following command: npm install openai@beta.

import { DefaultAzureCredential, getBearerTokenProvider } from '@azure/identity';
import OpenAI from 'openai';

const scope = 'https://cognitiveservices.azure.com/.default';
const endpoint = 'https://<YOUR_INSTANCE_NAME>.services.ai.azure.com/models';

// Use the current user identity to authenticate.
// No secrets needed, it uses `az login` or `azd auth login` locally,
// and managed identity when deployed on Azure.
const credentials = new DefaultAzureCredential();
const azureADTokenProvider = getBearerTokenProvider(credentials, scope);
const client = new OpenAI({
  baseURL: endpoint,
  fetch: async (url, init = {}) => {
    const token = await azureADTokenProvider();
    const headers = new Headers(init.headers);
    headers.set('Authorization', `Bearer ${token}`);
    return fetch(url, { ...init, headers });
  },
  defaultQuery: { 'api-version': '2024-05-01-preview' },
  apiKey: '_not_used_',
});

const response = await client.chat.completions.create({
  messages: [{ role: 'user', content: 'Say hello' }],
  model: 'DeepSeek-R1',
});

console.log(response.choices[0].message.content);

Parsing DeepSeek-R1 responses

The DeepSeek-R1 model generates responses in a specific format. The response contains a <think> tag that the model uses for its reasoning, and the final answer is provided after the </think> tag. You can use the following code to extract the reasoning and the final answer from the response:

const [thoughts, content] = message.content
  .match(/<think>(.*?)<\/think>(.*)/s)?
  .slice(1) ?? [];

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.

Troubleshooting

If you have any issue when running or deploying this sample, please check the troubleshooting guide. If you can't find a solution to your problem, please open an issue in this repository.

Security

This sample has Managed Identity built in to eliminate the need for developers to manage these credentials. Applications can use managed identities to obtain Microsoft Entra tokens without having to handle any secrets in the code. Additionally, we're using Microsoft Security DevOps GitHub Action to scan the infrastructure-as-code files and generates a report containing any detected issues.

You can Learn more about using Managed Identity with Azure OpenAI in this tutorial.

Next steps

Here are some resources to learn more about the technologies used in this sample:

You can also find more Azure AI samples here.