Got AMP to rip out the guts of the chat ui to make an inspector

examples/inspector/README.md

@@ -1,30 +1,45 @@
-# AI chat template
+# MCP Inspector
 
-An unofficial template for ⚛️ React ⨉ ⚡️ Vite ⨉ ⛅️ Cloudflare Workers AI.
+A minimal demo showcasing the `use-mcp` React hook for connecting to Model Context Protocol (MCP) servers.
 
-Full-stack AI chat application using Workers for the APIs (using the Cloudflare [vite-plugin](https://www.npmjs.com/package/@cloudflare/vite-plugin)) and Vite for the React application (hosted using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/)). Provides chat functionality with [Workers AI](https://developers.cloudflare.com/workers-ai/), stores conversations in the browser's [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and uses [ai-sdk](https://sdk.vercel.ai/docs/introduction), [tailwindcss](https://tailwindcss.com/) and [workers-ai-provider](https://github.com/cloudflare/workers-ai-provider).
+## Features
 
-## Get started
+- Connect to any MCP server via URL
+- View available tools and their schemas
+- Real-time connection status monitoring
+- Debug logging for troubleshooting
+- Clean, minimal UI focused on MCP functionality
 
-Create the project using [create-cloudflare](https://www.npmjs.com/package/create-cloudflare):
+## Getting Started
 
-```sh
-npm create cloudflare@latest -- --template thomasgauvin/ai-chat-template
+1. Install dependencies:
+   ```bash
+   pnpm install
+   ```
+
+2. Start the development server:
+   ```bash
+   pnpm dev
+   ```
+
+3. Open your browser and navigate to the displayed local URL
+
+4. Enter an MCP server URL to test the connection and explore available tools
+
+## What This Demonstrates
+
+This example shows how easy it is to integrate MCP servers into a React application using the `use-mcp` hook. The core functionality is just:
+
+```tsx
+import { useMcp } from 'use-mcp/react'
+
+const connection = useMcp({
+  url: 'your-mcp-server-url',
+  debug: true,
+  autoRetry: false
+})
+
+// Access connection.state, connection.tools, connection.error, etc.
 ```
 
-Run the project and deploy it:
-
-```sh
-cd <project-name>
-npm install
-npm run dev
-```
-
-```
-npm run deploy
-```
-
-## What's next?
-
-- Change the name of the package (in `package.json`)
-- Change the name of the worker (in `wrangler.jsonc`)
+The `McpServers` component wraps this hook to provide a complete UI for server management and tool inspection.