Role-Specific Context MCP Server
by Chris-June
Verified
- MCP-Server
- examples
- react-example
import React, { useState, useEffect } from 'react';
import axios from 'axios';
// Types
interface Role {
id: string;
name: string;
description: string;
tone: string;
domains: string[];
}
interface ToneProfile {
description: string;
modifiers: string;
}
// API URL - change this to match your server
const API_URL = 'http://localhost:3000';
const RoleBasedChat: React.FC = () => {
// State
const [roles, setRoles] = useState<Role[]>([]);
const [tones, setTones] = useState<Record<string, ToneProfile>>({});
const [selectedRole, setSelectedRole] = useState<string>('');
const [query, setQuery] = useState<string>('');
const [response, setResponse] = useState<string>('');
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string>('');
// Fetch roles and tones on component mount
useEffect(() => {
async function fetchData() {
try {
// Fetch roles
const rolesResponse = await axios.get(`${API_URL}/roles`);
setRoles(rolesResponse.data.roles);
if (rolesResponse.data.roles.length > 0) {
setSelectedRole(rolesResponse.data.roles[0].id);
}
// Fetch tones
const tonesResponse = await axios.get(`${API_URL}/tones`);
setTones(tonesResponse.data.tones);
} catch (err) {
setError('Failed to fetch data. Is the server running?');
console.error('Error fetching data:', err);
}
}
fetchData();
}, []);
// Handle form submission
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!selectedRole || !query.trim()) {
return;
}
setLoading(true);
setError('');
try {
const response = await axios.post(`${API_URL}/process`, {
roleId: selectedRole,
query: query.trim()
});
setResponse(response.data.response);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
setError(`Error: ${errorMessage}`);
console.error('Error processing query:', err);
} finally {
setLoading(false);
}
};
// Handle role change
const handleRoleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedRole(e.target.value);
setResponse(''); // Clear previous response
};
// Get current role
const currentRole = roles.find(role => role.id === selectedRole);
return (
<div className="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-lg">
<h1 className="text-3xl font-bold mb-6 text-center text-gray-800">Role-Based AI Assistant</h1>
{error && (
<div className="mb-6 p-4 bg-red-100 text-red-700 rounded-lg">
{error}
</div>
)}
<div className="mb-6">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="role-select">
Select Role:
</label>
<select
id="role-select"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
value={selectedRole}
onChange={handleRoleChange}
disabled={loading}
>
{roles.map(role => (
<option key={role.id} value={role.id}>
{role.name}
</option>
))}
</select>
</div>
{currentRole && (
<div className="mb-6 p-4 bg-blue-50 rounded-lg">
<h2 className="font-bold text-lg text-blue-800">{currentRole.name}</h2>
<p className="text-blue-700">{currentRole.description}</p>
<div className="mt-2">
<span className="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm mr-2">
Tone: {currentRole.tone}
</span>
{currentRole.domains.map(domain => (
<span key={domain} className="inline-block bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm mr-2">
{domain}
</span>
))}
</div>
</div>
)}
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="query">
Your Question:
</label>
<textarea
id="query"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
rows={4}
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={`Ask the ${currentRole?.name || 'AI'} something...`}
disabled={loading}
/>
</div>
<div className="flex justify-center">
<button
type="submit"
className={`px-6 py-3 rounded-md text-white font-medium ${loading ? 'bg-gray-500' : 'bg-blue-600 hover:bg-blue-700'} transition-colors`}
disabled={loading || !selectedRole || !query.trim()}
>
{loading ? (
<span className="flex items-center">
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...
</span>
) : 'Submit'}
</button>
</div>
</form>
{response && (
<div className="mt-8 p-6 bg-gray-50 rounded-lg">
<h2 className="text-xl font-bold mb-4 text-gray-800">Response:</h2>
<div className="prose max-w-none">
{response.split('\n').map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph}</p>
))}
</div>
</div>
)}
</div>
);
};
export default RoleBasedChat;