|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: AI Assist Node.js Server in ASP.NET Core Spreadsheet | Syncfusion |
| 4 | +description: Learn how to set up and connect a Node.js + Express server for the AI Assist feature in the Syncfusion ASP.NET Core Spreadsheet component. |
| 5 | +platform: document-processing |
| 6 | +control: AI Assist Node.js Server Setup |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# AI Assist Node.js Server Setup in ASP.NET Core Spreadsheet |
| 11 | + |
| 12 | +AI Assist requires a backend service to process prompts and return AI-generated responses. This topic explains how to create a **Node.js** server with **Azure OpenAI** credentials. |
| 13 | + |
| 14 | +## Prerequisites |
| 15 | + |
| 16 | +Ensure the following are available before you begin. |
| 17 | + |
| 18 | +### Azure OpenAI credentials |
| 19 | + |
| 20 | +You must have an Azure OpenAI resource. Collect these values from the [Azure Portal](https://portal.azure.com): |
| 21 | + |
| 22 | +| Credential | Description | |
| 23 | +|---|---| |
| 24 | +| **API Key** | Azure OpenAI service key | |
| 25 | +| **Endpoint** | Base URL of your Azure OpenAI resource (e.g., `https://your-resource.openai.azure.com/`) | |
| 26 | +| **API Version** | REST API version (e.g., `2024-02-01`) | |
| 27 | +| **Deployment Name** | Model deployment name (e.g., `gpt-4o`) | |
| 28 | + |
| 29 | +These values correspond to the configuration used in the application: |
| 30 | + |
| 31 | +``` |
| 32 | +const azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; |
| 33 | +const azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; |
| 34 | +const azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; |
| 35 | +const azureDeploymentName = 'Your_Deployment_Name'; |
| 36 | +``` |
| 37 | + |
| 38 | +### Runtime environment |
| 39 | + |
| 40 | +* Node.js v18 or later |
| 41 | +* npm v9 or later |
| 42 | + |
| 43 | +## Install dependencies |
| 44 | + |
| 45 | +Run the following command in your server project: |
| 46 | + |
| 47 | +``` |
| 48 | +npm install express cors dotenv openai date-fns |
| 49 | +``` |
| 50 | + |
| 51 | +| Package | Purpose | |
| 52 | +|---|---| |
| 53 | +| `express` | HTTP server framework | |
| 54 | +| `cors` | Cross-Origin Resource Sharing middleware | |
| 55 | +| `dotenv` | Loads credentials from a `.env` file | |
| 56 | +| `openai` | Official Azure OpenAI client SDK | |
| 57 | +| `date-fns` | Date formatting for token-reset messages | |
| 58 | + |
| 59 | +Ensure your `package.json` includes `"type": "module"` to support ES module imports: |
| 60 | + |
| 61 | +```json |
| 62 | +{ |
| 63 | + "name": "service", |
| 64 | + "version": "1.0.0", |
| 65 | + "type": "module", |
| 66 | + "scripts": { |
| 67 | + "start": "node server.js" |
| 68 | + }, |
| 69 | + "dependencies": { |
| 70 | + "cors": "^2.8.5", |
| 71 | + "date-fns": "^4.1.0", |
| 72 | + "dotenv": "^16.4.5", |
| 73 | + "express": "^4.21.0", |
| 74 | + "openai": "4.50.0" |
| 75 | + } |
| 76 | +} |
| 77 | +``` |
| 78 | + |
| 79 | +## Configure credentials |
| 80 | + |
| 81 | +Create a `.env` file in the project root and add your Azure OpenAI credentials: |
| 82 | + |
| 83 | +```dotenv |
| 84 | +apiKey = Your_Azure_OpenAI_API_Key |
| 85 | +endpoint = https://your-resource.openai.azure.com/ |
| 86 | +deployment = Your_Deployment_Name |
| 87 | +apiVersion = Your_Azure_OpenAI_API_Version |
| 88 | +``` |
| 89 | + |
| 90 | +> **Important:** Add `.env` to `.gitignore` to prevent exposing secrets. |
| 91 | +
|
| 92 | +## Configure required modules |
| 93 | + |
| 94 | +Create `ai-model.js` to initialize the Azure OpenAI client using the credentials from `.env`: |
| 95 | + |
| 96 | +```javascript |
| 97 | +import { AzureOpenAI } from "openai"; |
| 98 | +import dotenv from 'dotenv'; |
| 99 | + |
| 100 | +dotenv.config(); |
| 101 | + |
| 102 | +const endpoint = process.env.endpoint; |
| 103 | +const apiKey = process.env.apiKey; |
| 104 | +const deployment = process.env.deployment; |
| 105 | +const apiVersion = process.env.apiVersion; |
| 106 | + |
| 107 | +const client = new AzureOpenAI({ |
| 108 | + endpoint, |
| 109 | + apiKey, |
| 110 | + apiVersion, |
| 111 | + deployment |
| 112 | +}); |
| 113 | + |
| 114 | +export async function getAzureChatAIRequest(options) { |
| 115 | + const result = await client.chat.completions.create({ |
| 116 | + messages: options.messages, |
| 117 | + model: "", |
| 118 | + top_p: options.topP, |
| 119 | + temperature: options.temperature, |
| 120 | + max_tokens: options.maxTokens, |
| 121 | + frequency_penalty: options.frequencyPenalty, |
| 122 | + presence_penalty: options.presencePenalty, |
| 123 | + stop: options.stopSequences |
| 124 | + }); |
| 125 | + return result; |
| 126 | +} |
| 127 | +``` |
| 128 | + |
| 129 | +Create `server.js` to expose the AI Assist API: |
| 130 | + |
| 131 | +```javascript |
| 132 | +import express from 'express'; |
| 133 | +import cors from 'cors'; |
| 134 | +import { getAzureChatAIRequest } from './ai-model.js'; |
| 135 | + |
| 136 | +const app = express(); |
| 137 | +const PORT = process.env.PORT || 3000; |
| 138 | + |
| 139 | +app.use(cors()); |
| 140 | +app.use(express.json()); |
| 141 | + |
| 142 | +app.post('/api/AIAssist/Chat', async (req, res) => { |
| 143 | + const { visitorId, ...chatData } = req.body; |
| 144 | + const responseText = await getAzureChatAIRequest(chatData); |
| 145 | + if (responseText) { |
| 146 | + return res.status(200).json({ |
| 147 | + response: responseText.choices[0].message.content |
| 148 | + }); |
| 149 | + } |
| 150 | + return res.status(500).json({ error: 'Failed to generate response' }); |
| 151 | +}); |
| 152 | + |
| 153 | +app.listen(PORT, () => { |
| 154 | + console.log(`Server is running on http://localhost:${PORT}`); |
| 155 | +}); |
| 156 | +``` |
| 157 | + |
| 158 | +## Run the server |
| 159 | + |
| 160 | +Run the following command to start the server: |
| 161 | + |
| 162 | +``` |
| 163 | +npm start |
| 164 | +``` |
| 165 | + |
| 166 | +The server runs on `http://localhost:3000`. Update the AI Assist endpoint like below: |
| 167 | + |
| 168 | +``` |
| 169 | +http://localhost:3000/api/AIAssist/Chat |
| 170 | +``` |
| 171 | + |
| 172 | +## Connect to the ASP.NET Core Spreadsheet |
| 173 | + |
| 174 | +Once the server is listening, configure the `requestUrl` inside [`aiAssistSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AiAssistSettings) to point to the server endpoint: |
| 175 | + |
| 176 | +{% tabs %} |
| 177 | +{% highlight cshtml tabtitle="CSHTML" %} |
| 178 | + |
| 179 | +```cshtml |
| 180 | +<ejs-spreadsheet id="spreadsheet" enableAIAssist="true" |
| 181 | + openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open" |
| 182 | + saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"> |
| 183 | + <e-spreadsheet-aiassistsettings requestUrl="http://localhost:3000/api/AIAssist/Chat"> |
| 184 | + </e-spreadsheet-aiassistsettings> |
| 185 | +</ejs-spreadsheet> |
| 186 | +``` |
| 187 | + |
| 188 | +{% endhighlight %} |
| 189 | +{% endtabs %} |
| 190 | + |
| 191 | +## Reference |
| 192 | + |
| 193 | +### Environment variables (`.env`) |
| 194 | + |
| 195 | +| Variable | Description | |
| 196 | +|---|---| |
| 197 | +| `apiKey` | Your Azure OpenAI API key | |
| 198 | +| `endpoint` | Your Azure OpenAI resource URL | |
| 199 | +| `deployment` | Your model deployment name | |
| 200 | +| `apiVersion` | Azure OpenAI REST API version | |
| 201 | + |
| 202 | +### Chat endpoint contract |
| 203 | + |
| 204 | +The server accepts a `POST` request with the following JSON body: |
| 205 | + |
| 206 | +```json |
| 207 | +{ |
| 208 | + "messages": [ |
| 209 | + { "role": "system", "content": "You are a spreadsheet assistant." }, |
| 210 | + { "role": "user", "content": "Make the header row bold." } |
| 211 | + ] |
| 212 | +} |
| 213 | +``` |
| 214 | + |
| 215 | +And returns: |
| 216 | + |
| 217 | +```json |
| 218 | +{ |
| 219 | + "ok": true, |
| 220 | + "response": "..." |
| 221 | +} |
| 222 | +``` |
| 223 | + |
| 224 | +## Sample |
| 225 | + |
| 226 | +A Node.js server sample project is available for quick setup. Extract the archive, update the Azure OpenAI credentials in the `.env` file, and start the server using the following command |
| 227 | + |
| 228 | +``` |
| 229 | +npm start |
| 230 | +``` |
| 231 | + |
| 232 | +[Download Node.js Server](https://drive.google.com/file/d/1V3TlO_6GS3dV986I7sDizmE9kwojkOrx/view?usp=drive_link) |
| 233 | + |
| 234 | +## See also |
| 235 | + |
| 236 | +* [Web API (.NET) server setup](./using-web-api) |
0 commit comments