Exposes additional server information

[feons]

Captures server information which is available immediately after the connection state reaches 'ready', giving developers full access to everything the MCP server provides during initialization.

New Fields Available

serverInfo

Contains server metadata from the initialize response:

• name: The name of the MCP server
• version: The version of the MCP server

serverCapabilities

Contains the capabilities advertised by the server during initialization. This is a flexible object that can contain various capability flags and configuration options.

protocolVersion

The negotiated MCP protocol version between client and server.

Motivation and Context

• Server Identification: Display server name/version in UI

• Feature Detection: Conditionally enable features based on server capabilities

• Protocol Compatibility: Check negotiated protocol version

• Enhanced Debugging: Better understanding of server configuration

• Dynamic UX: Adapt interface based on what the server supports

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Checklist

• I have read the MCP Documentation
• My code follows the repository's style guidelines
• New and existing tests pass locally
• I have added appropriate error handling
• I have added or updated documentation as needed

Usage Example

import { useMcp } from 'use-mcp/react'

function McpServerInfo() {
  const { 
    state, 
    serverInfo, 
    serverCapabilities, 
    protocolVersion,
    tools,
    resources 
  } = useMcp({
    url: 'https://your-mcp-server.com/sse'
  })

  if (state !== 'ready') {
    return <div>Connecting...</div>
  }

  return (
    <div>
      <h2>Server Information</h2>
      {serverInfo && (
        <div>
          <p><strong>Server:</strong> {serverInfo.name} v{serverInfo.version}</p>
        </div>
      )}
      
      {protocolVersion && (
        <p><strong>Protocol Version:</strong> {protocolVersion}</p>
      )}
      
      {serverCapabilities && (
        <div>
          <h3>Server Capabilities</h3>
          <ul>
            {Object.entries(serverCapabilities).map(([key, value]) => (
              <li key={key}>
                <strong>{key}:</strong> {JSON.stringify(value)}
              </li>
            ))}
          </ul>
        </div>
      )}
      
      <div>
        <h3>Available Features</h3>
        <p>Tools: {tools.length}</p>
        <p>Resources: {resources.length}</p>
      </div>
    </div>
  )
}