MCP Inspector

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 />;
+}

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() {

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";
 

src/applications/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import exampleRegister from "./example";
 

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";

src/components/inspector/ConsoleTab.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { TabsContent } from "@/components/ui/tabs";
 
 const ConsoleTab = () => (

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";

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[];

src/components/inspector/PingTab.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 

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";

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";

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";

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";

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";

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";

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 }