Developing with AI

From idea to running app in one conversation

Once the BPT MCP Server is connected, you don't wire components by hand. You say “design my app with BPT” and your AI assistant runs a short, opinionated interview — application type, software architecture, database, auth, menus, deployment — then produces a complete implementation plan you can read, edit, and approve before a single file is written. Approve it and the same assistant scaffolds a multi-project Blazor solution that uses only BPT components and follows the framework's own conventions.

🗣️

You answer 9 questions

A guided interview, one decision at a time, with follow-ups only where they matter.

📋

You get a plan

A reviewable Markdown runbook — every file, command, and checkpoint — before anything is created.

✅

You approve, then build

Say “execute the plan” and the assistant scaffolds the solution, step by step.

How it fits together

The design system leans on two MCP servers working side by side. The BPT MCP Server supplies BlazorPowerTools knowledge (components, charts, theming, the design-system wizard itself). The Microsoft Learn MCP supplies framework knowledge (Blazor render modes, ASP.NET Core middleware, EF Core migrations, Azure deployment). Your assistant pulls from whichever is authoritative for the question at hand.

End-to-end flow

Before you start: attach both MCP servers

Add the BPT MCP Server (see the download page for the Docker image) and the Microsoft Learn MCP to your client. For Claude Code, a project .mcp.json looks like:

{
  "mcpServers": {
    "bpt-expert": {
      "type": "http",
      "url": "http://localhost:7180/mcp"
    },
    "microsoft-learn": {
      "type": "http",
      "url": "https://learn.microsoft.com/api/mcp"
    }
  }
}

Or via the CLI:

claude mcp add bpt-expert      http://localhost:7180/mcp
claude mcp add microsoft-learn https://learn.microsoft.com/api/mcp

💡 Tip

You don't need to memorise a command. Any natural phrasing works — “I want to create a new web page using BlazorPowerTools”, “scaffold a Blazor app with BPT”, or just “use BPT to start a project”. To preview without writing anything, say “dry-run the BPT design system”.

The interview: 9 questions

The wizard asks these in order. Some have follow-ups; some are skipped based on earlier answers.

1 · Application type
General / Company / Landing builder / Image editor / Monitoring dashboard

2 · Software architecture
Frontend only / Same project / Library+interfaces / Web API + tests (recommended)

3 · Database
AzureSQL / Native MS SQL Server / PostgreSQL (skipped if frontend-only)

4 · Dev environment
Local / Docker all / Web local + DB Docker / Web local + centralised DB

5 · Authentication
Keycloak / Entra ID / Google Workspace / AWS Cognito / Custom / None

6 · Menu items
Customers, Users, Tickets, Orders, Invoicing, Products, Settings, Admin (multi-select)

7 · Git repository
No / GitHub / Azure DevOps (only asked if not already a repo)

8 · Publishing
Manual / Docker / Kubernetes / AWS / Azure

