mcpzip 0.1.0

MCP proxy that aggregates multiple servers behind search + execute meta-tools
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

import React from "react";

const stepColors = [
  "96, 165, 250",
  "92, 245, 61",
  "167, 139, 250",
  "251, 191, 36",
  "52, 211, 153",
  "248, 113, 113",
];

function Step({ number, title, description, color, isLast }) {
  return (
    <div style={{ display: "flex", gap: "16px", alignItems: "flex-start" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
        <div style={{
          width: "36px",
          height: "36px",
          borderRadius: "50%",
          background: `rgba(${color}, 0.12)`,
          border: `2px solid rgba(${color}, 0.4)`,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "14px",
          fontWeight: 700,
          color: `rgba(${color}, 1)`,
        }}>
          {number}
        </div>
        {!isLast && (
          <div style={{
            width: "2px",
            height: "40px",
            background: `linear-gradient(to bottom, rgba(${color}, 0.3), rgba(255,255,255,0.05))`,
            marginTop: "4px",
          }} />
        )}
      </div>
      <div style={{ paddingTop: "4px", paddingBottom: isLast ? 0 : "20px" }}>
        <div style={{
          fontSize: "15px",
          fontWeight: 600,
          color: `rgba(${color}, 1)`,
          marginBottom: "4px",
        }}>
          {title}
        </div>
        <div style={{
          fontSize: "13px",
          color: "rgba(255,255,255,0.55)",
          lineHeight: 1.6,
        }}>
          {description}
        </div>
      </div>
    </div>
  );
}

export default function FlowDiagram({ steps }) {
  return (
    <div style={{
      background: "rgba(255,255,255,0.02)",
      border: "1px solid rgba(255,255,255,0.06)",
      borderRadius: "14px",
      padding: "24px",
      margin: "24px 0",
    }}>
      {steps.map((step, i) => (
        <Step
          key={i}
          number={i + 1}
          title={step.title}
          description={step.description}
          color={stepColors[i % stepColors.length]}
          isLast={i === steps.length - 1}
        />
      ))}
    </div>
  );
}