From 6524aaf9c778b11b2aad4b46e09ab44ab827811f Mon Sep 17 00:00:00 2001
From: Junjie <2721795866@qq.com>
Date: Sat, 30 Nov 2024 23:45:12 +0800
Subject: [PATCH] MCP Inspector

---
 .../playground/inspector/page.tsx             | 11 ++++
 src/app/organization/playground/page.tsx      |  8 ++-
 src/applications/base/mcp/server/inner.ts     |  2 +-
 src/applications/index.tsx                    |  2 +
 src/applications/inspector/index.tsx          |  2 +
 src/components/inspector/ConsoleTab.tsx       |  2 +
 src/components/inspector/History.tsx          |  2 +
 src/components/inspector/ListPane.tsx         |  4 +-
 src/components/inspector/PingTab.tsx          |  2 +
 src/components/inspector/PromptsTab.tsx       |  2 +
 src/components/inspector/ResourcesTab.tsx     |  2 +
 src/components/inspector/RootsTab.tsx         |  2 +
 src/components/inspector/SamplingTab.tsx      |  2 +
 src/components/inspector/Sidebar.tsx          |  2 +
 src/components/inspector/ToolsTab.tsx         |  2 +
 src/components/ui/alert.tsx                   | 59 +++++++++++++++++++
 16 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 src/app/organization/playground/inspector/page.tsx
 create mode 100644 src/components/ui/alert.tsx

diff --git a/src/app/organization/playground/inspector/page.tsx b/src/app/organization/playground/inspector/page.tsx
new file mode 100644
index 0000000..2eb0c1a
--- /dev/null
+++ b/src/app/organization/playground/inspector/page.tsx
@@ -0,0 +1,11 @@
+import Inspector from "@/applications/inspector";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Inspector",
+  description: "XP - playgrounds, projects and more.",
+};
+
+export default function DashboardPage() {
+  return <Inspector />;
+}
diff --git a/src/app/organization/playground/page.tsx b/src/app/organization/playground/page.tsx
index ac85fa1..0829eb8 100644
--- a/src/app/organization/playground/page.tsx
+++ b/src/app/organization/playground/page.tsx
@@ -2,7 +2,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { ImageIcon } from "lucide-react";
+import { BlocksIcon, ImageIcon } from "lucide-react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 
@@ -13,6 +13,12 @@ const playgrounds = [
     img: "/generate-image.png",
     icon: <ImageIcon />,
   },
+  {
+    route: "inspector",
+    name: "Inspector",
+    img: "/generate-image.png",
+    icon: <BlocksIcon />,
+  },
 ];
 
 export default function Home() {
diff --git a/src/applications/base/mcp/server/inner.ts b/src/applications/base/mcp/server/inner.ts
index f74a216..dfc0bac 100644
--- a/src/applications/base/mcp/server/inner.ts
+++ b/src/applications/base/mcp/server/inner.ts
@@ -1,5 +1,5 @@
 import { Runner } from "../../runner";
-import { ReadBuffer, serializeMessage } from "../shared/inner.js";
+import { ReadBuffer, serializeMessage } from "../shared/inner";
 import { JSONRPCMessage } from "@modelcontextprotocol/sdk/types.js";
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 
diff --git a/src/applications/index.tsx b/src/applications/index.tsx
index 711e143..99f6ea6 100644
--- a/src/applications/index.tsx
+++ b/src/applications/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import exampleRegister from "./example";
 
diff --git a/src/applications/inspector/index.tsx b/src/applications/inspector/index.tsx
index cbad97c..7cbb4e4 100644
--- a/src/applications/inspector/index.tsx
+++ b/src/applications/inspector/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import { InnerClientTransport } from "../base/mcp/client/inner";
diff --git a/src/components/inspector/ConsoleTab.tsx b/src/components/inspector/ConsoleTab.tsx
index 8f05f70..f112aff 100644
--- a/src/components/inspector/ConsoleTab.tsx
+++ b/src/components/inspector/ConsoleTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { TabsContent } from "@/components/ui/tabs";
 
 const ConsoleTab = () => (
diff --git a/src/components/inspector/History.tsx b/src/components/inspector/History.tsx
index 532d3b1..2caba4f 100644
--- a/src/components/inspector/History.tsx
+++ b/src/components/inspector/History.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
 import { Copy } from "lucide-react";
 import { useState } from "react";
diff --git a/src/components/inspector/ListPane.tsx b/src/components/inspector/ListPane.tsx
index 5fca6a4..8decf5e 100644
--- a/src/components/inspector/ListPane.tsx
+++ b/src/components/inspector/ListPane.tsx
@@ -1,4 +1,6 @@
-import { Button } from "./ui/button";
+"use client";
+
+import { Button } from "@/components/ui/button";
 
 type ListPaneProps<T> = {
   items: T[];
diff --git a/src/components/inspector/PingTab.tsx b/src/components/inspector/PingTab.tsx
index e963a26..4853143 100644
--- a/src/components/inspector/PingTab.tsx
+++ b/src/components/inspector/PingTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 
diff --git a/src/components/inspector/PromptsTab.tsx b/src/components/inspector/PromptsTab.tsx
index 12645cf..5a18002 100644
--- a/src/components/inspector/PromptsTab.tsx
+++ b/src/components/inspector/PromptsTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
diff --git a/src/components/inspector/ResourcesTab.tsx b/src/components/inspector/ResourcesTab.tsx
index b1224f1..6f65a04 100644
--- a/src/components/inspector/ResourcesTab.tsx
+++ b/src/components/inspector/ResourcesTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
diff --git a/src/components/inspector/RootsTab.tsx b/src/components/inspector/RootsTab.tsx
index 33f60d5..1ed166a 100644
--- a/src/components/inspector/RootsTab.tsx
+++ b/src/components/inspector/RootsTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
diff --git a/src/components/inspector/SamplingTab.tsx b/src/components/inspector/SamplingTab.tsx
index d851880..f637485 100644
--- a/src/components/inspector/SamplingTab.tsx
+++ b/src/components/inspector/SamplingTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { TabsContent } from "@/components/ui/tabs";
diff --git a/src/components/inspector/Sidebar.tsx b/src/components/inspector/Sidebar.tsx
index 44b1419..ee60af1 100644
--- a/src/components/inspector/Sidebar.tsx
+++ b/src/components/inspector/Sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { Play, ChevronDown, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
diff --git a/src/components/inspector/ToolsTab.tsx b/src/components/inspector/ToolsTab.tsx
index 7b85ccc..d47fc68 100644
--- a/src/components/inspector/ToolsTab.tsx
+++ b/src/components/inspector/ToolsTab.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..41fa7e0
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }