Skip to content

Commit d4cbeaf

Browse files
crivetimihaicrivetimihai
authored
Merge pull request #75 from IBM/add-help-to-ui
Add version and help / descriptions to UI
2 parents 9325311 + db0e0ee commit d4cbeaf

File tree

2 files changed

+94
-44
lines changed

2 files changed

+94
-44
lines changed

‎mcpgateway/static/favicon.ico‎

9.44 KB
Binary file not shown.

‎mcpgateway/templates/admin.html‎

Lines changed: 94 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>MCP Gateway Admin</title>
7+
<!-- Favicon -->
8+
<link
9+
rel="icon"
10+
type="image/png"
11+
sizes="32x32"
12+
href="{{ root_path }}/static/favicon.ico"
13+
/>
714
<link
815
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
916
rel="stylesheet"
@@ -25,14 +32,32 @@
2532

2633
<body class="bg-gray-100">
2734
<div class="w-full max-w-screen-2xl mx-auto px-4 py-8">
28-
<header class="mb-8">
29-
<h1 class="text-3xl font-bold text-gray-800">
30-
MCP Context Forge - Gateway Administration
31-
</h1>
32-
<p class="text-gray-600">
33-
Manage tools, resources, prompts, servers, and federated gateways
34-
</p>
35-
</header>
35+
<header class="mb-8">
36+
<h1 class="text-3xl font-bold text-gray-800">
37+
MCP Context Forge – Gateway Administration
38+
</h1>
39+
40+
<p class="text-gray-600">
41+
Manage tools, resources, prompts, servers, and federated gateways
42+
(remote MCP servers)
43+
<span class="mx-2 text-gray-400">|</span>
44+
<a
45+
href="https://ibm.github.io/mcp-context-forge/"
46+
target="_blank"
47+
class="text-indigo-600 hover:underline"
48+
> Docs</a
49+
>
50+
<span class="mx-2 text-gray-400">|</span>
51+
<a
52+
href="https://github.com/IBM/mcp-context-forge"
53+
target="_blank"
54+
class="text-indigo-600 hover:underline"
55+
>⭐ Star mcp-context-forge on GitHub</a
56+
>
57+
</p>
58+
</header>
59+
60+
3661

