Full-Stack AI Agent Chatbot

Problem

Inspecting cloud infrastructure means bouncing between siloed dashboards and consoles. There was no single conversational surface where a user could just ask about their Azure resources — and wiring an LLM to reliably call multiple backend tools (with secure cloud auth) is non-trivial.

Solution

A Next.js 14 frontend streams chat over the Vercel AI SDK to a GPT-4o agent configured with tool-calling. The agent decides whether to run a search tool or an Azure inventory tool; the inventory tool calls a FastAPI backend that authenticates to Azure with a ClientSecretCredential and returns live resource metadata. Frontend on Vercel, backend on Render, and a public live demo.

Impact

• →Replaces multi-step dashboard navigation with a single natural-language interface over live Azure inventory.
• →Deployed and publicly demoable end-to-end (Next.js on Vercel, FastAPI on Render).
• →Demonstrates a working agentic loop with streaming responses and inline tool-call visualization (which tool, what parameters, what result).
• →Shows full-stack range in one project — React/TypeScript UI, Python API, LLM tool orchestration, and secure cloud authentication.

Architecture

1. 01Next.js UI posts the conversation to an /api/chat route that calls the Vercel AI SDK's streamText() with GPT-4o and a tool set.
2. 02GPT-4o decides whether to call search or azure_inventory, bounded by maxSteps to prevent runaway loops.
3. 03The azure_inventory tool issues a request to the FastAPI backend with the target subscription ID.
4. 04FastAPI instantiates an Azure ClientSecretCredential (client/tenant/secret from env) and calls ResourceManagementClient to list resources.
5. 05Live resource metadata streams back to the client and renders inline with the tool-call trace.
6. 06Frontend deploys to Vercel; the containerized FastAPI backend deploys to Render.

Capabilities

• ·Streaming chat UI with real-time agent state (thinking, tool execution) and dark mode.
• ·azure_inventory tool — queries the Azure Resource Management API and returns resource name, type, location, and resource group for a subscription.
• ·search tool — accepts a natural-language query, wired for web-search integration.
• ·Inline tool-call visualization showing the invoked tool, its parameters, and its results.
• ·Multi-turn conversation with UI-persisted message history.
• ·Secure server-side Azure auth via ClientSecretCredential (client/tenant secrets never reach the browser).