Angular Material + FastAPI Multi-Agent App CLAUDE.md Template

Overview

Direct answer: This CLAUDE.md template provides a ready-to-paste Claude Code starter for an Angular Material frontend and FastAPI backend that coordinate multiple agents. It enforces a stack-specific structure, security, and testing practices so developers can bootstrap a scalable multi-agent app with Claude Code guidance.

This page is a copyable CLAUDE.md template page for the Angular Material + FastAPI stack. It supplies concrete constraints, file layout, and Claude Code rules that translate directly into starter projects and starter documentation.

When to Use This CLAUDE.md Template

• Starting a new Angular Material UI paired with a FastAPI backend that orchestrates multiple AI agents.
• Documenting architecture and coding conventions for a multi-agent workflow.
• Providing a paste-ready Claude Code block to enforce project structure and rules across teams.
• Ensuring security, validation, and testing practices are baked into the starter scaffold.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role
- You are Claude Code, a helper for Angular Material + FastAPI multi-agent app starters. You produce precise rules, directory structures, and code templates for frontend and backend agents and orchestrators.

Architecture rules
- Use a mono-repo with a distinct frontend and backend folder, plus an agents folder for orchestration logic.
- Frontend communicates with backend via RESTful OpenAPI endpoints; backend exposes a single gateway for agent coordination.
- Agents run as isolated components with well-defined input/output contracts.
- Separate concerns: UI, API, and agent orchestration must not be tightly coupled.

File structure rules
- Do not create irrelevant folders; include only frontend, backend, and agents under a single repo. Example structure:
  frontend/
    src/
      app/
        components/
        services/
      index.html
      main.ts
    angular.json
  backend/
    app/
      main.py
      api/
      models/
      schemas/
      services/
      agents/
    requirements.txt
    Dockerfile
  agents/
    orchestrator/
    agent-a/
  infra/
    docker-compose.yml

Authentication rules
- Use OAuth2 Password or Authorization Code with PKCE for the frontend; FastAPI should implement OAuth2 and JWT tokens.
- Never embed plaintext secrets in code or CLAUDE.md template outputs. Use environment variables in deployment.

Database rules
- Use PostgreSQL; use SQLAlchemy or FastAPI-compatible ORM; apply Alembic migrations.
- Do not store secrets in the database; encrypt sensitive fields if needed.

Validation rules
- Use Pydantic models in FastAPI for request/response validation.
- Validate all inputs at the boundary; fail fast with meaningful errors.

Security rules
- Enable CORS for the frontend origin only.
- Enforce TLS in production; do not serve over plain HTTP.
- Validate tokens on every protected endpoint; implement proper auth scopes for agents.

Testing rules
- Backend: unit tests for services and models; API integration tests with the TestClient.
- Frontend: unit tests for components/services; end-to-end tests with Cypress if used.
- Run tests in CI on push to main or PRs.

Deployment rules
- Use Docker Compose for local dev; include services for frontend, backend, and a Postgres container.
- For production, prepare Kubernetes manifests or a robust deployment pipeline.
- Do not deploy without secret management and proper config maps.

Things Claude must not do
- Do not hardcode secrets or credentials.
- Do not bypass authentication checks.
- Do not introduce unapproved dependencies or libraries.
- Do not assume network access to internal services beyond the defined architecture.

Recommended Project Structure

frontend/
  angular.json
  package.json
  src/
    main.ts
    index.html
    app/
      app.module.ts
      components/
      services/
backend/
  app/
    main.py
    api/
      v1/
    models/
      __init__.py
    schemas/
    services/
  requirements.txt
  Dockerfile
agents/
  orchestrator/
    __init__.py
    orchestrator.py
  agent-a/
    __init__.py
    agent.py
infra/
  docker-compose.yml
  k8s/
    deployment.yaml
README.md

Core Engineering Principles

• Clear separation of frontend UI, backend API, and agent orchestration logic
• Single source of truth for data shapes and access patterns
• Idempotent operations and deterministic agent coordination
• Explicit contracts via OpenAPI for backend and inter-agent communication
• Test-driven stance with guardrails for architecture drift

Code Construction Rules

• Frontend TypeScript should use Angular Material components with well-typed services
• Backend FastAPI endpoints must include explicit Pydantic models for inputs and outputs
• Agent orchestration should expose stable interfaces; avoid tight coupling to specific agents
• Environment variables used for config; never rely on hardcoded values
• Code should be modular; avoid large monoliths; favor small composable services
• All data transfer objects must be validated at entry points
• Use OpenAPI generated client/model stubs for inter-service communication
• Do not rely on non-approved libraries or insecure dependencies

Security and Production Rules

• Enable TLS, use secure cookies, and restrict CORS origins to the frontend domain
• Implement robust auth with JWTs and token refresh; validate scopes for each endpoint
• Encrypt or hash sensitive database fields where appropriate
• Limit request rates per endpoint to prevent abuse; monitor with simple logs and metrics
• Do not log sensitive payloads; redact secrets in logs

Testing Checklist

• Unit tests for backend services and Pydantic models
• API integration tests covering agent interaction flows
• Frontend component and service tests; ensure Angular Material components render correctly
• End-to-end tests for agent orchestration path
• CI checks for lint, type checks, and security scanners

Common Mistakes to Avoid

• Mixing frontend and backend logic in the same module; keep concerns separated
• Hardcoding secrets or credentials in code or CLAUDE.md outputs
• Over-privileging agents or endpoints; apply least privilege
• Relying on deprecated dependencies or insecure configurations

FAQ

What is this CLAUDE.md Template used for

A copyable starter for an Angular Material + FastAPI multi-agent app that Claude Code can populate and enforce.

Can I adapt this template to other stacks

Yes, but update the architecture rules, file structure, and dependencies to match the new stack.

How do I run the starter locally

Follow the recommended project structure, install dependencies in frontend and backend, start backend, then start frontend.

What security practices are required

Use TLS, OAuth2/JWT, restricted CORS, token validation, and avoid embedding secrets in code.

What should Claude avoid in this template

Do not introduce unapproved libraries, hardcode secrets, or bypass authentication and input validation.

Notes: This page uses the exact phrase CLAUDE.md template in the copyable block and throughout the page to align with search expectations for CLAUDE.md Template pages.