ms-ai-architect/docs/playground-plan.md

Azure AI Architecture Playground

Target: Lagre denne planen i <plugin-root>/docs/playground-plan.md

---

Context

ai-frameworks/framework-comparison.html er en "grocery store" for open-source AI agent frameworks — 130+ features sortert i 8 kategorier, med handlekurv og eksport som Claude Code brief. Konseptet fungerer, men Azure AI-landskapet har et annet problem: brukere vet hva de vil oppna, men ikke hvilke tjenester som loser det.

Mal: Bygge et guidet arkitekturbeslutningsverktoy for Azure AI-plattformen, ved a bruke Playground-pluginen som generator og ms-ai-architect som kunnskapsbase. Prompt-outputen fra playground limes tilbake i Claude for a kjore /architect-kommandoer.

Arbeidskatalog: <plugin-root>/ (ms-ai-architect plugin-mappen)

---

Approach: Playground-generert HTML med 3 innganger

Inngang 1: Scenariovelger (hovedmodus for ikke-eksperter)

• Bruker velger et scenario fra 8-10 forhapsdefinerte: "RAG-chatbot for interne dokumenter", "Autonom agent for saksbehandling", "Dokumentklassifisering", "Multi-agent workflow", "Copilot-utvidelse for M365", etc.
• Handlekurv pre-fylles med anbefalte kapabiliteter
• Hvert pre-fylt item forklarer HVORFOR det trengs
• Bruker kan justere (fjerne, legge til, bytte alternativer)

Inngang 2: Constraint-filter (smalner valg)

• Sidebar med filtre: lisenstype (E3/E5/Azure), budsjett, dataresidens (Norway East?), compliance-krav (Schrems II, DPIA)
• Filtrene skjuler items som ikke er tilgjengelige/relevante
• Basert pa data fra licensing-matrix.md og decision-trees.md

Inngang 3: Frittsurfing (ekspertmodus)

• Browse alle kapabiliteter pa tvers av aisles, som originalen
• For arkitekter som allerede kjenner landskapet

Prompt output (noykkelen)

Genererer en strukturert prompt klar til a lime inn i Claude:

Jeg planlegger en [scenario] for [malgruppe].
Organisasjonen har [lisenstype] og krav om [compliance].
Budsjettramme: [estimat/maned].

Valgte kapabiliteter:
- [Aisle]: [Item 1] (fra [Azure-tjeneste])
- [Aisle]: [Item 2] (fra [Azure-tjeneste])
...

Kjor /architect:utredning med disse valgene som utgangspunkt.

---

Data model

Azure AI "brands" (tilsvarer frameworks i originalen)

1. M365 Copilot — out-of-box produktivitet
2. Copilot Studio — no-code/low-code agenter
3. Azure AI Foundry — pro-code AI-plattform
4. Azure OpenAI Service — direkte LLM-tilgang
5. Azure AI Search — RAG og sokeindeksering
6. Azure AI Services — Vision, Speech, Language, Document Intelligence
7. Semantic Kernel — orkestrerings-SDK
8. Power Platform AI — AI Builder, Power Automate AI
9. Microsoft Graph — data-tilgang og integrasjon

Aisles (kategorier)

1. LLM-tilgang — modellvalg, deployment, PTU vs PAYG
2. RAG & Sok — vektorindeks, hybrid search, grounding
3. Agent-orkestrering — multi-agent, tool use, autonomi
4. Identitet & Auth — Managed Identity, RBAC, Entra ID
5. Sikkerhet & Compliance — Content Safety, DLP, Schrems II, DPIA
6. Kanaler & UX — Teams, web, WhatsApp, Adaptive Cards
7. Data & Integrasjon — Graph, connectors, datakilder
8. Observability — logging, monitoring, evaluering, cost tracking

Item-metadata (utover originalen)

{
  "name": "Azure AI Search — Hybrid Vector+Keyword",
  "desc": "Kombinerer semantisk og keyword-sok for optimal RAG-recall",
  "sources": ["Azure AI Search"],
  "category": "RAG & Sok",
  "cost_tier": "medium",
  "license_req": "azure-payg",
  "compliance": {
    "norway_east": true,
    "schrems_ii": "ok",
    "dpia_required": false
  },
  "maturity": "GA",
  "scenarios": ["rag-chatbot", "document-search", "knowledge-base"]
}

---

Implementeringsplan

Steg 1: Opprett prosjektstruktur i ms-ai-architect

• Grunnstruktur: playground/, playground/data/, playground/docs/
• Legg til CLAUDE.md med prosjektbeskrivelse i playground/

Steg 2: Ekstraher strukturert data fra ms-ai-architect

• Parse decision-trees.md -> scenario-til-kapabilitet-mapping
• Parse licensing-matrix.md -> lisens-til-kapabilitet-filter
• Parse referansefiler -> kapabilitetskatalog med metadata
• Output: playground/data/capabilities.json — maskinlesbar katalog

Steg 3: Bygg playground HTML

• Bruk Playground plugin-monsteret: kontroller + preview + prompt output
• Adaptor fra grocery store HTML (aisles, cards, cart, export)
• Tilleggselementer: scenariovelger, constraint-filtre, kostnadsestimator
• Self-contained, dark theme, ingen eksterne avhengigheter

Steg 4: Implementer de 3 inngangene

• Scenariovelger: dropdown/cards med pre-fylling
• Constraint-filter: sidebar med lisens, budsjett, compliance toggles
• Frittsurfing: browse aisles som originalen

Steg 5: Prompt output og eksport

• Live prompt-output som oppdateres ved hvert valg
• Copy-knapp for a lime i Claude
• Alternativ eksport: markdown-brief, JSON for maskin-konsumering

Steg 6: Koble til ms-ai-architect workflow

• Dokumenter hvordan prompt-output feeds inn i /architect:utredning
• Vurder om grocery store kan bli en ny /architect:explore command

---

Referansefiler (eksisterende, gjenbruk)

Fil	Bruk
ai-frameworks/framework-comparison.html	UI-monster og JavaScript-patterns
ms-ai-architect/.../decision-trees.md	Scenario-mapping logikk
ms-ai-architect/.../licensing-matrix.md	Lisensfilter-data
ms-ai-architect/.../cost-models.md	Kostnadsestimering
ms-ai-architect/.../public-sector-checklist.md	Compliance-filtre
Playground SKILL.md + templates	HTML-genereringsmonster

Verifikasjon

1. Apne HTML i browser — alt fungerer uten nettverk
2. Velg scenario "RAG-chatbot" -> handlekurv pre-fylles med 5-8 items
3. Aktiver filter "E3 + Norway East" -> items som krever E5/annen region skjules
4. Kopier prompt output -> lim inn i Claude -> verifiser at den gir nok kontekst for /architect
5. Eksporter som markdown -> verifiser at den er lesbar og handlingsbar