Initial Commit for the Azure Cloud AI Visualizer

Author: error505

.github/workflows/ci-cd.yml

@@ -0,0 +1,53 @@
+name: CI/CD - Build and Push
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    env:
+      FRONTEND_IMAGE: ${{ github.repository }}-frontend
+      BACKEND_IMAGE: ${{ github.repository }}-backend
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ secrets.REGISTRY_HOST }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and push backend image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: Dockerfile.backend
+          push: true
+          tags: |
+            ${{ secrets.REGISTRY_HOST }}/${{ env.BACKEND_IMAGE }}:latest
+
+      - name: Build and push frontend image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: Dockerfile.frontend
+          push: true
+          tags: |
+            ${{ secrets.REGISTRY_HOST }}/${{ env.FRONTEND_IMAGE }}:latest
+
+      - name: Image summary
+        run: |
+          echo "Frontend image: ${{ secrets.REGISTRY_HOST }}/${{ env.FRONTEND_IMAGE }}:latest"
+          echo "Backend image: ${{ secrets.REGISTRY_HOST }}/${{ env.BACKEND_IMAGE }}:latest"

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

CODE_OF_CONDUCT.md

@@ -0,0 +1,16 @@
+# Contributor Covenant Code of Conduct
+
+This project adheres to the Contributor Covenant v2.1. By participating, you are expected to uphold this code.
+
+Standards
+- Be respectful and considerate in all communications.
+- Avoid discriminatory or harassing behavior.
+- Encourage a welcoming environment for contributors from all backgrounds.
+
+Reporting
+- If you witness or are subject to unacceptable behavior, please open an issue flagged `security` or contact the maintainers privately.
+
+Consequences
+- Maintainers may remove content or ban contributors who violate the code of conduct.
+
+For the full text of the Contributor Covenant, see: https://www.contributor-covenant.org/version/2/1/code_of_conduct/

CONTRIBUTING.md

@@ -0,0 +1,57 @@
+# Contributing to Cloud Visualizer Pro
+
+Welcome — thank you for considering contributing to Cloud Visualizer Pro. We appreciate every contribution, big or small.
+
+This document explains the preferred workflow, coding standards, and how to run tests locally so your PRs are easy to review and merge.
+
+Getting started
+- Fork the repository and create a feature branch from `main` using a descriptive name, e.g. `feat/diagram-node-labels` or `fix/backend-logging`.
+- Keep changes small and focused. One change per PR makes review straightforward.
+
+Development workflow
+- Create an issue for larger features or any bug you plan to work on and link your PR to the issue.
+- Branch naming: `feat/*`, `fix/*`, `chore/*`, `docs/*`, `test/*`.
+- Commit messages: use conventional style, e.g. `feat(iac): add bicep parameter generation`.
+
+Local development
+- Frontend (Vite):
+  ```powershell
+  cd <repo-root>
+  pnpm install
+  pnpm run dev
+  ```
+
+- Backend (FastAPI):
+  ```powershell
+  cd backend
+  python -m venv .venv
+  .\.venv\Scripts\Activate.ps1
+  python -m pip install --upgrade pip
+  python -m pip install -r requirements.txt
+  .\.venv\Scripts\python.exe -m uvicorn main:app --reload --port 8000
+  ```
+
+Testing
+- Add unit tests for new backend logic using pytest and for frontend components using your preferred test runner.
+- Run backend tests:
+  ```powershell
+  cd backend
+  .\.venv\Scripts\Activate.ps1
+  pytest -q
+  ```
+
+Code style
+- Keep TypeScript/React code consistent with project linters and formatters (Prettier / ESLint if configured).
+- Keep Python code formatted with Black / ruff where applicable.
+
+Pull requests
+- Open a pull request against `main` and include:
+  - A short description of the change
+  - Screenshots if the change affects UI
+  - Any migration or environment changes required
+- Link the PR to an issue when possible and add reviewers.
+
+Security disclosures
+- If you discover a security issue, please avoid public disclosure and open a private issue or contact the maintainers directly.
+
+Thanks again for helping improve the project — your contributions make it better!

Dockerfile.backend

