Skip to content

Commit 29cafc3

Browse files
JamesNKJamesNK
committed
Add tabs
1 parent 7c9df73 commit 29cafc3

File tree

4 files changed

+175
-48
lines changed

4 files changed

+175
-48
lines changed

‎src/Aspire.Dashboard/Components/Dialogs/McpServerDialog.razor‎

Lines changed: 110 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -16,52 +16,118 @@
1616
Aspire MCP connects AI assistants to Aspire app data. AI can use Aspire MCP to get information about app resources, health checks, commands, console logs and real-time telemetry.
1717
For more information, see <a href="" target="_blank">Use Aspire MCP with AI</a>.
1818
</p>
19-
<h5>Add to VS Code</h5>
20-
<p>
21-
<a href="@($"vscode:mcp/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
22-
<svg xmlns="http://www.w3.org/2000/svg" width="225" height="20" role="img" aria-label="VS Code: Install Aspire MCP Server">
23-
<title>VS Code: Install Aspire MCP Server</title>
24-
<g shape-rendering="crispEdges"><rect width="74" height="20" fill="#555" /><rect x="74" width="151" height="20" fill="#0098ff" /></g>
25-
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="465" y="140" transform="scale(.1)" fill="#fff" textLength="470">VS Code</text><text x="1485" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
26-
</svg>
27-
@*
28-
Generated from:
29-
https://img.shields.io/badge/VS_Code-Install_Aspire_MCP_Server-0098FF?style=flat-square&logo=modelcontextprotocol&logoColor=white
30-
*@
31-
</a>
32-
&nbsp;&nbsp;
33-
<a href="@($"vscode-insiders:mcp/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
34-
<svg xmlns="http://www.w3.org/2000/svg" width="273" height="20" role="img" aria-label="VS Code Insiders: Install Aspire MCP Server">
35-
<title>VS Code Insiders: Install Aspire MCP Server</title>
36-
<g shape-rendering="crispEdges"><rect width="122" height="20" fill="#555" /><rect x="122" width="151" height="20" fill="#65bba5" /></g>
37-
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="705" y="140" transform="scale(.1)" fill="#fff" textLength="950">VS Code Insiders</text><text x="1965" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
38-
</svg>
39-
@*
40-
Generated from:
41-
https://img.shields.io/badge/VS_Code_Insiders-Install_Aspire_MCP_Server-65BBA5?style=flat-square&logo=modelcontextprotocol&logoColor=white
42-
*@
43-
</a>
44-
</p>
45-
<p>
46-
<div class="block-warning">
47-
<div class="block-warning-icon">
48-
<FluentIcon Value="new Icons.Filled.Size16.Warning()" Color="Color.Warning" />
19+
<FluentTabs ActiveTabId="@($"tab-{_activeView}")" OnTabChange="@OnTabChangeAsync" Size="null">
20+
<FluentTab LabelClass="tab-label"
21+
Id="@($"tab-{McpToolView.VisualStudio}")"
22+
Label="Visual Studio">
23+
<div class="mcp-tool-tab">
24+
<p>
25+
Quickly add Aspire MCP to Visual Studio using a browser install button:
26+
</p>
27+
<p>
28+
<a href="@($"vsweb+mcp:/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
29+
30+
<svg xmlns="http://www.w3.org/2000/svg" width="251" height="20" role="img" aria-label="Visual Studio: Install Aspire MCP Server">
31+
<title>Visual Studio: Install Aspire MCP Server</title>
32+
<g shape-rendering="crispEdges"><rect width="100" height="20" fill="#555" /><rect x="100" width="151" height="20" fill="#8863c5" /></g>
33+
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="730">Visual Studio</text><text x="1745" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
34+
</svg>
35+
@*
36+
Generated from:
37+
https://img.shields.io/badge/Visual_Studio-Install_Aspire_MCP_Server-8863C5?style=flat-square&logo=modelcontextprotocol&logoColor=white
38+
*@
39+
</a>
40+
</p>
41+
<p>
42+
For other options, such as updating <code>mcp.json</code>, see <a href="https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#options-for-adding-an-mcp-server" target="_blank">Add an MCP server to Visual Studio</a>.
43+
</p>
44+
<MarkdownRenderer Markdown="@GetJsonConfigurationMarkdown()" MarkdownProcessor="@_markdownProcessor" />
4945
</div>
46+
</FluentTab>
47+
<FluentTab LabelClass="tab-label"
48+
Id="@($"tab-{McpToolView.VSCode}")"
49+
Label="VS Code">
50+
<div class="mcp-tool-tab">
51+
<p>
52+
Quickly add Aspire MCP to VS Code using a browser install button:
53+
</p>
54+
<p>
55+
<a href="@($"vscode:mcp/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
56+
<svg xmlns="http://www.w3.org/2000/svg" width="225" height="20" role="img" aria-label="VS Code: Install Aspire MCP Server">
57+
<title>VS Code: Install Aspire MCP Server</title>
58+
<g shape-rendering="crispEdges"><rect width="74" height="20" fill="#555" /><rect x="74" width="151" height="20" fill="#0098ff" /></g>
59+
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="465" y="140" transform="scale(.1)" fill="#fff" textLength="470">VS Code</text><text x="1485" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
60+
</svg>
61+
@*
62+
Generated from:
63+
https://img.shields.io/badge/VS_Code-Install_Aspire_MCP_Server-0098FF?style=flat-square&logo=modelcontextprotocol&logoColor=white
64+
*@
65+
</a>
66+
&nbsp;&nbsp;
67+
<a href="@($"vscode-insiders:mcp/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
68+
<svg xmlns="http://www.w3.org/2000/svg" width="273" height="20" role="img" aria-label="VS Code Insiders: Install Aspire MCP Server">
69+
<title>VS Code Insiders: Install Aspire MCP Server</title>
70+
<g shape-rendering="crispEdges"><rect width="122" height="20" fill="#555" /><rect x="122" width="151" height="20" fill="#65bba5" /></g>
71+
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="705" y="140" transform="scale(.1)" fill="#fff" textLength="950">VS Code Insiders</text><text x="1965" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
72+
</svg>
73+
@*
74+
Generated from:
75+
https://img.shields.io/badge/VS_Code_Insiders-Install_Aspire_MCP_Server-65BBA5?style=flat-square&logo=modelcontextprotocol&logoColor=white
76+
*@
77+
</a>
78+
</p>
79+
<p>
80+
For other options, such as updating <code>mcp.json</code>, see <a href="https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server" target="_blank">Add an MCP server to VS Code</a>.
81+
</p>
82+
<MarkdownRenderer Markdown="@GetJsonConfigurationMarkdown()" MarkdownProcessor="@_markdownProcessor" />
83+
@if (_isHttps)
84+
{
85+
<div class="block-warning">
86+
<div class="block-warning-icon">
87+
<FluentIcon Value="new Icons.Filled.Size16.Warning()" Color="Color.Warning" />
88+
</div>
5089

51-
<div class="block-warning-message">
52-
<span class="title">VS Code limitation</span>
53-
As of October 2025, VS Code does not support using Aspire MCP over HTTPS.
54-
<br />
55-
<br />
56-
To use VS Code with Aspire MCP, configure the MCP endpoint to use HTTP instead of HTTPS—for example, by launching the app host with the <code>http</code> profile.
57-
<a href="">More information</a>
90+
<div class="block-warning-message">
91+
<span class="title">VS Code limitation</span>
92+
As of October 2025, VS Code does not support using Aspire MCP over HTTPS.
93+
<br />
94+
<br />
95+
To use VS Code with Aspire MCP, configure the MCP endpoint to use HTTP instead of HTTPS—for example, by launching the app host with the <code>http</code> profile.
96+
<a href="">More information</a>
97+
</div>
98+
</div>
99+
}
58100
</div>
59-
</div>
60-
</p>
61-
<h5>MCP JSON</h5>
62-
<p>
63-
Add Aspire MCP by including the following JSON in your AI client’s <code>mcp.json</code> file.
64-
</p>
65-
<MarkdownRenderer Markdown="@GetJsonConfigurationMarkdown()" MarkdownProcessor="@_markdownProcessor" />
101+
</FluentTab>
102+
<FluentTab LabelClass="tab-label"
103+
Id="@($"tab-{McpToolView.Other}")"
104+
Label="Other">
105+
<div class="mcp-tool-tab">
106+
<p>
107+
Aspire MCP can be used with any AI tooling that supports streamable HTTP MCP servers.
108+
</p>
109+
<p>
110+
Important details for configuring Aspire MCP are below. Please refer to your AI client's documentation for how to add an MCP server.
111+
</p>
112+
<div class="property-grid-container">
113+
<FluentAccordion>
114+
<FluentAccordionItem Heading="Aspire MCP configuration" Expanded="true">
115+
<div slot="end">
116+
<FluentBadge Appearance="Appearance.Neutral" Circular="true">
117+
@_mcpConfigProperties.Count()
118+
</FluentBadge>
119+
</div>
120+
<PropertyGrid TItem="McpConfigPropertyViewModel"
121+
Items="_mcpConfigProperties.AsQueryable()"
122+
IsNameSortable="false"
123+
IsValueSortable="false"
124+
GridTemplateColumns="1fr 1.5fr" />
125+
</FluentAccordionItem>
126+
</FluentAccordion>
127+
</div>
128+
</div>
129+
</FluentTab>
130+
</FluentTabs>
131+
66132
}
67133
</div>

0 commit comments

Comments
 (0)