VIBN Frontend for Coolify deployment
This commit is contained in:
207
components/mcp-playground.tsx
Normal file
207
components/mcp-playground.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* MCP Playground Component
|
||||
*
|
||||
* Interactive demo of Vibn's MCP capabilities
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { auth } from '@/lib/firebase/config';
|
||||
import { toast } from 'sonner';
|
||||
import { Code2, Database, MessageSquare, Zap } from 'lucide-react';
|
||||
|
||||
interface MCPRequest {
|
||||
action: string;
|
||||
params?: any;
|
||||
}
|
||||
|
||||
export function MCPPlayground() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<any>(null);
|
||||
const [selectedTool, setSelectedTool] = useState<string | null>(null);
|
||||
|
||||
const callMCP = async (request: MCPRequest) => {
|
||||
setLoading(true);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in to use MCP');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = await user.getIdToken();
|
||||
|
||||
const response = await fetch('/api/mcp', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(request),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'MCP request failed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setResult(data);
|
||||
toast.success('MCP request completed');
|
||||
} catch (error) {
|
||||
console.error('MCP error:', error);
|
||||
toast.error(error instanceof Error ? error.message : 'MCP request failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tools = [
|
||||
{
|
||||
id: 'list_resources',
|
||||
name: 'List Resources',
|
||||
description: 'View all available MCP resources',
|
||||
icon: Database,
|
||||
action: () => callMCP({ action: 'list_resources' }),
|
||||
},
|
||||
{
|
||||
id: 'read_projects',
|
||||
name: 'Read Projects',
|
||||
description: 'Get all your projects via MCP',
|
||||
icon: Code2,
|
||||
action: () => {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in');
|
||||
return;
|
||||
}
|
||||
callMCP({
|
||||
action: 'read_resource',
|
||||
params: { uri: `vibn://projects/${user.uid}` },
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'read_sessions',
|
||||
name: 'Read Sessions',
|
||||
description: 'Get all your coding sessions',
|
||||
icon: Zap,
|
||||
action: () => {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in');
|
||||
return;
|
||||
}
|
||||
callMCP({
|
||||
action: 'read_resource',
|
||||
params: { uri: `vibn://sessions/${user.uid}` },
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-bold">MCP Playground</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Test Vibn's Model Context Protocol capabilities. This is what AI assistants see when they
|
||||
query your project data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tool Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{tools.map((tool) => (
|
||||
<Card
|
||||
key={tool.id}
|
||||
className="cursor-pointer transition-all hover:shadow-md"
|
||||
onClick={() => {
|
||||
setSelectedTool(tool.id);
|
||||
tool.action();
|
||||
}}
|
||||
>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<tool.icon className="h-5 w-5 text-primary" />
|
||||
<CardTitle className="text-base">{tool.name}</CardTitle>
|
||||
</div>
|
||||
<CardDescription className="text-xs">{tool.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<span className="text-sm text-muted-foreground">Processing MCP request...</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{result && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>MCP Response</CardTitle>
|
||||
<CardDescription>
|
||||
This is the data that would be sent to an AI assistant
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Textarea
|
||||
value={JSON.stringify(result, null, 2)}
|
||||
readOnly
|
||||
className="min-h-[400px] font-mono text-xs"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Info Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">About MCP</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>
|
||||
The Model Context Protocol (MCP) is a standard that allows AI assistants to access your
|
||||
project data in a secure and structured way.
|
||||
</p>
|
||||
<p>
|
||||
With Vibn's MCP server, AI assistants like Claude or ChatGPT can:
|
||||
</p>
|
||||
<ul className="ml-6 list-disc space-y-1">
|
||||
<li>View your projects and coding sessions</li>
|
||||
<li>Analyze your development patterns</li>
|
||||
<li>Reference past AI conversations for context</li>
|
||||
<li>Provide insights based on your actual work</li>
|
||||
</ul>
|
||||
<p className="pt-2">
|
||||
<a
|
||||
href="/MCP_SETUP.md"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Learn how to set up MCP with your AI assistant →
|
||||
</a>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user