Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ function MyAIComponent() {
tools, // Available tools from MCP server
resources, // Available resources from MCP server
prompts, // Available prompts from MCP server
serverInfo, // Server name and version from initialize response
serverCapabilities, // Server capabilities from initialize response
protocolVersion,// Negotiated MCP protocol version
error, // Error message if connection failed
callTool, // Function to call tools on the MCP server
readResource, // Function to read resource contents
Expand Down Expand Up @@ -108,6 +111,10 @@ function MyAIComponent() {

return (
<div>
{/* Show server information */}
{serverInfo && (
<p>Connected to: {serverInfo.name} v{serverInfo.version}</p>
)}
<h2>Available Tools: {tools.length}</h2>
<ul>
{tools.map(tool => (
Expand Down Expand Up @@ -238,6 +245,9 @@ function useMcp(options: UseMcpOptions): UseMcpResult
| `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 |
| `serverInfo` | `{ name: string; version: string } \| undefined` | Server information from the initialize response (name and version) |
| `serverCapabilities` | `Record<string, any> \| undefined` | Server capabilities from the initialize response |
| `protocolVersion` | `string \| undefined` | Protocol version negotiated during initialization |
| `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 |
Expand Down
3 changes: 3 additions & 0 deletions src/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,9 @@ export default MyChatComponent
- resources: An array of Resource objects representing data available from the server.
- resourceTemplates: An array of ResourceTemplate objects representing dynamic resources available from the server.
- prompts: An array of Prompt objects representing reusable prompt templates from the server.
- serverInfo: An object containing server metadata from the initialize response (name and version). Available after successful connection.
- serverCapabilities: An object containing server capabilities from the initialize response. Available after successful connection.
- protocolVersion: A string containing the negotiated MCP protocol version. Available after successful connection.
- state: The current connection state ('discovering', 'authenticating', 'connecting', 'loading', 'ready', 'failed'). Use this to conditionally render UI or enable/disable features.
- error: An error message if state is 'failed'.
- authUrl: If authentication is required and the popup was potentially blocked, this URL string can be used to let the user manually open the auth page (e.g., <a href={authUrl} target="_blank">...</a>).
Expand Down
4 changes: 4 additions & 0 deletions src/react/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@ export type { UseMcpOptions, UseMcpResult } from './types.js'

// Re-export core types for convenience when using hook result
export type { Tool, Resource, ResourceTemplate, Prompt } from '@modelcontextprotocol/sdk/types.js'

// Export server information types for TypeScript users
export type ServerInfo = { name: string; version: string }
export type ServerCapabilities = Record<string, any>
6 changes: 6 additions & 0 deletions src/react/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ export type UseMcpResult = {
resourceTemplates: ResourceTemplate[]
/** List of prompts available from the connected MCP server */
prompts: Prompt[]
/** Server information from the initialize response (name, version) */
serverInfo?: { name: string; version: string }
/** Server capabilities from the initialize response */
serverCapabilities?: Record<string, any>
/** Protocol version negotiated during initialization */
protocolVersion?: string
/**
* The current state of the MCP connection:
* - 'discovering': Checking server existence and capabilities (including auth requirements).
Expand Down
46 changes: 44 additions & 2 deletions src/react/useMcp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,11 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
const [resources, setResources] = useState<Resource[]>([])
const [resourceTemplates, setResourceTemplates] = useState<ResourceTemplate[]>([])
const [prompts, setPrompts] = useState<Prompt[]>([])
const [serverInfo, setServerInfo] = useState<{ name: string; version: string } | undefined>(undefined)
const [serverCapabilities, setServerCapabilities] = useState<Record<string, any> | undefined>(undefined)
const [protocolVersion, setProtocolVersion] = useState<string | undefined>(undefined)
const [error, setError] = useState<string | undefined>(undefined)
const [log, setLog] = useState<UseMcpResult['log']>([])
const [log, setLog] = useState<UseMcpResult['log']>([])
const [authUrl, setAuthUrl] = useState<string | undefined>(undefined)

const clientRef = useRef<Client | null>(null)
Expand Down Expand Up @@ -114,6 +117,9 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
setResources([])
setResourceTemplates([])
setPrompts([])
setServerInfo(undefined)
setServerCapabilities(undefined)
setProtocolVersion(undefined)
setError(undefined)
setAuthUrl(undefined)
}
Expand Down Expand Up @@ -301,13 +307,46 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
addLog('debug', `About to call client.connect() with transport instance`)
addLog('debug', `Transport instance type: ${transportInstance.constructor.name}`)

await clientRef.current!.connect(transportInstance)
const initializeResponse = await clientRef.current!.connect(transportInstance)

// --- Success Path ---
addLog('info', `Client connected via ${transportType.toUpperCase()}. Loading tools, resources, and prompts...`)
successfulTransportRef.current = transportType // Store successful type
setState('loading')

// Capture server information from initialize response
if (initializeResponse && typeof initializeResponse === 'object') {
const response = initializeResponse as any
if (response.serverInfo) {
setServerInfo(response.serverInfo)
addLog('debug', `Server info: ${response.serverInfo.name} v${response.serverInfo.version}`)
}
if (response.capabilities) {
setServerCapabilities(response.capabilities)
addLog('debug', `Server capabilities:`, response.capabilities)
}
if (response.protocolVersion) {
setProtocolVersion(response.protocolVersion)
addLog('debug', `Protocol version: ${response.protocolVersion}`)
}
} else {
// Try to access server info from client properties if available
const client = clientRef.current as any
if (client.serverInfo) {
setServerInfo(client.serverInfo)
addLog('debug', `Server info from client: ${client.serverInfo.name} v${client.serverInfo.version}`)
}
if (client.serverCapabilities || client.capabilities) {
const caps = client.serverCapabilities || client.capabilities
setServerCapabilities(caps)
addLog('debug', `Server capabilities from client:`, caps)
}
if (client.protocolVersion) {
setProtocolVersion(client.protocolVersion)
addLog('debug', `Protocol version from client: ${client.protocolVersion}`)
}
}

const toolsResponse = await clientRef.current!.request({ method: 'tools/list' }, ListToolsResultSchema)

// Load resources after tools (optional - not all servers support resources)
Expand Down Expand Up @@ -832,6 +871,9 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
resources,
resourceTemplates,
prompts,
serverInfo,
serverCapabilities,
protocolVersion,
error,
log,
authUrl,
Expand Down