Skip to content

Commit 2c908e5

Browse files
crivetimihaicrivetimihai
committed
Use Case Overview
Signed-off-by: Mihai Criveti <[email protected]>
1 parent f260c5a commit 2c908e5

File tree

1 file changed

+284
-0
lines changed

1 file changed

+284
-0
lines changed

‎docs/docs/index.md

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,290 @@ owner: Mihai Criveti
88

99
A flexible FastAPI-based gateway and router for **Model Context Protocol (MCP)** with support for virtual servers. It acts as a unified interface for tools, resources, prompts, virtual servers, and federated gateways - all accessible via rich multi-transport APIs and an interactive web-based Admin UI.
1010

11+
12+
<!DOCTYPE html>
13+
<html lang="en">
14+
<head>
15+
<meta charset="UTF-8">
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17+
<title>Agentic Core</title>
18+
<style>
19+
.diagram-body {
20+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
21+
margin: 0;
22+
padding: 20px;
23+
background: #f5f7fa;
24+
color: #2c3e50;
25+
}
26+
27+
.diagram-container {
28+
max-width: 1200px;
29+
margin: 0 auto;
30+
}
31+
32+
.diagram-h1 {
33+
text-align: center;
34+
color: #2c3e50;
35+
margin-bottom: 40px;
36+
font-size: 2.5em;
37+
font-weight: 600;
38+
}
39+
40+
/* Agentic Core section */
41+
.diagram-agentic-core {
42+
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
43+
color: white;
44+
border-radius: 12px;
45+
padding: 40px;
46+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
47+
}
48+
49+
.diagram-section-title {
50+
color: white;
51+
font-size: 1.8em;
52+
text-align: center;
53+
margin-bottom: 40px;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
gap: 10px;
58+
}
59+
60+
.diagram-three-column-layout {
61+
display: grid;
62+
grid-template-columns: 1fr 1fr 1fr;
63+
gap: 30px;
64+
align-items: start;
65+
}
66+
67+
.diagram-column {
68+
display: flex;
69+
flex-direction: column;
70+
gap: 20px;
71+
}
72+
73+
.diagram-component-group {
74+
background: rgba(255, 255, 255, 0.1);
75+
border: 2px solid rgba(255, 255, 255, 0.3);
76+
border-radius: 12px;
77+
padding: 20px;
78+
backdrop-filter: blur(10px);
79+
}
80+
81+
.diagram-component-group:hover {
82+
background: rgba(255, 255, 255, 0.15);
83+
border-color: rgba(255, 255, 255, 0.5);
84+
}
85+
86+
.diagram-group-title {
87+
font-size: 1.2em;
88+
font-weight: 600;
89+
margin-bottom: 15px;
90+
color: white;
91+
display: flex;
92+
align-items: center;
93+
gap: 8px;
94+
}
95+
96+
.diagram-group-items {
97+
display: flex;
98+
flex-direction: column;
99+
gap: 8px;
100+
}
101+
102+
.diagram-item {
103+
background: rgba(255, 255, 255, 0.15);
104+
border-radius: 6px;
105+
padding: 8px 14px;
106+
font-size: 0.95em;
107+
color: #ecf0f1;
108+
display: flex;
109+
align-items: center;
110+
gap: 8px;
111+
transition: all 0.2s ease;
112+
}
113+
114+
.diagram-item:hover {
115+
background: rgba(255, 255, 255, 0.25);
116+
transform: translateX(4px);
117+
}
118+
119+
/* Center column special styling */
120+
.diagram-center-column {
121+
display: flex;
122+
flex-direction: column;
123+
gap: 20px;
124+
align-items: center;
125+
}
126+
127+
.diagram-gateway-box {
128+
width: 100%;
129+
background: rgba(52, 152, 219, 0.2);
130+
border: 2px solid rgba(52, 152, 219, 0.6);
131+
border-radius: 12px;
132+
padding: 25px;
133+
text-align: center;
134+
}
135+
136+
.diagram-gateway-box:hover {
137+
background: rgba(52, 152, 219, 0.3);
138+
border-color: rgba(52, 152, 219, 0.8);
139+
}
140+
141+
.diagram-gateway-title {
142+
font-size: 1.3em;
143+
font-weight: 600;
144+
margin-bottom: 10px;
145+
color: white;
146+
}
147+
148+
.diagram-open-source-badge {
149+
display: inline-block;
150+
background: rgba(46, 204, 113, 0.3);
151+
border: 1px solid rgba(46, 204, 113, 0.6);
152+
border-radius: 20px;
153+
padding: 4px 16px;
154+
font-size: 0.85em;
155+
margin-bottom: 20px;
156+
color: #2ecc71;
157+
}
158+
159+
.diagram-capability-list {
160+
display: flex;
161+
flex-direction: column;
162+
gap: 8px;
163+
text-align: left;
164+
margin-top: 20px;
165+
}
166+
167+
.diagram-capability {
168+
background: rgba(255, 255, 255, 0.1);
169+
border-radius: 6px;
170+
padding: 8px 12px;
171+
font-size: 0.9em;
172+
display: flex;
173+
align-items: center;
174+
gap: 8px;
175+
}
176+
177+
.diagram-protocol-detail {
178+
font-size: 0.8em;
179+
opacity: 0.8;
180+
margin-left: 24px;
181+
margin-top: 4px;
182+
}
183+
184+
@media (max-width: 968px) {
185+
.diagram-three-column-layout {
186+
grid-template-columns: 1fr;
187+
}
188+
}
189+
</style>
190+
</head>
191+
<body>
192+
<div class="diagram-container">
193+
<div class="diagram-agentic-core">
194+
<div class="diagram-section-title">
195+
⚡ ContextForge MCP Gateway Use Case Overview
196+
</div>
197+
198+
<div class="diagram-three-column-layout">
199+
<!-- Left Column -->
200+
<div class="diagram-column">
201+
<div class="diagram-component-group">
202+
<div class="diagram-group-title">🤖 Agent Frameworks</div>
203+
<div class="diagram-group-items">
204+
<div class="diagram-item">🔗 Langchain</div>
205+
<div class="diagram-item">📊 Langgraph</div>
206+
<div class="diagram-item">👥 crew.ai</div>
207+
<div class="diagram-item">🔄 Autogen</div>
208+
<div class="diagram-item">🐍 PydanticAI</div>
209+
<div class="diagram-item">🤗 Huggingface Smol</div>
210+
<div class="diagram-item">🐝 Agent Bee</div>
211+
</div>
212+
</div>
213+
214+
<div class="diagram-component-group">
215+
<div class="diagram-group-title">💻 Visual Studio Code</div>
216+
<div class="diagram-group-items">
217+
<div class="diagram-item">🤖 GitHub Copilot</div>
218+
<div class="diagram-item">🔧 Cline</div>
219+
<div class="diagram-item">➡️ Continue</div>
220+
</div>
221+
</div>
222+
223+
<div class="diagram-component-group">
224+
<div class="diagram-group-title">🔧 Other Clients</div>
225+
<div class="diagram-group-items">
226+
<div class="diagram-item">🌐 OpenWebUI</div>
227+
<div class="diagram-item">⌨️ MCP-CLI</div>
228+
</div>
229+
</div>
230+
</div>
231+
232+
<!-- Center Column -->
233+
<div class="diagram-center-column">
234+
<div class="diagram-gateway-box">
235+
<div class="diagram-gateway-title">🌐 MCP Gateway</div>
236+
<div class="diagram-capability-list">
237+
<div class="diagram-capability">📚 MCP Registry</div>
238+
<div class="diagram-capability">🖥️ Virtual Servers</div>
239+
<div class="diagram-capability">🔐 Authorization</div>
240+
<div class="diagram-capability">🔑 Authentication</div>
241+
<div class="diagram-capability" style="padding: 10px 12px;">
242+
<div>🔄 Protocol Conversion → any to any</div>
243+
<div style="font-size: 0.8em; opacity: 0.8; margin-left: 24px;">(stdio, SSE, Streamable HTTP, JSON-RPC, REST)</div>
244+
</div>
245+
<div class="diagram-capability">📊 Observability</div>
246+
<div class="diagram-capability">⏱️ Rate Limiting</div>
247+
<div class="diagram-capability">🔀 HA / Routing</div>
248+
<div class="diagram-capability">💚 Healthchecks</div>
249+
<div class="diagram-capability">🛠️ API / UI / CLI</div>
250+
</div>
251+
</div>
252+
253+
<div class="diagram-gateway-box">
254+
<div class="diagram-gateway-title">🔌 Plugin Framework</div>
255+
<div class="diagram-capability-list">
256+
<div class="diagram-capability">🔒 PII Filtering</div>
257+
<div class="diagram-capability">🛡️ XSS Filtering</div>
258+
<div class="diagram-capability">📋 Open Policy Agent</div>
259+
</div>
260+
</div>
261+
</div>
262+
263+
<!-- Right Column -->
264+
<div class="diagram-column">
265+
<div class="diagram-component-group">
266+
<div class="diagram-group-title">🔌 MCP Servers</div>
267+
<div class="diagram-group-items">
268+
<div class="diagram-item">🐙 GitHub</div>
269+
<div class="diagram-item">📋 Jira</div>
270+
<div class="diagram-item">🎫 ServiceNow</div>
271+
<div class="diagram-item">🎭 Playwright</div>
272+
<div class="diagram-item">🎨 Figma</div>
273+
<div class="diagram-item">📅 Monday</div>
274+
<div class="diagram-item">📦 Box</div>
275+
<div class="diagram-item">🌐 Internet Search</div>
276+
</div>
277+
</div>
278+
279+
<div class="diagram-component-group">
280+
<div class="diagram-group-title">🔗 REST APIs</div>
281+
<div class="diagram-group-items">
282+
<div class="diagram-item">🌍 External Services</div>
283+
<div class="diagram-item">☁️ Cloud Providers</div>
284+
<div class="diagram-item">📊 Data Sources</div>
285+
<div class="diagram-item">🏢 Enterprise Systems</div>
286+
</div>
287+
</div>
288+
</div>
289+
</div>
290+
</div>
291+
</div>
292+
</body>
293+
</html>
294+
11295
![MCP Gateway](images/mcpgateway.gif)
12296

13297
**⚠️ Important**: MCP Gateway is not a standalone product - it is an open source component with **NO OFFICIAL SUPPORT** from IBM or its affiliates that can be integrated into your own solution architecture. If you choose to use it, you are responsible for evaluating its fit, securing the deployment, and managing its lifecycle. See [SECURITY.md](https://github.com/IBM/mcp-context-forge/blob/main/SECURITY.md) for more details, and the [roadmap](architecture/roadmap.md) for upcoming features.

0 commit comments

Comments
 (0)