feat: add convenience function isUIResource to client SDK (#86)

Author: liady

docs/src/guide/client/overview.md

@@ -7,6 +7,7 @@ The `@mcp-ui/client` package helps you render UI resources sent from an MCP-enab
 - **`<UIResourceRenderer />`**: The main component you'll use. It inspects the resource's `mimeType` and renders either `<HTMLResourceRenderer />` or `<RemoteDOMResourceRenderer />` internally.
 - **`<HTMLResourceRenderer />`**: Internal component for HTML/URL resources
 - **`<RemoteDOMResourceRenderer />`**: Internal component for remote DOM resources
+- **`isUIResource()`**: Utility function to check if content is a UI resource (replaces manual `content.type === 'resource' && content.resource.uri?.startsWith('ui://')` checks)
 
 ## Purpose
 - **Standardized UI**: mcp-ui's client guarantees full compatibility with the latest MCP UI standards.

docs/src/guide/client/react-usage-examples.md

@@ -21,7 +21,8 @@ import {
   UIActionResult,
   basicComponentLibrary,
   remoteTextDefinition,
-  remoteButtonDefinition
+  remoteButtonDefinition,
+  isUIResource
 } from '@mcp-ui/client';
 
 const remoteDomScript = `
@@ -83,7 +84,8 @@ import {
   UIActionResult,
   basicComponentLibrary,
   remoteTextDefinition,
-  remoteButtonDefinition
+  remoteButtonDefinition,
+  isUIResource
 } from '@mcp-ui/client';
 
 // Simulate fetching an MCP UI resource
@@ -230,6 +232,52 @@ export default App;
 
 ---
 
+## Using the `isUIResource` Utility
+
+Instead of manually checking if content is a UI resource, you can use the `isUIResource()` utility function:
+
+```tsx
+import React from 'react';
+import { UIResourceRenderer, isUIResource } from '@mcp-ui/client';
+
+function ResourceList({ mcpResponses }) {
+  return (
+    <div>
+      {mcpResponses.map((response, index) => {
+        // Use isUIResource instead of manual checking
+        if (isUIResource(response)) {
+          return (
+            <div key={index}>
+              <h3>UI Resource: {response.resource.uri}</h3>
+              <UIResourceRenderer 
+                resource={response.resource} 
+                onUIAction={handleAction}
+              />
+            </div>
+          );
+        }
+        
+        // Handle other response types
+        return (
+          <div key={index}>
+            <p>Non-UI content: {response.type}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+This is equivalent to the manual check:
+```typescript
+response.type === 'resource' && response.resource.uri?.startsWith('ui://')
+```
+
+But provides better type safety and is more concise.
+
+---
+
 ## Handling Asynchronous Actions with Message IDs
 
 When an action from the iframe requires asynchronous processing on the host, the `messageId` property can be used to track the action's lifecycle and result. This allows the iframe to fetch data from the host, present feedback to the user (e.g., loading indicators), success messages, etc.

docs/src/guide/client/resource-renderer.md

@@ -76,7 +76,7 @@ See [Custom Component Libraries](./custom-component-libraries.md) for a detailed
 
 ```tsx
 import React from 'react';
-import { UIResourceRenderer, UIActionResult } from '@mcp-ui/client';
+import { UIResourceRenderer, UIActionResult, isUIResource } from '@mcp-ui/client';
 
 function App({ mcpResource }) {
   const handleUIAction = async (result: UIActionResult) => {
@@ -105,10 +105,7 @@ function App({ mcpResource }) {
     return { status: 'handled' };
   };
 
-  if (
-    mcpResource.type === 'resource' &&
-    mcpResource.resource.uri?.startsWith('ui://')
-  ) {
+  if (isUIResource(mcpResource)) {
     return (
       <UIResourceRenderer
         resource={mcpResource.resource}
@@ -121,6 +118,28 @@ function App({ mcpResource }) {
 }
 ```
 
+## Utility Functions
+
+### `isUIResource()`
+
+The `isUIResource()` utility function is a convenient way to check if content from an MCP response is a UI resource. Instead of manually checking:
+
+```typescript
+content.type === 'resource' && content.resource.uri?.startsWith('ui://')
+```
+
+You can simply use:
+
+```typescript
+import { isUIResource } from '@mcp-ui/client';
+
+if (isUIResource(content)) {
+  // This is a UI resource, safe to render
+}
+```
+
+The function provides type narrowing, so TypeScript will understand that `content.resource` is available after the check.
+
 ## Advanced Usage
 
 ### Content Type Restrictions

sdks/typescript/client/src/index.ts

@@ -1,4 +1,5 @@
 export { UIResourceRenderer } from './components/UIResourceRenderer';
+export { isUIResource } from './utils/isUIResource';
 
 // The types needed to create a custom component library
 export type {

sdks/typescript/client/src/utils/__tests__/isUIResource.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { isUIResource } from '../isUIResource';
+
+describe('isUIResource', () => {
+
+    const uiResources = [
+        { type: 'resource', resource: { uri: 'ui://test' } },
+        { type: 'resource', resource: { uri: 'ui://test', mimeType: 'text/html', text: 'Hello, world!' }, arbitraryProp: 'arbitrary' },
+        { type: 'resource', resource: { uri: 'ui://test', mimeType: 'text/uri-list', text: 'https://example.com' } },
+        { type: 'resource', resource: { uri: 'ui://test', mimeType: 'application/vnd.mcp-ui.remote-dom', text: 'Hello, world!' } },
+    ]
+
+    const nonUiResources = [
+        { type: 'resource', resource: { uri: 'https://example.com' } },
+        { type: 'text', text: 'Hello, world!' },
+        { type: 'text', resource: { uri: 'ui://test' } },
+    ]
+
+    it(`should return true if the content is a UI resource: ${JSON.stringify(uiResources)}`, () => {
+        uiResources.forEach(content => {
+            expect(isUIResource(content)).toBe(true);
+        });
+    });
+
+    nonUiResources.forEach(content => {
+        it(`should return false if the content is not a UI resource: ${JSON.stringify(content)}`, () => {
+            expect(isUIResource(content)).toBe(false);
+        });
+    });
+
+    it('should return false if the content is not a UI resource', () => {
+        const content = { type: 'resource', resource: { uri: 'https://example.com' } };
+        expect(isUIResource(content)).toBe(false);
+    });
+});

sdks/typescript/client/src/utils/isUIResource.ts

@@ -0,0 +1,5 @@
+import type { Resource } from '@modelcontextprotocol/sdk/types.js';
+
+export function isUIResource<T extends { type: string; resource?: Partial<Resource> }>(content: T): content is T & { type: 'resource'; resource: Partial<Resource> } {
+    return (content.type === 'resource' && content.resource?.uri?.startsWith('ui://')) ?? false;
+}