|
| 1 | +# Contoso Bike Store AI Assistant |
| 2 | + |
| 3 | +An end-to-end sample that uses Microsoft Agent Framework to demonstrate how to build Human In the loop (HITL) AI assistant. |
| 4 | +The agent uses GitHub Models for inference and exposes an AG-UI endpoint. The frontend integrates via CopilotKit to provide a chat experience for Contoso Bike Store. |
| 5 | + |
| 6 | +## Tech Stack |
| 7 | + |
| 8 | +- Backend: .NET (ASP.NET Core), Microsoft Agent Framework, AG-UI, `OpenAIClient` (GitHub Models) |
| 9 | +- Frontend: Next.js (App Router), TypeScript |
| 10 | +- Tools: Product inventory tools + a payment approval tool (server function with approval) |
| 11 | + |
| 12 | +## Prerequisites |
| 13 | + |
| 14 | +- .NET 9/10 SDK (match your local environment) |
| 15 | +- Node.js 20+ and npm |
| 16 | +- GitHub account and Personal Access Token (PAT) for GitHub Models access |
| 17 | + |
| 18 | +## GitHub Models Setup |
| 19 | + |
| 20 | +1. Create a GitHub Personal Access Token: |
| 21 | + - Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic) |
| 22 | + - Generate a new token; no special scopes are required for models |
| 23 | + - Copy the token value |
| 24 | + |
| 25 | +2. Set environment variables (choose your shell): |
| 26 | + |
| 27 | + Windows (PowerShell): |
| 28 | + ```powershell |
| 29 | + $env:GITHUB_TOKEN="<your_github_token>" |
| 30 | + $env:GITHUB_MODEL_ID="gpt-4o" # optional, defaults to gpt-4o |
| 31 | + $env:GITHUB_MODELS_BASE_URL="https://models.inference.ai.azure.com" # optional |
| 32 | + ``` |
| 33 | + |
| 34 | + Windows (Command Prompt): |
| 35 | + ```cmd |
| 36 | + set GITHUB_TOKEN=<your_github_token> |
| 37 | + set GITHUB_MODEL_ID=gpt-4o |
| 38 | + set GITHUB_MODELS_BASE_URL=https://models.inference.ai.azure.com |
| 39 | + ``` |
| 40 | + |
| 41 | + macOS/Linux: |
| 42 | + ```bash |
| 43 | + export GITHUB_TOKEN="<your_github_token>" |
| 44 | + export GITHUB_MODEL_ID="gpt-4o" |
| 45 | + export GITHUB_MODELS_BASE_URL="https://models.inference.ai.azure.com" |
| 46 | + ``` |
| 47 | + |
| 48 | +You can also use the command `dotnet user-secrets` to set the `GITHUB_TOKEN` for the backend project. |
| 49 | + |
| 50 | +## How to Run |
| 51 | + |
| 52 | +1. Clone and open the repo |
| 53 | + ```bash |
| 54 | + git clone <this-repository-url> |
| 55 | + cd maf-apporval-workflow |
| 56 | + ``` |
| 57 | + |
| 58 | +2. Start the backend (agent host) |
| 59 | + ```bash |
| 60 | + cd src/backend/ContosoBikestore.Agent.Host |
| 61 | + dotnet restore |
| 62 | + dotnet run |
| 63 | + ``` |
| 64 | + - Agent Dev UI: http://localhost:5001/devui |
| 65 | + - AG-UI endpoint: http://localhost:5001/agent/customer_service_assistant |
| 66 | + |
| 67 | +3. Start the frontend (Next.js) |
| 68 | + ```bash |
| 69 | + cd src/frontend |
| 70 | + npm install |
| 71 | + # optional: echo backend base URL to .env.local |
| 72 | + # Windows PowerShell |
| 73 | + "$env:BACKEND_AGENT_BASE_URL=http://localhost:5001" | Out-File -Encoding utf8 .env.local |
| 74 | + # macOS/Linux |
| 75 | + # echo "BACKEND_AGENT_BASE_URL=http://localhost:5001" > .env.local |
| 76 | + npm run dev |
| 77 | + ``` |
| 78 | + - App: http://localhost:3000 |
| 79 | + |
| 80 | +## Resources |
| 81 | + |
| 82 | +- Microsoft Agent Framework Documentation: https://learn.microsoft.com/en-us/agent-framework/overview/agent-framework-overview |
| 83 | +- CopilotKit: https://www.copilotkit.ai/ |
| 84 | +- GitHub Models: https://docs.github.com/en/github-models |
0 commit comments