9 · Network access
Manual / Traefik (auto Let's Encrypt) / Hosting-provider

A worked example

Here's a real run for a monitoring dashboard. These are the answers a developer gave, and exactly what the wizard produced — so you can see the shape of the output before you commit.

The answers

#	Question	Answer
1	Application type	Monitoring / server dashboard
2	Software architecture	Web API + unit tests — Web-API-auth: No
3	Database	AzureSQL (bacpac)
4	Dev environment	Everything local
5	Authentication	AWS Cognito
6	Menu items	Customers, Users, Settings, Admin
7	Git repository	No
8	Publishing	Docker for every service
9	Network access	Configure manually later

The file structure it plans

The wizard previews this tree — five projects wired into one solution, every interactive element a BPT component:

MonitoringDashboard/
├── MonitoringDashboard.sln                  Five-project solution
├── MonitoringDashboard.Web/                 Blazor frontend (calls the API over HTTP)
│   ├── Components/
│   │   ├── App.razor                        BptRootComponent + Routes
│   │   ├── Layout/MainLayout.razor          BptAppFramework + BptThemeLoader + menu wiring
│   │   └── Routes.razor                     AuthorizeRouteView (AWS Cognito sign-in)
│   ├── Pages/
│   │   ├── Home.razor                       Dashboard: BptServerMonitor + BptTerminalClient + charts
│   │   ├── Customers.razor                  BptFilter + BptGrid + add/edit BptDialogue
│   │   ├── Users.razor                      BptFilter + BptGrid + add/edit BptDialogue
│   │   ├── Settings.razor                   BptCard form (BptTextInput / BptSwitch / BptDropdown)
│   │   └── Admin.razor                      Embedded BptThemeBuilder  [Authorize(Roles="Admin")]
│   ├── Services/{Customer,User}ApiClient.cs Typed HttpClient to /api/*
│   ├── wwwroot/themes/{light,dark,nord}.json   BptThemeConfig stubs
│   └── Program.cs                           HttpClient + Cognito OIDC + SignalR hubs
├── MonitoringDashboard.Api/                 ASP.NET Core Web API (owns the DbContext)
│   ├── Controllers/{Customers,Users}Controller.cs
│   ├── Services/{Customer,User}Service.cs
│   ├── Data/ApplicationDbContext.cs         EF Core (SqlServer / AzureSQL)
│   └── Program.cs                           AddControllers + AddDbContext
├── MonitoringDashboard.Entities/            Customer.cs / User.cs  (POCOs, no EF dependency)
├── MonitoringDashboard.Interfaces/          Service contracts + DTOs
├── MonitoringDashboard.Tests/               xUnit tests for the API service layer
├── MonitoringDashboard.Web/Dockerfile       Multi-stage SDK to ASP.NET 10 runtime
├── MonitoringDashboard.Api/Dockerfile       Multi-stage SDK to ASP.NET 10 runtime
└── docker-compose.prod.yml                  web + api (Traefik skipped — manual networking)

🔎 What the wizard skipped — and told the developer why

docker-compose.dev.yml — dev environment was “Everything local”, so it emitted install notes instead.
.gitignore / git init — git was declined.
Traefik config — networking was “manual”.
JWT bearer on the API — Web-API-auth was “No”, so endpoints stay anonymous behind the private network.

⚠️ Cross-checks the wizard raised

This run mixed AWS Cognito (auth), Azure SQL (database) and plain Docker (hosting) — valid, but unusual. The wizard flagged it so the developer could confirm the choices were intentional, noted that “Everything local + AzureSQL” means using LocalDB for dev and Azure SQL for production, and warned that with Web-API-auth off, the API must stay on the private compose network. Surfacing these trade-offs up front is the whole point of the plan-first flow.

Configure and run the MCP server

The server speaks the Model Context Protocol over Streamable‑HTTP at http://localhost:7180/mcp. Almost every AI client can connect — the only thing that changes is where the config lives and the exact JSON shape. Pick your tool below.

1 · Manually

Run the Docker image (full download & load steps are on the MCP Server page), then point any client at it:

# start the server
docker run --rm -p 7180:7180 bpt-mcp-server:<version>

# confirm it's healthy
curl http://localhost:7180/health
# {"status":"ok","skills":11}

The generic config most clients accept (Claude Code / Claude Desktop / Cursor / anything using the mcpServers shape):

{
  "mcpServers": {
    "bpt-expert":      { "type": "http", "url": "http://localhost:7180/mcp" },
    "microsoft-learn": { "type": "http", "url": "https://learn.microsoft.com/api/mcp" }
  }
}

Claude Code CLI shortcut: claude mcp add bpt-expert http://localhost:7180/mcp

Smoke-test with the official inspector — npx @modelcontextprotocol/inspector — connect to http://localhost:7180/mcp, and the Resources tab should list every skill.

2 · In VS Code

The five most popular MCP-capable clients for VS Code, each with a verified config:

GitHub Copilot (agent mode)

Workspace file .vscode/mcp.json — note the key is servers, not mcpServers:

{
  "servers": {
    "bpt-expert": {
      "type": "http",
      "url": "http://localhost:7180/mcp"
    }
  }
}

Or Command Palette → MCP: Add Server → HTTP, then choose Agent mode and enable the tool.

Claude (Claude Code / Claude Dev)

Uses the generic mcpServers shape above in .mcp.json, or the one-liner:

claude mcp add bpt-expert \
  http://localhost:7180/mcp

Claude Desktop reads the same mcpServers block from its settings file.

Cline (& Roo Code)

Use the Remote Servers tab, or cline_mcp_settings.json — the transport label is streamableHttp:

{
  "mcpServers": {
    "bpt-expert": {
      "type": "streamableHttp",
      "url": "http://localhost:7180/mcp"
    }
  }
}

Roo Code (a Cline fork) uses the identical block.

Continue

YAML in config.yaml — transport label is streamable-http:

mcpServers:
  - name: bpt-expert
    type: streamable-http
    url: http://localhost:7180/mcp

OpenAI Codex (CLI / VS Code)

TOML in ~/.codex/config.toml:

[mcp_servers.bpt-expert]
url = "http://localhost:7180/mcp"

… and so forth

Cursor (.cursor/mcp.json) and Windsurf use the same mcpServers JSON shape as the generic block in section 1 — just paste it and restart the editor.

3 · In Visual Studio Community

Visual Studio's MCP support rides on GitHub Copilot agent mode — and Copilot Free works in Community Edition, so you don't need a paid plan to try it.

Prerequisite: Visual Studio 2022 17.14 or later (or VS 2026), signed in to a GitHub account with Copilot enabled.
Create .mcp.json at the solution root (<SolutionDir>\.mcp.json) or per-user (%USERPROFILE%\.mcp.json). The key is servers, exactly like VS Code Copilot:
{ "servers": { "bpt-expert": { "type": "http", "url": "http://localhost:7180/mcp" } } }
If you check the file into source control, add it to Solution Items in Solution Explorer so Visual Studio reloads it on save.
Open GitHub Copilot Chat → Agent mode → the Tools (wrench) icon → enable bpt-expert. MCP tools are disabled by default — you must toggle them on. (GUI alternative: the Tools wrench → + → Add Custom MCP Server dialog → Type = HTTP, URL = the endpoint.)
To add the companion Microsoft Learn MCP, use Tools > Options > GitHub > Copilot > MCP Servers and enter https://learn.microsoft.com/api/mcp.

🔎 One shape does not fit all

The most common mistake is pasting the wrong top-level key. Quick reference:

Client	File	Top-level key	Transport
VS Code Copilot · Visual Studio	`.vscode/mcp.json` · `.mcp.json`	`servers`	`type: "http"`
Claude · Cursor · Windsurf	`.mcp.json` · `.cursor/mcp.json`	`mcpServers`	`type: "http"` / omit
Cline · Roo Code	`cline_mcp_settings.json`	`mcpServers`	`type: "streamableHttp"`
Continue	`config.yaml`	`mcpServers` (YAML)	`type: streamable-http`
OpenAI Codex	`~/.codex/config.toml`	`[mcp_servers.*]`	`url = …`

Patterns & best practices baked in

Plan first, write second

Nothing touches disk until you approve the plan. It's plain Markdown — diff it, edit it, commit it next to the code it produces.

BPT components only

Every interactive element is a BPT component — no raw inputs, no Bootstrap form classes — so theming, validation, and accessibility are consistent end to end.

Clean project boundaries

Entities live in their own project; the DbContext sits in the backend that owns it; EF migrations target the right pair automatically. Swap the frontend or scale the API without churn.

Grounded answers

BPT specifics come from the BPT MCP; Blazor / EF Core / Azure specifics come from the Microsoft Learn MCP — with cited doc URLs, not guesswork.

Try it

With both MCP servers attached, start a conversation with any of these:

I want to create a new web page using BlazorPowerTools
design my app with BPT
use BPT to start a monitoring dashboard
dry-run the BPT design system        ← preview only, writes nothing

Answer the interview, read the plan it writes to .claude/plans/bpt-scaffold.md, tweak anything you like, then say “execute the plan”.