LEARNING AZURE / BUILD WITH AI
No account neededAbout
Power up with AI / Lesson 7
Power up with AI / 45–60 min

Add AI through a protected backend

Design a request-summary feature using an Azure OpenAI deployment. Keep the model call behind a backend and learn why a browser should not hold your service credentials.

What you’ll be able to do

  • Separate browser UI from privileged model access.
  • Use the Responses API with a deployment name.
  • Define privacy, validation, and abuse controls before publishing.
Before you beginAn Azure OpenAI resource with a supported deployed model and appropriate access, a server environment, and Node.js. Model availability, quotas, and prices vary. The supplied script is a local backend experiment; it is not a publicly deployable API.

Get the idea

A narrow AI task is easier to verify

Summarizing a fictional support request is more reviewable than an unrestricted autonomous agent. Define a concise output format and prohibit invented facts. Even with clear instructions, inspect the model output.

Credentials belong on the server

A browser bundle is visible to visitors. Keep API keys in server-side environment settings, or use managed identity where supported. Your backend must authenticate and authorize callers rather than trusting a hidden button.

Bound input and usage

Limit input length, output length, and request frequency. Get permission before sending real organizational data to a model. Plan for timeouts, invalid requests, model errors, and output that does not match your expected format.

Try it yourself

  1. Download the backend example. Read it before running it: it validates input length, calls a configured deployment, and writes the generated summary to your local terminal.
  2. Configure AZURE_OPENAI_BASE_URL, AZURE_OPENAI_DEPLOYMENT, and AZURE_OPENAI_API_KEY in your local server environment. Do not paste secrets into the browser, repository, or a prompt.
  3. Install the openai SDK in your own sample project, save the example as summarize.mjs, and run it with a short fictional request. Model use may incur charges.
  4. Test empty input and oversized input. Confirm validation rejects them before a model call. Test a fictional request asking the model to ignore the summary instruction and inspect the result critically.
  5. Before exposing this as a web endpoint, add verified user authorization, usage limits, monitoring, safe error handling, and a privacy review. Use an Azure Functions HTTP trigger or other suitable backend; the provided local script alone does not supply these controls.

Example · commands or prompt

# In your own backend sample project:
npm install openai
# Set the three Azure environment values securely, then:
node summarize.mjs "Fictional request: laptop cannot connect to guest Wi-Fi."
Download the example
Check your resultA bounded fictional request produces a readable summary through a server-side model call, and you can identify the controls still required for a public API.

Finish the lab

Remove or securely unset sample credentials after testing. Delete unused model deployments and sample resources as appropriate. Do not record secrets or real ticket content in logs.

Quick knowledge check

Can a minified JavaScript bundle safely hide an Azure OpenAI API key?

Reveal the explanation

No. Visitors can inspect browser-delivered code and requests. Place privileged model access behind an authorized server endpoint.

Take this with you

Build fast at the interface; be deliberate at the trust boundary.

Go deeper

AI-assisted lesson · Reference links checked October 3, 2026. Exercises are teaching examples; they have not been executed against your Azure subscription.