Skip to content

Commit 0d05cc2

Browse files
DVampireDVampire
committed
update
1 parent 0d81da8 commit 0d05cc2

File tree

3 files changed

+505
-0
lines changed

3 files changed

+505
-0
lines changed

‎docs/assets/architecture.png‎

519 KB
Loading

‎docs/assets/mcp_manager_agent.html‎

Lines changed: 385 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,385 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MCP Manager Agent Workflow</title>
7+
<style>
8+
body {
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11+
margin: 0;
12+
padding: 20px;
13+
min-height: 100vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.flowchart-container {
20+
background: white;
21+
border-radius: 20px;
22+
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
23+
padding: 40px;
24+
max-width: 1400px;
25+
width: 100%;
26+
}
27+
28+
.title {
29+
text-align: center;
30+
color: #2c3e50;
31+
font-size: 32px;
32+
font-weight: bold;
33+
margin-bottom: 40px;
34+
background: linear-gradient(45deg, #667eea, #764ba2);
35+
-webkit-background-clip: text;
36+
-webkit-text-fill-color: transparent;
37+
background-clip: text;
38+
}
39+
40+
.flowchart {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 30px;
44+
align-items: center;
45+
}
46+
47+
.row {
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
gap: 40px;
52+
flex-wrap: wrap;
53+
}
54+
55+
.node {
56+
display: flex;
57+
flex-direction: column;
58+
align-items: center;
59+
gap: 10px;
60+
position: relative;
61+
}
62+
63+
.node-content {
64+
display: flex;
65+
align-items: center;
66+
gap: 12px;
67+
padding: 18px 28px;
68+
border-radius: 12px;
69+
font-weight: 600;
70+
font-size: 14px;
71+
color: white;
72+
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
73+
transition: transform 0.3s ease;
74+
min-width: 220px;
75+
text-align: center;
76+
line-height: 1.4;
77+
}
78+
79+
.node-content:hover {
80+
transform: translateY(-5px);
81+
}
82+
83+
.start-end {
84+
background: linear-gradient(135deg, #667eea, #764ba2);
85+
border-radius: 50px;
86+
padding: 20px 40px;
87+
}
88+
89+
.process {
90+
background: linear-gradient(135deg, #4facfe, #00f2fe);
91+
}
92+
93+
.decision {
94+
background: linear-gradient(135deg, #fa709a, #fee140);
95+
transform: rotate(45deg);
96+
width: 140px;
97+
height: 140px;
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
}
102+
103+
.decision span {
104+
transform: rotate(-45deg);
105+
font-size: 13px;
106+
line-height: 1.3;
107+
text-align: center;
108+
}
109+
110+
.action {
111+
background: linear-gradient(135deg, #a8edea, #fed6e3);
112+
color: #2c3e50;
113+
}
114+
115+
.success {
116+
background: linear-gradient(135deg, #56ab2f, #a8e6cf);
117+
color: white;
118+
}
119+
120+
.failure {
121+
background: linear-gradient(135deg, #ff416c, #ff4b2b);
122+
color: white;
123+
}
124+
125+
.arrow {
126+
width: 60px;
127+
height: 60px;
128+
display: flex;
129+
align-items: center;
130+
justify-content: center;
131+
position: relative;
132+
}
133+
134+
.arrow svg {
135+
width: 40px;
136+
height: 40px;
137+
fill: #667eea;
138+
}
139+
140+
.arrow-label {
141+
position: absolute;
142+
background: #667eea;
143+
color: white;
144+
padding: 6px 12px;
145+
border-radius: 8px;
146+
font-size: 12px;
147+
font-weight: bold;
148+
white-space: nowrap;
149+
}
150+
151+
.arrow-label.yes {
152+
top: -15px;
153+
right: -15px;
154+
}
155+
156+
.arrow-label.no {
157+
bottom: -15px;
158+
left: -15px;
159+
}
160+
161+
.icon {
162+
width: 24px;
163+
height: 24px;
164+
fill: currentColor;
165+
flex-shrink: 0;
166+
}
167+
168+
.parallel-flow {
169+
display: flex;
170+
gap: 60px;
171+
align-items: center;
172+
}
173+
174+
.vertical-arrow {
175+
width: 40px;
176+
height: 40px;
177+
display: flex;
178+
align-items: center;
179+
justify-content: center;
180+
}
181+
182+
.vertical-arrow svg {
183+
width: 30px;
184+
height: 30px;
185+
fill: #667eea;
186+
transform: rotate(90deg);
187+
}
188+
189+
.horizontal-arrow {
190+
width: 40px;
191+
height: 40px;
192+
display: flex;
193+
align-items: center;
194+
justify-content: center;
195+
}
196+
197+
.horizontal-arrow svg {
198+
width: 30px;
199+
height: 30px;
200+
fill: #667eea;
201+
}
202+
203+
@media print {
204+
body {
205+
background: white;
206+
}
207+
.flowchart-container {
208+
box-shadow: none;
209+
padding: 20px;
210+
}
211+
}
212+
</style>
213+
</head>
214+
<body>
215+
<div class="flowchart-container">
216+
<h1 class="title">MCP Manager Agent Workflow</h1>
217+
218+
<div class="flowchart">
219+
<!-- Row 1: Start -->
220+
<div class="row">
221+
<div class="node">
222+
<div class="node-content start-end">
223+
<svg class="icon" viewBox="0 0 24 24">
224+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
225+
</svg>
226+
Task Input
227+
</div>
228+
</div>
229+
</div>
230+
231+
<!-- Vertical Arrow -->
232+
<div class="vertical-arrow">
233+
<svg viewBox="0 0 24 24">
234+
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
235+
</svg>
236+
</div>
237+
238+
<!-- Row 2: Requirements Analysis -->
239+
<div class="row">
240+
<div class="node">
241+
<div class="node-content process">
242+
<svg class="icon" viewBox="0 0 24 24">
243+
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/>
244+
</svg>
245+
Analyze MCP Tool Requirements
246+
</div>
247+
</div>
248+
</div>
249+
250+
<!-- Vertical Arrow -->
251+
<div class="vertical-arrow">
252+
<svg viewBox="0 0 24 24">
253+
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
254+
</svg>
255+
</div>
256+
257+
<!-- Row 3: Decision Point -->
258+
<div class="row">
259+
<div class="node">
260+
<div class="node-content decision">
261+
<span>Are Existing MCP Tools Available?</span>
262+
</div>
263+
</div>
264+
</div>
265+
266+
<!-- Row 4: Branch -->
267+
<div class="row">
268+
<div class="node">
269+
<div class="arrow">
270+
<svg viewBox="0 0 24 24">
271+
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
272+
</svg>
273+
<div class="arrow-label yes">YES</div>
274+
</div>
275+
<div class="node-content action">
276+
<svg class="icon" viewBox="0 0 24 24">
277+
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
278+
</svg>
279+
Filter Required MCP Tools from Repository
280+
</div>
281+
</div>
282+
283+
<div class="node">
284+
<div class="arrow">
285+
<svg viewBox="0 0 24 24">
286+
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
287+
</svg>
288+
<div class="arrow-label no">NO</div>
289+
</div>
290+
<div class="node-content action">
291+
<svg class="icon" viewBox="0 0 24 24">
292+
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
293+
</svg>
294+
Create Missing MCP Tools
295+
</div>
296+
</div>
297+
</div>
298+
299+
<!-- Row 5: Tool Creation Flow -->
300+
<div class="row">
301+
<div class="node">
302+
<div class="vertical-arrow">
303+
<svg viewBox="0 0 24 24">
304+
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
305+
</svg>
306+
</div>
307+
<div class="node-content process">
308+
<svg class="icon" viewBox="0 0 24 24">
309+
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
310+
</svg>
311+
MCP Tool Evaluation
312+
</div>
313+
</div>
314+
</div>
315+
316+
<!-- Row 6: Evaluation Decision -->
317+
<div class="row">
318+
<div class="node">
319+
<div class="arrow">
320+
<svg viewBox="0 0 24 24">
321+
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
322+
</svg>
323+
<div class="arrow-label yes">PASS</div>
324+
</div>
325+
<div class="node-content success">
326+
<svg class="icon" viewBox="0 0 24 24">
327+
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
328+
</svg>
329+
Add to Tool Registry
330+
</div>
331+
</div>
332+
333+
<div class="node">
334+
<div class="arrow">
335+
<svg viewBox="0 0 24 24">
336+
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
337+
</svg>
338+
<div class="arrow-label no">FAIL</div>
339+
</div>
340+
<div class="node-content failure">
341+
<svg class="icon" viewBox="0 0 24 24">
342+
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
343+
</svg>
344+
Discard Tool
345+
</div>
346+
</div>
347+
</div>
348+
349+
<!-- Row 7: Execution -->
350+
<div class="row">
351+
<div class="node">
352+
<div class="horizontal-arrow">
353+
<svg viewBox="0 0 24 24">
354+
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
355+
</svg>
356+
</div>
357+
<div class="node-content process">
358+
<svg class="icon" viewBox="0 0 24 24">
359+
<path d="M8 5v14l11-7z"/>
360+
</svg>
361+
Execute MCP Tools
362+
</div>
363+
</div>
364+
</div>
365+
366+
<!-- Row 8: Completion -->
367+
<div class="row">
368+
<div class="node">
369+
<div class="vertical-arrow">
370+
<svg viewBox="0 0 24 24">
371+
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
372+
</svg>
373+
</div>
374+
<div class="node-content start-end">
375+
<svg class="icon" viewBox="0 0 24 24">
376+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
377+
</svg>
378+
Task Completed
379+
</div>
380+
</div>
381+
</div>
382+
</div>
383+
</div>
384+
</body>
385+
</html>

0 commit comments

Comments
 (0)