Merge pull request #5 from jem-computer/feat/resources-and-prompts

Feat/resources and prompts

Author: geelen

README.md

@@ -25,6 +25,9 @@ yarn add use-mcp
 - 🔄 Automatic connection management with reconnection and retries
 - 🔐 OAuth authentication flow handling with popup and fallback support
 - 📦 Simple React hook interface for MCP integration
+- 🧰 Full support for MCP tools, resources, and prompts
+- 📄 Access server resources and read their contents
+- 💬 Use server-provided prompt templates
 - 🧰 TypeScript types for editor assistance and type checking
 - 📝 Comprehensive logging for debugging
 - 🌐 Works with both HTTP and SSE (Server-Sent Events) transports
@@ -38,8 +41,12 @@ function MyAIComponent() {
   const {
     state,          // Connection state: 'discovering' | 'pending_auth' | 'authenticating' | 'connecting' | 'loading' | 'ready' | 'failed'
     tools,          // Available tools from MCP server
+    resources,      // Available resources from MCP server
+    prompts,        // Available prompts from MCP server
     error,          // Error message if connection failed
     callTool,       // Function to call tools on the MCP server
+    readResource,   // Function to read resource contents
+    getPrompt,      // Function to get prompt messages
     retry,          // Retry connection manually
     authenticate,   // Manually trigger authentication
     clearStorage,   // Clear stored tokens and credentials
@@ -83,6 +90,32 @@ function MyAIComponent() {
         ))}
       </ul>
       <button onClick={handleSearch}>Search</button>
+      
+      {/* Example: Display and read resources */}
+      {resources.length > 0 && (
+        <div>
+          <h3>Resources: {resources.length}</h3>
+          <button onClick={async () => {
+            const content = await readResource(resources[0].uri)
+            console.log('Resource content:', content)
+          }}>
+            Read First Resource
+          </button>
+        </div>
+      )}
+      
+      {/* Example: Use prompts */}
+      {prompts.length > 0 && (
+        <div>
+          <h3>Prompts: {prompts.length}</h3>
+          <button onClick={async () => {
+            const result = await getPrompt(prompts[0].name)
+            console.log('Prompt messages:', result.messages)
+          }}>
+            Get First Prompt
+          </button>
+        </div>
+      )}
     </div>
   )
 }
@@ -176,10 +209,17 @@ function useMcp(options: UseMcpOptions): UseMcpResult
 |----------|------|-------------|
 | `state` | `string` | Current connection state: 'discovering', 'pending_auth', 'authenticating', 'connecting', 'loading', 'ready', 'failed' |
 | `tools` | `Tool[]` | Available tools from the MCP server |
+| `resources` | `Resource[]` | Available resources from the MCP server |
+| `resourceTemplates` | `ResourceTemplate[]` | Available resource templates from the MCP server |
+| `prompts` | `Prompt[]` | Available prompts from the MCP server |
 | `error` | `string \| undefined` | Error message if connection failed |
 | `authUrl` | `string \| undefined` | Manual authentication URL if popup is blocked |
 | `log` | `{ level: 'debug' \| 'info' \| 'warn' \| 'error'; message: string; timestamp: number }[]` | Array of log messages |
 | `callTool` | `(name: string, args?: Record<string, unknown>) => Promise<any>` | Function to call a tool on the MCP server |
+| `listResources` | `() => Promise<void>` | Refresh the list of available resources |
+| `readResource` | `(uri: string) => Promise<{ contents: Array<...> }>` | Read the contents of a specific resource |
+| `listPrompts` | `() => Promise<void>` | Refresh the list of available prompts |
+| `getPrompt` | `(name: string, args?: Record<string, string>) => Promise<{ messages: Array<...> }>` | Get a specific prompt with optional arguments |
 | `retry` | `() => void` | Manually attempt to reconnect |
 | `disconnect` | `() => void` | Disconnect from the MCP server |
 | `authenticate` | `() => void` | Manually trigger authentication |

examples/inspector/README.md

@@ -6,6 +6,8 @@ A minimal demo showcasing the `use-mcp` React hook for connecting to Model Conte
 
 - Connect to any MCP server via URL
 - View available tools and their schemas
+- Browse and read server resources
+- Interact with server-provided prompts
 - Real-time connection status monitoring
 - Debug logging for troubleshooting
 - Clean, minimal UI focused on MCP functionality
@@ -31,7 +33,7 @@ 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
+4. Enter an MCP server URL to test the connection and explore available tools, resources, and prompts
 
 ## What This Demonstrates
 
@@ -46,7 +48,17 @@ const connection = useMcp({
   autoRetry: false
 })
 
-// Access connection.state, connection.tools, connection.error, etc.
+// Access connection.state, connection.tools, connection.resources, 
+// connection.prompts, connection.error, etc.
 ```
 
-The `McpServers` component wraps this hook to provide a complete UI for server management and tool inspection.
+The `McpServers` component wraps this hook to provide a complete UI for server management, tool inspection, resource browsing, and prompt interaction.
+
+## Supported MCP Features
+
+- **Tools**: Execute server-provided tools with custom arguments and view results
+- **Resources**: Browse available resources and read their contents (text or binary)
+- **Resource Templates**: View dynamic resource templates with URI patterns
+- **Prompts**: Interact with server prompts, provide arguments, and view generated messages
+
+Note: Not all MCP servers implement all features. The inspector will gracefully handle servers that only support a subset of the MCP specification.