The Inspector page is the core of Kunna MCP Client. Before you can explore tools, prompts, or resources, you must first establish a connection by configuring the transport protocol, the server URL, and any optional authentication credentials. Once connected, the inspector performs the full MCP initialize handshake and immediately populates the sidebar with everything the server exposes.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/vancovx/KunnaClienteMCP/llms.txt
Use this file to discover all available pages before exploring further.
Connection form
Each field in the connection bar maps directly to a property passed toMcpConnection.connect().
The transport protocol to use. Accepted values are
"http" (Streamable HTTP) and "sse" (Server-Sent Events). Streamable HTTP is the recommended modern transport; SSE is provided for compatibility with legacy MCP servers that do not support the newer protocol.The full URL of the MCP server endpoint, for example
http://localhost:3001/mcp. The value is passed directly to the transport constructor as a URL object, so it must be a valid absolute URL including the scheme.The authentication strategy. Defaults to
"none". Set to "bearer" to enable token-based authentication. When "none" is selected, no Authorization header is added to outgoing requests.Only visible when
authType is "bearer". The token value to send on every request as Authorization: Bearer <token>. The field is rendered as a password input so the token is not displayed in plain text.Connecting step by step
Open the Inspector tab
Click Inspector in the application navigation bar. The connection bar appears at the top of the page, pre-filled with the default URL
http://localhost:3001/mcp and the HTTP transport.Choose a transport
Select HTTP or SSE from the transport dropdown. Choose HTTP unless you are connecting to an older server that only speaks SSE.
Enter the server URL
Type the full URL of your MCP server endpoint into the URL field. Include the scheme (
http:// or https://) and the exact path, for example http://localhost:3001/mcp.Configure authentication (optional)
If the server requires authentication, change the auth dropdown from Sin auth to Bearer and paste your token into the password field that appears. If no auth is required, leave the dropdown set to Sin auth.
Click Conectar
Press the Conectar button. The button label changes to Conectando… while the handshake is in progress. The activity console at the bottom of the page logs the outgoing connection request immediately.
What happens during connection
When you click Conectar, the inspector executes the following sequence insideMcpConnection.connect():
-
Transport creation. Depending on the selected transport, either a
StreamableHTTPClientTransportor anSSEClientTransportfrom the@modelcontextprotocol/sdkpackage is instantiated with the target URL. If a Bearer token was provided, it is included in every request via theAuthorizationheader through therequestInit.headersoption. -
Client creation. A new
Clientinstance is created, identifying itself to the server as"mi-inspector-tfg-web"version"0.1.0"with an empty initial capabilities object. -
Handshake.
client.connect(transport)is called, which performs the MCPinitialize/initializedexchange. After this pointclient.getServerCapabilities()andclient.getServerVersion()are available. -
Capability discovery. The client reads the server’s declared capabilities. It then calls
listTools(),listPrompts(), andlistResources()in parallel usingPromise.all. Any capability the server does not advertise results in an empty array rather than an error. -
State update. The returned object — containing
serverInfo,capabilities,tools,prompts, andresources— is stored in the inspector’s React state. The UI re-renders to show the sidebar and the green server badge.
Disconnecting
While the inspector is connected, the Conectar button is replaced by a red Desconectar button. Clicking it:- Logs a
→ MCP desconectandoentry to the activity console. - Calls
McpConnection.disconnect(), which invokesclient.close()on the underlying SDK client and nulls out both theclientandtransportreferences. - Resets the inspector state: the server info, selected item, and any displayed result are all cleared.
- Returns the status to
"idle"and logs← ok desconectado.
disconnect() automatically when the component unmounts (for example, when you navigate away from the page), so connections are never left dangling.
Connection states
The inspector tracks the current connection lifecycle in astatus variable that drives the UI.
| State | Meaning |
|---|---|
idle | Initial state — no connection has been attempted. The connection form is fully editable. |
connecting | The initialize handshake is in progress. The Conectar button shows Conectando… and is disabled. |
connected | The handshake succeeded and the server is ready. The sidebar is populated and tools / prompts can be called. |
error | The connection attempt failed. A red error banner appears below the connection bar with the full error message. |
CORS is the most common connection failure. Because the inspector runs entirely in the browser, the MCP server must include the correct
Access-Control-Allow-Origin header for the origin from which Kunna is served. A “Failed to fetch” error in the activity console almost always indicates a CORS misconfiguration on the server rather than a problem with the inspector itself. If you control the server, ensure its CORS policy permits the origin (e.g. http://localhost:5173 during local development).