@@ -0,0 +1,29 @@
+# Backend Dockerfile for Azure Architect Backend (FastAPI)
+# Uses Python 3.11 slim as base
+FROM python:3.11-slim
+
+# Ensure pip is upgraded
+RUN python -m pip install --upgrade pip
+
+# Create app directory
+WORKDIR /app
+
+# Install system deps required for some packages
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    gcc \
+    libpq-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the backend into the image
+COPY backend /app
+
+# Install the Python package (will read pyproject.toml and install dependencies)
+RUN pip install --no-cache-dir .
+
+# Expose port
+EXPOSE 8000
+
+# Entrypoint
+ENV PYTHONUNBUFFERED=1
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

Dockerfile.frontend

@@ -0,0 +1,16 @@
+# Frontend Dockerfile for Vite React app
+# Build stage
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json* pnpm-lock.yaml* bun.lockb* ./
+# Install deps (use npm by default)
+RUN if [ -f pnpm-lock.yaml ]; then npm i -g pnpm && pnpm install; elif [ -f package-lock.json ]; then npm ci; else npm i; fi
+COPY . .
+RUN npm run build --if-present
+
+# Production stage: serve with nginx
+FROM nginx:stable-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+# Optional: copy custom nginx config
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 CortexGrid.ch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,131 @@
+# Cloud Visualizer Pro
+![alt text](image.png)
+Cloud Visualizer Pro is an open-source web application for visually designing Azure architecture diagrams, generating grounded Infrastructure-as-Code (IaC) (Bicep and Terraform), and orchestrating deployments. It combines a React/TypeScript frontend with a FastAPI backend and integrates the Microsoft Agent Framework (MAF) and Model Context Protocol (MCP) to ground LLM-driven IaC generation in official documentation.
+
+This repository is MIT licensed and contribution-friendly — contributions via pull requests and issue/task tracking are welcome.
+
+## License
+
+This project is released under the MIT License. See the `LICENSE` file for details.
+
+## Roadmap & Contributions
+
+- Contributions: Please open a pull request against `main`. Small, focused PRs with tests or screenshots are preferred.
+- Tasks / Issues: Use the project's issue tracker for bugs, feature requests, or development tasks. Label and link PRs to issue numbers where applicable.
+- Code of Conduct: Be respectful and follow standard open-source community practices.
+
+## High-level Architecture
+
+- Frontend: React + TypeScript (Vite) — located in `src/`
+  - Uses modern UI primitives and a palette of Azure service icons.
+  - Key components: diagram canvas, service palette, inspector panel, top bar, deploy modal.
+- Backend: FastAPI (Python) — located in `backend/app/`
+  - Provides REST API endpoints for project storage, IaC generation, MCP integration, and deployments.
+  - Uses Pydantic Settings for configuration and integrates Azure storage clients optionally.
+- Agent & MCP integration:
+  - Microsoft Agent Framework (agent-framework, agent-framework-azure-ai) is used to run LLM-driven agents.
+  - The app integrates external MCP servers (Microsoft Learn MCP and HashiCorp Terraform MCP) using a streamable MCP transport to ground model outputs in live documentation and provider schemas.
+
+## Key Features
+
+- Visual diagram editor for Azure architectures.
+- Grounded IaC generation:
+  - Bicep generation with optional MCP grounding via Microsoft Learn MCP.
+  - Terraform generation with optional HashiCorp Terraform MCP grounding.
+- IaC validation using MCP-backed schema checks.
+- Deploy orchestration pipeline (hooks for Azure SDK clients).
+- Offline/CI-friendly fallbacks: MockAgent/OpenAI fallback paths when MCP/MAF are unavailable.
+
+![alt text](image-1.png)
+
+## Quickstart (Development)
+
+Prerequisites
+- Node.js (for frontend / Vite)
+- Python 3.12+ and a virtual environment
+- Optional: Azure credentials if you plan to test deployments
+
+1) Frontend: install and run
+
+```powershell
+cd <repo-root>
+# install dependencies (uses pnpm, npm or yarn depending on your setup)
+pnpm install
+pnpm run dev
+```
+
+2) Backend: create venv and install Python deps
+
+```powershell
+cd backend
+python -m venv .venv
+.\.venv\Scripts\Activate.ps1
+python -m pip install --upgrade pip
+python -m pip install -r requirements.txt  # if present
+# If you don't have a requirements.txt, install typical deps listed in pyproject or pip freeze
+```
+
+3) Run backend (development)
+
+```powershell
+# from repo root
+# Ensure backend/.env contains your local overrides
+cd backend
+.\.venv\Scripts\Activate.ps1
+# Use uvicorn or the provided run tasks
+.\.venv\Scripts\python.exe -m uvicorn main:app --reload --port 8000
+```
+
+4) Open the frontend (Vite dev server) and it should proxy to the backend (see CORS settings in `backend/.env`).
+
+## Configuration
+
+Configuration uses a `.env` file at `backend/.env` loaded by Pydantic Settings.
+Important environment keys:
+
+- OPENAI_API_KEY / USE_OPENAI_FALLBACK — enable OpenAI fallback for development
+- AZURE_OPENAI_KEY / AZURE_AI_PROJECT_ENDPOINT — configure Azure AI Project / MAF
+- AZURE_MCP_BICEP_URL — Microsoft Learn MCP base endpoint (recommended: `https://learn.microsoft.com/api/mcp`)
+- TERRAFORM_MCP_URL — HashiCorp Terraform MCP endpoint (if available)
+- AZURE_MCP_BICEP_FORCE / TERRAFORM_MCP_FORCE — set to `true` to force initializing MCP tools (useful in dev/test)
+
+Notes about MCP
+- The MCP endpoints require a streamable HTTP transport (SSE/chunked) and are intended to be used only from compliant MCP clients (for example `MCPStreamableHTTPTool` from `agent-framework`). Manual browser access will often return `405 Method Not Allowed`.
+- Microsoft Learn MCP (`https://learn.microsoft.com/api/mcp`) exposes tools such as `microsoft_docs_search`, `microsoft_code_sample_search` and `microsoft_docs_fetch`. Use these via MCP tools passed to the agent.
+- HashiCorp's MCP endpoint may apply rate-limits or access constraints (you may receive `429 Too Many Requests`). If you need a stable Terraform MCP integration consider contacting HashiCorp or using a local/proxied MCP registry.
+
+## How MCP is used in this project
+- The backend creates a streamable MCP tool singleton (`app.deps.get_mcp_bicep_tool` and `get_mcp_terraform_tool`) which opens a long-lived MCP session to the configured server.
+- The agent passes that tool into `chat_agent.run(prompt, tools=mcp_tool)` so the LLM can invoke tool calls and sample documentation content during generation.
+- The code contains safe fallbacks: if MCP initialization fails, the system logs the reasons and falls back to AI-only generation (or MockAgent for tests).
+
+## Development notes and troubleshooting
+
+- If you see an ImportError related to `prepare_function_call_results`, update/install `agent-framework` and `agent-framework-azure-ai` to compatible versions. The project includes a small compatibility shim to help in mixed-version dev environments.
+- If MCP initialization fails with `Session terminated` or stalls, verify:
+  - `AZURE_MCP_BICEP_URL` is the base MCP endpoint (e.g. `https://learn.microsoft.com/api/mcp`)
+  - Your network/proxy doesn't block chunked streaming HTTP or SSE
+  - HashiCorp MCP may return `429` when rate-limited; try again later or request access
+
+## Testing
+
+- Backend unit/integration tests are located under `backend/` and use pytest/pytest-asyncio.
+- There is a small test harness `backend/test_terraform_mcp.py` that exercises the Terraform generator and demonstrates MockAgent fallback behavior when MCP is unavailable.
+
+## Security & Secrets
+
+- Never commit secrets (API keys, connection strings) to the repository. Put secrets in `backend/.env` (not checked in) or in a secure secret manager.
+- When deploying, use managed identities or secure vaults instead of environment variables for production credentials.
+
+## License & Contribution
+
+- MIT License. You may fork and open PRs.
+- Please follow the contribution notes above and include tests for new features.
+
+## Contact / Maintainers
+
+If you have questions or need help reproducing issues, open an issue describing the problem and include logs from the backend (set `LOG_LEVEL=DEBUG` in `.env` to get detailed MCP handshake logs).
+
+---
+
+Happy building! If you want, I can also add a `CONTRIBUTING.md`, a `CODE_OF_CONDUCT.md`, and a minimal `requirements.txt` extracted from the venv freeze. Let me know which of these you'd like next.