Merge pull request #30 from modelcontextprotocol/justin/npm

Switch to `npm`

.gitattributes

@@ -1,2 +1 @@
-yarn.lock linguist-generated=true
-packages/**/* linguist-generated=true
+package-lock.json linguist-generated=true

.github/workflows/main.yml

@@ -0,0 +1,37 @@
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - uses: actions/checkout@v4
+        with:
+          repository: modelcontextprotocol/typescript-sdk
+          ssh-key: ${{ secrets.TYPESCRIPT_SDK_KEY }}
+          path: packages/@modelcontextprotocol/sdk
+
+      - run: npm ci
+        working-directory: packages/@modelcontextprotocol/sdk
+
+      - run: npm pack
+        working-directory: packages/@modelcontextprotocol/sdk
+
+      - run: npm install --save packages/@modelcontextprotocol/sdk/modelcontextprotocol-sdk-*.tgz
+
+      # Working around https://github.com/npm/cli/issues/4828
+      # - run: npm ci
+      - run: npm install --no-package-lock
+      - run: npm run build

README.md

@@ -5,20 +5,20 @@ The MCP inspector is a developer tool for testing and debugging MCP servers.
 Setup:
 
 ```bash
-yarn
+npm install
 ```
 
 You can run it in dev mode via:
 
 ```bash
-yarn dev
+npm run dev
 ```
 
 This will start both the client and server.
 
 To run in production mode:
 
 ```bash
-yarn build
-yarn start
+npm run build
+npm start
 ```

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@modelcontextprotocol/sdk": "*",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
@@ -18,7 +19,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.447.0",
-    "mcp-typescript": "file:../packages/mcp-typescript",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.3",

client/src/App.tsx

@@ -1,50 +1,50 @@
-import { Client } from "mcp-typescript/client/index.js";
-import { SSEClientTransport } from "mcp-typescript/client/sse.js";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
-  ListResourcesResultSchema,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  CallToolResultSchema,
+  ClientRequest,
+  EmptyResultSchema,
   GetPromptResultSchema,
+  ListPromptsResultSchema,
+  ListResourcesResultSchema,
   ListToolsResultSchema,
+  ProgressNotificationSchema,
   ReadResourceResultSchema,
-  CallToolResultSchema,
-  ListPromptsResultSchema,
   Resource,
-  Tool,
-  ClientRequest,
-  ProgressNotificationSchema,
   ServerNotification,
-  EmptyResultSchema,
-} from "mcp-typescript/types.js";
-import { useState, useRef, useEffect } from "react";
+  Tool,
+} from "@modelcontextprotocol/sdk/types.js";
 import {
-  Send,
-  Terminal,
-  Files,
   Bell,
-  MessageSquare,
+  Files,
   Hammer,
+  MessageSquare,
   Play,
+  Send,
+  Terminal,
 } from "lucide-react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { useEffect, useRef, useState } from "react";
 
+import { AnyZodObject } from "zod";
+import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
-import Sidebar from "./components/Sidebar";
+import HistoryAndNotifications from "./components/History";
+import PingTab from "./components/PingTab";
+import PromptsTab, { Prompt } from "./components/PromptsTab";
 import RequestsTab from "./components/RequestsTabs";
 import ResourcesTab from "./components/ResourcesTab";
-import PromptsTab, { Prompt } from "./components/PromptsTab";
+import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
-import { AnyZodObject } from "zod";
-import HistoryAndNotifications from "./components/History";
-import "./App.css";
-import PingTab from "./components/PingTab";
 
 const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<

client/src/components/History.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
 import { Copy } from "lucide-react";
-import { ServerNotification } from "mcp-typescript/types.js";
+import { useState } from "react";
 
 const HistoryAndNotifications = ({
   requestHistory,

client/src/components/PromptsTab.tsx

@@ -1,13 +1,13 @@
-import { AlertCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle } from "lucide-react";
 import { useState } from "react";
-import { Label } from "@/components/ui/label";
 import ListPane from "./ListPane";
-import { ListPromptsResult } from "mcp-typescript/types.js";
 
 export type Prompt = {
   name: string;

client/src/components/ResourcesTab.tsx

@@ -1,8 +1,8 @@
-import { FileText, ChevronRight, AlertCircle, RefreshCw } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { TabsContent } from "@/components/ui/tabs";
-import { ListResourcesResult, Resource } from "mcp-typescript/types.js";
+import { ListResourcesResult, Resource } from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
 
 const ResourcesTab = ({

client/src/components/ToolsTab.tsx

@@ -1,11 +1,11 @@
-import { TabsContent } from "@/components/ui/tabs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Send, AlertCircle } from "lucide-react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ListToolsResult, Tool } from "mcp-typescript/types.js";
-import { useState } from "react";
 import { Label } from "@/components/ui/label";
+import { TabsContent } from "@/components/ui/tabs";
+import { ListToolsResult, Tool } from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle, Send } from "lucide-react";
+import { useState } from "react";
 import ListPane from "./ListPane";
 
 const ToolsTab = ({