# React Integration Setup
## 🚀 Quick Setup Guide
### Step 1: Add Files to Your React Project
Copy these files to your React project:
1. **`src/services/mcpService.js`** - API service
2. **`src/hooks/useMCP.js`** - React hook
3. **`src/components/MCPTestComponent.jsx`** - Test component
### Step 2: Install Dependencies (if needed)
```bash
# No additional dependencies needed if using fetch
# OR install axios if you prefer:
npm install axios
```
### Step 3: Update Your Main App Component
Add the test component to your main app:
```jsx
// src/App.js or src/App.jsx
import React from 'react';
import MCPTestComponent from './components/MCPTestComponent';
function App() {
return (
<div className="App">
<h1>My App with MCP Integration</h1>
<MCPTestComponent />
</div>
);
}
export default App;
```
### Step 4: Start Your Servers
**Terminal 1 - MCP Server:**
```bash
cd Z:\Code\MCP
python http_bridge.py
```
**Terminal 2 - React App:**
```bash
cd /path/to/your/react/app
npm start
# or
npm run dev # for Vite
```
## 🔧 What Each File Does
### `mcpService.js`
- Handles all API calls to your MCP server
- Provides methods for chat, memory, and health checks
- Includes error handling and logging
### `useMCP.js`
- React hook that wraps the API service
- Manages connection state and loading states
- Provides easy-to-use functions for React components
### `MCPTestComponent.jsx`
- Complete test interface for all MCP functionality
- Tests chat, memory storage/retrieval, and connection
- Shows how to integrate MCP in your React components
## 🎯 Testing the Integration
1. **Connection Test**: The component will automatically check connection
2. **Chat Test**: Enter a message and send it to Ollama
3. **Memory Test**: Store and retrieve conversation data
4. **Model Selection**: Choose from available Ollama models
## 🛠 Troubleshooting
### "Site Can't Be Reached" Error
1. **Check MCP Server**: Make sure `python http_bridge.py` is running
2. **Check URL**: Verify server is at `http://localhost:8000`
3. **Check Port**: Ensure no firewall blocking port 8000
### CORS Issues
The MCP server is configured for these React dev servers:
- `http://localhost:3000` (Create React App)
- `http://localhost:5173` (Vite)
- `http://localhost:5174` (Vite alternate)
### Console Errors
Check browser console for detailed error messages. The components include extensive logging.
## 🔄 Development Workflow
1. **Start MCP Server** first (it must be running)
2. **Start React App** second
3. **Open browser** to your React app
4. **Check connection status** in the test component
5. **Test each feature** one by one
## 📱 Using in Your Own Components
### Simple Chat Example
```jsx
import { useMCP } from '../hooks/useMCP';
function MyChatComponent() {
const { chat, isLoading, isConnected } = useMCP();
const [message, setMessage] = useState('');
const [response, setResponse] = useState('');
const sendMessage = async () => {
try {
const result = await chat(message);
setResponse(result.response);
} catch (error) {
console.error('Chat failed:', error);
}
};
return (
<div>
<input
value={message}
onChange={(e) => setMessage(e.target.value)}
disabled={!isConnected}
/>
<button onClick={sendMessage} disabled={isLoading}>
Send
</button>
{response && <div>{response}</div>}
</div>
);
}
```
### Memory Example
```jsx
import { useMCP } from '../hooks/useMCP';
function MyMemoryComponent() {
const { storeMemory, getMemory } = useMCP();
const [memories, setMemories] = useState([]);
const saveData = async () => {
await storeMemory('my_conversation', 'Some important data');
};
const loadData = async () => {
const result = await getMemory('my_conversation');
setMemories(result.memories);
};
return (
<div>
<button onClick={saveData}>Save</button>
<button onClick={loadData}>Load</button>
{memories.map(m => <div key={m.id}>{m.content}</div>)}
</div>
);
}
```
## 🎉 You're Ready!
Your React app can now:
- ✅ Chat with local Ollama models via MCP
- ✅ Store and retrieve conversation memory
- ✅ Handle connection states and errors
- ✅ Access all MCP server functionality
The integration is production-ready and can be extended with additional MCP tools as needed.
