ktg-plugin-marketplace/plugins/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)
```json
{
  "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