# MCP Capabilities Hook Usage Guide
## 🎯 **The Main Hook: `useMCP()`**
The `useMCP()` hook gives you access to **ALL** MCP capabilities and tools:
```jsx
import { useMCP } from '../hooks/useMCP';
function MyComponent() {
const {
// Connection state
isConnected,
isLoading,
error,
// 🔥 ALL CAPABILITIES AND TOOLS
capabilities, // Complete server capabilities
availableModels, // All available models by provider
availableTools, // All available tools with schemas
// Actions
getCapabilities, // Refresh capabilities
chat, // Chat with LLM
storeMemory, // Store conversation data
getMemory, // Retrieve memories
// ... other functions
} = useMCP();
return <div>/* Your component */</div>;
}
```
## 🛠 **Available Tools Access**
### **Get All Tools:**
```jsx
const { availableTools } = useMCP();
// availableTools is an array like:
[
{
name: "llm_chat",
description: "Send a message to the integrated LLM",
input_schema: {
type: "object",
properties: {
message: { type: "string", description: "Message to send" },
model: { type: "string", default: "mistral:latest" },
temperature: { type: "number", default: 0.7 }
},
required: ["message"]
}
},
{
name: "store_memory",
description: "Store information in chat memory",
// ... schema details
},
// ... more tools
]
```
### **Check Tool Availability:**
```jsx
const { availableTools } = useMCP();
// Check if specific tools are available
const hasChat = availableTools.some(tool => tool.name === 'llm_chat');
const hasMemory = availableTools.some(tool => tool.name === 'store_memory');
// Get tool details
const chatTool = availableTools.find(tool => tool.name === 'llm_chat');
const requiredParams = chatTool?.input_schema?.required || [];
```
### **Dynamic Tool UI Generation:**
```jsx
function ToolsUI() {
const { availableTools } = useMCP();
return (
<div>
<h3>Available Tools ({availableTools.length})</h3>
{availableTools.map(tool => (
<div key={tool.name} className="tool-card">
<h4>{tool.name}</h4>
<p>{tool.description}</p>
{/* Show required parameters */}
{tool.input_schema?.required && (
<div>
<strong>Required:</strong> {tool.input_schema.required.join(', ')}
</div>
)}
</div>
))}
</div>
);
}
```
## 🤖 **Available Models Access**
### **Get All Models:**
```jsx
const { availableModels } = useMCP();
// availableModels structure:
{
"ollama": ["mistral:latest", "gpt-oss:20b", "bge-large:latest"],
"openai": ["gpt-3.5-turbo", "gpt-4", "gpt-4o"],
"anthropic": ["claude-3-sonnet-20240229", "claude-3-opus-20240229"]
}
```
### **Use Specific Provider Models:**
```jsx
const { availableModels } = useMCP();
// Get Ollama models only (local models)
const ollamaModels = availableModels.ollama || [];
// Create model selector
function ModelSelector({ onModelSelect }) {
return (
<select onChange={(e) => onModelSelect(e.target.value)}>
{ollamaModels.map(model => (
<option key={model} value={model}>{model}</option>
))}
</select>
);
}
```
## 📋 **Complete Capabilities Object**
### **Full Capabilities Structure:**
```jsx
const { capabilities } = useMCP();
// capabilities contains:
{
"tools": [...], // All available tools
"server_info": {
"name": "MCP Server HTTP Bridge",
"version": "1.0.0",
"description": "..."
},
"features": {
"chat": true,
"memory": true,
"search": true,
"models": true,
"ollama_integration": true
},
"available_models": {
"ollama": [...],
"openai": [...],
"anthropic": [...]
}
}
```
### **Check Server Features:**
```jsx
const { capabilities } = useMCP();
// Check what features are enabled
const canChat = capabilities?.features?.chat;
const hasMemory = capabilities?.features?.memory;
const hasOllama = capabilities?.features?.ollama_integration;
// Show/hide UI based on capabilities
function ChatInterface() {
if (!canChat) {
return <div>Chat not available</div>;
}
return <div>/* Chat UI */</div>;
}
```
## 🔄 **Refresh Capabilities**
```jsx
const { getCapabilities, capabilities } = useMCP();
// Manually refresh capabilities
const refreshCapabilities = async () => {
try {
const latest = await getCapabilities();
console.log('Updated capabilities:', latest);
} catch (error) {
console.error('Failed to refresh:', error);
}
};
// Auto-refresh every 30 seconds
useEffect(() => {
const interval = setInterval(refreshCapabilities, 30000);
return () => clearInterval(interval);
}, []);
```
## 🎨 **Complete Example Component**
```jsx
import React, { useState } from 'react';
import { useMCP } from '../hooks/useMCP';
function MCPDashboard() {
const {
isConnected,
capabilities,
availableModels,
availableTools,
chat,
getCapabilities
} = useMCP();
const [selectedModel, setSelectedModel] = useState('mistral:latest');
// Get available tools by category
const chatTools = availableTools.filter(tool => tool.name.includes('chat'));
const memoryTools = availableTools.filter(tool => tool.name.includes('memory'));
// Get local models (Ollama)
const localModels = availableModels.ollama || [];
const sendTestMessage = async () => {
try {
const response = await chat('Hello from React!', selectedModel);
console.log(response);
} catch (error) {
console.error('Chat failed:', error);
}
};
if (!isConnected) {
return <div>MCP Server not connected</div>;
}
return (
<div className="mcp-dashboard">
<h2>MCP Dashboard</h2>
{/* Server Info */}
<div className="server-info">
<h3>{capabilities?.server_info?.name}</h3>
<p>Version: {capabilities?.server_info?.version}</p>
</div>
{/* Available Tools */}
<div className="tools-section">
<h3>Available Tools ({availableTools.length})</h3>
<div className="tool-categories">
<div>
<h4>Chat Tools ({chatTools.length})</h4>
{chatTools.map(tool => (
<div key={tool.name}>{tool.name}</div>
))}
</div>
<div>
<h4>Memory Tools ({memoryTools.length})</h4>
{memoryTools.map(tool => (
<div key={tool.name}>{tool.name}</div>
))}
</div>
</div>
</div>
{/* Model Selection */}
<div className="models-section">
<h3>Local Models ({localModels.length})</h3>
<select
value={selectedModel}
onChange={(e) => setSelectedModel(e.target.value)}
>
{localModels.map(model => (
<option key={model} value={model}>{model}</option>
))}
</select>
<button onClick={sendTestMessage}>Test Chat</button>
</div>
{/* Features Status */}
<div className="features-section">
<h3>Features</h3>
{Object.entries(capabilities?.features || {}).map(([feature, enabled]) => (
<div key={feature}>
{enabled ? '✅' : '❌'} {feature}
</div>
))}
</div>
</div>
);
}
export default MCPDashboard;
```
## 🎯 **Key Points**
1. **`useMCP()`** gives you **everything** - tools, models, capabilities
2. **`availableTools`** - Array of all tools with their schemas
3. **`availableModels`** - Models by provider (ollama, openai, anthropic)
4. **`capabilities`** - Complete server info and features
5. **Auto-loaded** - Everything loads automatically when connected
6. **Real-time** - Updates when you call `getCapabilities()`
This hook is your **one-stop solution** for accessing all MCP server capabilities!