3762
<!-- Tabs -->
3863
<div class="mb-8">
@@ -43,35 +68,35 @@ <h1 class="text-3xl font-bold text-gray-800">
4368
id="tab-catalog"
4469
class="tab-link border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
4570
>
46-
Servers Catalog
71+
Virtual Servers Catalog
4772
</a>
4873
<a
4974
href="#tools"
5075
id="tab-tools"
5176
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
5277
>
53-
Tools
78+
Global Tools
5479
</a>
5580
<a
5681
href="#resources"
5782
id="tab-resources"
5883
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
5984
>
60-
Resources
85+
Global Resources
6186
</a>
6287
<a
6388
href="#prompts"
6489
id="tab-prompts"
6590
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
6691
>
67-
Prompts
92+
Global Prompts
6893
</a>
6994
<a
7095
href="#gateways"
7196
id="tab-gateways"
7297
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
7398
>
74-
Gateways
99+
Gateways/MCP Servers
75100
</a>
76101
<a
77102
href="#roots"
@@ -87,6 +112,14 @@ <h1 class="text-3xl font-bold text-gray-800">
87112
>
88113
Metrics
89114
</a>
115+
<!-- New Version tab (opens separate /version page) -->
116+
<a
117+
href="{{ root_path }}/version"
118+
target="_blank"
119+
class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
120+
>
121+
Version
122+
</a>
90123
</nav>
91124
</div>
92125
</div>
@@ -95,6 +128,8 @@ <h1 class="text-3xl font-bold text-gray-800">
95128
<div id="catalog-panel" class="tab-panel">
96129
<div class="flex justify-between items-center mb-4">
97130
<h2 class="text-2xl font-bold">MCP Servers Catalog</h2>
131+
<p class="text-sm text-gray-600 mt-1">Virtual Servers let you combine Tools, Resources, and Prompts from the global Tools catalog into a reusable configuration.</p>
132+
98133
<div class="flex items-center">
99134
<input
100135
type="checkbox"
@@ -356,6 +391,7 @@ <h3 class="text-lg font-bold mb-4">Add New Server</h3>
356391
<div id="tools-panel" class="tab-panel hidden">
357392
<div class="flex justify-between items-center mb-4">
358393
<h2 class="text-2xl font-bold">Registered Tools</h2>
394+
<p class="text-sm text-gray-600 mt-1">This is the global catalog of Tools available. Create a Virtual Server using one of these tools.</p>
359395
<div class="flex items-center">
360396
<input
361397
type="checkbox"
@@ -737,6 +773,7 @@ <h3 class="text-lg font-bold mb-4">Add New Tool</h3>
737773
<div id="resources-panel" class="tab-panel hidden">
738774
<div class="flex justify-between items-center mb-4">
739775
<h2 class="text-2xl font-bold">Available Resources</h2>
776+
<p class="text-sm text-gray-600 mt-1">Resources are reusable data assets—like text, code, or media—that Tools and Prompts can reference by URI.</p>
740777
<div class="flex items-center">
741778
<input
742779
type="checkbox"
@@ -967,6 +1004,7 @@ <h3 class="text-lg font-bold mb-4">Add New Resource</h3>
9671004
<div id="prompts-panel" class="tab-panel hidden">
9681005
<div class="flex justify-between items-center mb-4">
9691006
<h2 class="text-2xl font-bold">Available Prompts</h2>
1007+
<p class="text-sm text-gray-600 mt-1">Prompts define reusable message templates with parameters, useful for driving LLM interactions or Tool input.</p>
9701008
<div class="flex items-center">
9711009
<input
9721010
type="checkbox"
@@ -1173,7 +1211,8 @@ <h3 class="text-lg font-bold mb-4">Add New Prompt</h3>
11731211
<!-- Gateways Panel -->
11741212
<div id="gateways-panel" class="tab-panel hidden">
11751213
<div class="flex justify-between items-center mb-4">
1176-
<h2 class="text-2xl font-bold">Federated Gateways</h2>
1214+
<h2 class="text-2xl font-bold">Federated Gateways (MCP)</h2>
1215+
<p class="text-sm text-gray-600 mt-1">Gateways are where you register external MCP servers to federate their tools/resources/prompts into your environment.</p>
11771216
<div class="flex items-center">
11781217
<input
11791218
type="checkbox"
@@ -1440,45 +1479,59 @@ <h3 class="text-lg font-bold mb-4">Add New Gateway</h3>
14401479

