Skip to content

Latest commit

 

History

History
104 lines (77 loc) · 3.38 KB

File metadata and controls

104 lines (77 loc) · 3.38 KB

Chat Building Block

Add Azure OpenAI chat completions to your existing Python FastAPI app. Run one script, deploy with azd up.

What It Does

This building block adds a fully working AI chat endpoint to an existing app:

  • Azure OpenAI provisioned via Bicep (gpt-4o-mini, 10K TPM)
  • Managed identity (keyless auth) -- no API keys to manage
  • Drop-in ChatClient for Python with streaming support
  • /chat API endpoint added to your FastAPI app
  • Chat UI widget with floating button and chat panel

Quick Start

Prerequisites

Two Commands

# 1. From your project root, run the script
c:\path\to\chat-building-block\add-chat.ps1

# 2. Deploy
azd up

That's it. Your app now has a /chat endpoint powered by Azure OpenAI.

What the Script Does

The add-chat.ps1 script makes 9 changes to your project:

Step File Change
1 infra/chat.bicep Copies in the Azure OpenAI Bicep module
2 infra/main.bicep Adds the chat module, RBAC, and outputs
3 infra/app-chat-role.bicep Creates managed identity role assignment
4 chat_client.py Copies the drop-in Azure OpenAI client
5 requirements.txt Adds openai and azure-identity
6 main.py Adds ChatClient init and /chat endpoint
7 azure.yaml Wires environment variables from azd outputs
8 static/chat.css, static/chat.js Copies chat UI assets
9 templates/base.html Injects floating chat widget

The script is idempotent -- running it again skips already-applied changes.

Usage Options

# Run from your project root (default -- uses the repo's own files)
c:\Users\hahuber\code\chat-building-block\add-chat.ps1

# Or specify a custom block source
.\add-chat.ps1 -BlockSource C:\path\to\chat-building-block

Repo Structure

chat-building-block/
  add-chat.ps1              # Automation script
  block.yaml                # Block manifest
  code/python/
    chat_client.py           # Drop-in Azure OpenAI client
    requirements.txt         # Python dependencies
  code/ui/
    chat-widget.html         # Floating chat widget HTML snippet
    chat.css                 # Chat widget styles
    chat.js                  # Chat widget client-side logic
  infra/
    chat.bicep               # Azure OpenAI infrastructure
    chat.parameters.json     # Bicep parameters
  hooks/
    postprovision.ps1        # Post-provision hook (Windows)
    postprovision.sh         # Post-provision hook (Linux/Mac)
  docs/
    integration-guide.md     # Detailed manual integration guide
  tests/python/
    test_chat_client.py      # Unit tests for ChatClient

Testing the Chat Endpoint

After deploying with azd up:

POST /chat
Content-Type: application/json

{"message": "Hello, how can you help me?"}

Look for the chat button in the bottom-right corner of your app.

Detailed Guide

For a step-by-step manual walkthrough (without the automation script), see docs/integration-guide.md.