14411480
<!-- Roots Panel -->
14421481
<div id="roots-panel" class="tab-panel hidden">
1482+
<!-- List of roots ------------------------------------------------------->
14431483
<div class="bg-white shadow rounded-lg p-6 mb-8">
1444-
<h2 class="text-2xl font-bold mb-4">Root Directories</h2>
1484+
<!-- Consistent header -->
1485+
<div class="flex justify-between items-center mb-4">
1486+
<h2 class="text-2xl font-bold">Root Directories</h2>
1487+
<div class="flex items-center">
1488+
<input
1489+
type="checkbox"
1490+
id="show-inactive-roots"
1491+
class="mr-2"
1492+
onchange="toggleInactiveItems('roots')"
1493+
/>
1494+
<label
1495+
for="show-inactive-roots"
1496+
class="text-sm font-medium text-gray-700"
1497+
>
1498+
Show Inactive
1499+
</label>
1500+
</div>
1501+
</div>
1502+
1503+
<!-- Description -->
1504+
<p class="text-sm text-gray-600 mb-4">
1505+
Roots define the base folders accessible for file-based Resources.
1506+
They enable MCP servers to browse local content.
1507+
</p>
1508+
1509+
<!-- Roots table -->
14451510
<div class="overflow-x-auto">
14461511
<table class="min-w-full divide-y divide-gray-200">
14471512
<thead class="bg-gray-50">
14481513
<tr>
1449-
<th
1450-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1451-
>
1514+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14521515
ID
14531516
</th>
1454-
<th
1455-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1456-
>
1517+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14571518
URI
14581519
</th>
1459-
<th
1460-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1461-
>
1520+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14621521
Name
14631522
</th>
1464-
<th
1465-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1466-
>
1523+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14671524
Actions
14681525
</th>
14691526
</tr>
14701527
</thead>
14711528
<tbody class="bg-white divide-y divide-gray-200">
14721529
{% for root in roots %}
14731530
<tr>
1474-
<td
1475-
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
1476-
>
1531+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
14771532
{{ root.id }}
14781533
</td>
1479-
<td
1480-
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
1481-
>
1534+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
14821535
{{ root.uri }}
14831536
</td>
14841537
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -1491,10 +1544,7 @@ <h2 class="text-2xl font-bold mb-4">Root Directories</h2>
14911544
class="inline"
14921545
onsubmit="return confirm('Are you sure you want to delete this root?');"
14931546
>
1494-
<button
1495-
type="submit"
1496-
class="text-red-600 hover:text-red-900"
1497-
>
1547+
<button type="submit" class="text-red-600 hover:text-red-900">
14981548
Delete
14991549
</button>
15001550
</form>
@@ -1506,14 +1556,13 @@ <h2 class="text-2xl font-bold mb-4">Root Directories</h2>
15061556
</div>
15071557
</div>
15081558

1559+
<!-- Add new root -------------------------------------------------------->
15091560
<div class="bg-white shadow rounded-lg p-6">
15101561
<h3 class="text-lg font-bold mb-4">Add New Root</h3>
15111562
<form method="POST" action="{{ root_path }}/admin/roots" id="add-root-form">
15121563
<div class="grid grid-cols-1 gap-6">
15131564
<div>
1514-
<label class="block text-sm font-medium text-gray-700"
1515-
>URI</label
1516-
>
1565+
<label class="block text-sm font-medium text-gray-700">URI</label>
15171566
<input
15181567
type="text"
15191568
name="uri"
@@ -1523,9 +1572,7 @@ <h3 class="text-lg font-bold mb-4">Add New Root</h3>
15231572
/>
15241573
</div>
15251574
<div>
1526-
<label class="block text-sm font-medium text-gray-700"
1527-
>Name</label
1528-
>
1575+
<label class="block text-sm font-medium text-gray-700">Name</label>
15291576
<input
15301577
type="text"
15311578
name="name"
@@ -1545,12 +1592,14 @@ <h3 class="text-lg font-bold mb-4">Add New Root</h3>
15451592
</form>
15461593
</div>
15471594
</div>
1548-
</div>
1595+
1596+
15491597

15501598
<!-- Metrics Panel -->
15511599
<div id="metrics-panel" class="tab-panel hidden">
15521600
<div class="bg-white shadow rounded-lg p-6">
15531601
<h2 class="text-2xl font-bold mb-4">Aggregated Metrics</h2>
1602+
<p class="text-sm text-gray-600 mt-1">Metrics provide visibility into Tool, Resource, Prompt, and Server usage across your Gateway—helpful for debugging and optimization.</p>
15541603

15551604
<!-- Refresh button (also auto-refreshes when the tab is selected) -->
15561605
<button
@@ -1599,6 +1648,7 @@ <h2 class="text-2xl font-bold mb-4">Aggregated Metrics</h2>
15991648
</div>
16001649
</div>
16011650

1651+
16021652
<!-- Modals -->
16031653
<!-- Tool Detail Modal -->
16041654
<div id="tool-modal" class="fixed z-10 inset-0 overflow-y-auto hidden">

0 commit comments

Comments
 (0)