[V0_FILE]typescriptreact:file="components/mcp/mcp-card.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Globe, Server, Download } from "lucide-react" import Link from "next/link" import type { Mcp } from "@/types/mcp" interface McpCardProps { mcp: Mcp } export function McpCard({ mcp }: McpCardProps) { return (

{mcp.icon === "globe" && } {mcp.icon === "server" && }

{mcp.name}

{mcp.type === "internal" ? ( Internal ) : mcp.approved ? ( Approved ) : ( Pending )}

{mcp.description}

{mcp.downloads.toLocaleString()}

@{mcp.author}

) } [V0_FILE]typescriptreact:file="types/mcp.ts" isMerged="true" export interface Mcp { id: string name: string author: string description: string longDescription: string type: "internal" | "external" approved: boolean icon: "globe" | "server" downloads: number license: string publishedDate: string version: string features: string[] mainTool: string toolDescription: string exampleCode: string apiEndpoints: { method: string path: string description: string response: string }[] } [V0_FILE]typescriptreact:file="data/mcps.ts" isMerged="true" import type { Mcp } from "@/types/mcp" export const mcps: Mcp[] = [ { id: "sequential-thinking", name: "Sequential Thinking", author: "smithery-ai/server-sequential-thinking", description: "An MCP server implementation that provides a tool for dynamic and reflective problem-solving through a structured thinking process.", longDescription: "Sequential Thinking is a powerful MCP server that enables AI agents to break down complex problems into manageable steps. It provides a structured approach to problem-solving that mimics human cognitive processes, allowing for more transparent and effective reasoning.", type: "internal", approved: true, icon: "server", downloads: 661743, license: "MIT", publishedDate: "12/13/2024", version: "1.2.0", features: [ "Step-by-step problem decomposition", "Reflective analysis of intermediate results", "Dynamic adjustment of reasoning paths", "Transparent thought process for better explainability", "Support for complex, multi-stage reasoning tasks", ], mainTool: "sequentialthinking", toolDescription: "A detailed tool for dynamic and reflective problem-solving through thoughts. This tool helps analyze problems through a flexible thinking process that can adapt and evolve.", exampleCode: `const result = await agent.invoke({ tools: [sequentialthinking], prompt: "Analyze the impact of rising interest rates on the housing market" });`, apiEndpoints: [ { method: "POST", path: "/api/think", description: "Initiates a sequential thinking process on a given problem", response: '{ "id": "thinking-123", "steps": [], "status": "in_progress" }', }, { method: "GET", path: "/api/think/:id", description: "Retrieves the current state of a thinking process", response: '{ "id": "thinking-123", "steps": ["Step 1: ...", "Step 2: ..."], "status": "completed" }', }, ], }, { id: "github", name: "GitHub", author: "smithery-ai/github", description: "Access the GitHub API, enabling file operations, repository management, search functionality, and more.", longDescription: "The GitHub MCP provides seamless integration with GitHub repositories and services. It allows AI agents to perform a wide range of operations including file access, repository management, issue tracking, and code search.", type: "internal", approved: true, icon: "globe", downloads: 226750, license: "MIT", publishedDate: "11/05/2024", version: "2.0.1", features: [ "Repository creation and management", "File operations (read, write, delete)", "Issue and pull request handling", "Code search and analysis", "User and organization management", ], mainTool: "github", toolDescription: "A comprehensive tool for interacting with GitHub repositories, issues, and other GitHub resources.", exampleCode: `const files = await agent.invoke({ tools: [github], prompt: "Find all JavaScript files in the main branch of repo xyz" });`, apiEndpoints: [ { method: "GET", path: "/api/repos/:owner/:repo", description: "Get repository information", response: '{ "id": 123, "name": "repo-name", "owner": { "login": "owner" } }', }, { method: "GET", path: "/api/repos/:owner/:repo/contents/:path", description: "Get contents of a file or directory", response: '{ "type": "file", "name": "file.js", "content": "base64-encoded-content" }', }, ], }, { id: "brave-search", name: "Brave Search", author: "smithery-ai/brave-search", description: "Integrate web search and local search capabilities with Brave.", longDescription: "The Brave Search MCP provides powerful web search capabilities with enhanced privacy features. It allows AI agents to perform comprehensive web searches while respecting user privacy and delivering relevant results.", type: "external", approved: true, icon: "globe", downloads: 158790, license: "Apache 2.0", publishedDate: "10/22/2024", version: "1.1.3", features: [ "Privacy-focused web search", "Comprehensive index of web pages", "Support for advanced search operators", "Image and news search capabilities", "Customizable search parameters", ], mainTool: "bravesearch", toolDescription: "A tool for performing web searches using the Brave Search engine with privacy-preserving features.", exampleCode: `const searchResults = await agent.invoke({ tools: [bravesearch], prompt: "Search for recent developments in quantum computing" });`, apiEndpoints: [ { method: "GET", path: "/api/search", description: "Perform a web search query", response: '{ "results": [{ "title": "Result 1", "url": "https://example.com", "description": "..." }] }', }, { method: "GET", path: "/api/images", description: "Search for images", response: '{ "images": [{ "title": "Image 1", "url": "https://example.com/img.jpg", "source": "..." }] }', }, ], }, { id: "think-tool", name: "Think Tool Server", author: "PhillipRt/think-mcp-server", description: "Enhance your AI's reasoning capabilities with structured thinking. This server provides a dedicated space for complex problem-solving.", longDescription: "The Think Tool Server is designed to enhance AI reasoning through structured methodologies. It provides a dedicated environment for tackling complex problems that require deep analysis and multi-step reasoning.", type: "external", approved: true, icon: "server", downloads: 203630, license: "BSD-3", publishedDate: "09/18/2024", version: "1.0.5", features: [ "Multi-step reasoning frameworks", "Hypothesis generation and testing", "Structured argument formation", "Evidence evaluation mechanisms", "Logical fallacy detection", ], mainTool: "thinktool", toolDescription: "A specialized tool for enhancing reasoning capabilities through structured thinking frameworks and methodologies.", exampleCode: `const analysis = await agent.invoke({ tools: [thinktool], prompt: "Analyze the ethical implications of autonomous vehicles" });`, apiEndpoints: [ { method: "POST", path: "/api/reason", description: "Start a structured reasoning process", response: '{ "id": "reason-456", "framework": "socratic", "status": "initiated" }', }, { method: "PUT", path: "/api/reason/:id/step", description: "Add a step to the reasoning process", response: '{ "id": "reason-456", "steps": 3, "status": "in_progress" }', }, ], }, { id: "perplexity-search", name: "Perplexity Search", author: "arjunkmrm/perplexity-search", description: "Enable AI assistants to perform web searches using Perplexity's Sonar Pro.", longDescription: "Perplexity Search provides advanced web search capabilities powered by Perplexity's Sonar Pro technology. It enables AI agents to retrieve up-to-date information from across the web with high relevance and accuracy.", type: "external", approved: false, icon: "globe", downloads: 52450, license: "Proprietary", publishedDate: "01/30/2025", version: "0.9.2", features: [ "Real-time web search capabilities", "High-quality information retrieval", "Support for natural language queries", "Comprehensive coverage of web content", "Integration with Perplexity's advanced search technology", ], mainTool: "perplexitysearch", toolDescription: "A tool for performing comprehensive web searches using Perplexity's Sonar Pro technology.", exampleCode: `const webResults = await agent.invoke({ tools: [perplexitysearch], prompt: "Find the latest research on climate change mitigation strategies" });`, apiEndpoints: [ { method: "GET", path: "/api/search", description: "Perform a web search using Perplexity", response: '{ "results": [{ "title": "Climate Research", "url": "https://example.com", "snippet": "..." }] }', }, { method: "GET", path: "/api/academic", description: "Search academic papers and research", response: '{ "papers": [{ "title": "Recent Advances in Climate Science", "authors": ["..."], "abstract": "..." }] }', }, ], }, ] [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/workspace") } [V0_FILE]typescriptreact:file="app/workspace/page.tsx" isMerged="true" import { Workspace } from "@/components/workspace" export default function WorkspacePage() { return } [V0_FILE]typescriptreact:file="components/sections/engineering-section.tsx" isMerged="true" import { ChevronDown } from "lucide-react" import { Card } from "@/components/ui/card" import { AppWindow, FolderKanban, Users, ShieldCheck, Network, FileCode, ListTodo, GitBranch } from "lucide-react" import Link from "next/link" export function EngineeringSection() { return (

ENGINEERING

Applications

Explore and manage your Fury apps.

Projects

Manage apps, team members, and policies in your projects.

Teams

Manage team members.

Authorizations

Manage permissions for restricted actions on Fury apps.

Systems

Explore the live map of MercadoLibre's architecture.

Specs Hub

Explore the API specifications for all Fury apps.

Actionables

Review the actionables for your apps.

Traffic

Manage traffic routing and authorizations.

) } [V0_FILE]typescriptreact:file="app/ai/verdi-suite/page.tsx" isMerged="true" import { VerdiSuiteDashboard } from "@/components/verdi/verdi-suite-dashboard" export default function VerdiSuitePage() { return } [V0_FILE]typescriptreact:file="components/verdi/verdi-metrics-card.tsx" isMerged="true" import { Card } from "@/components/ui/card" import type { ReactNode } from "react" interface VerdiMetricsCardProps { title: string value: string change: string icon: ReactNode positive: boolean } export function VerdiMetricsCard({ title, value, change, icon, positive }: VerdiMetricsCardProps) { return (

{title}

{icon}

{value}

{change}

) } [V0_FILE]typescriptreact:file="components/verdi/verdi-agent-card.tsx" isMerged="true" interface VerdiAgentCardProps { initials: string title: string type: string time: string status: string statusColor: string } export function VerdiAgentCard({ initials, title, type, time, status, statusColor }: VerdiAgentCardProps) { return (

{initials}

{title}

• {type} • {time}

{status}

) } [V0_FILE]typescriptreact:file="components/verdi/verdi-activity-card.tsx" isMerged="true" import type { ReactNode } from "react" interface VerdiActivityCardProps { title: string status: string time: string icon: ReactNode statusLabel: string statusColor: string } export function VerdiActivityCard({ title, status, time, icon, statusLabel, statusColor }: VerdiActivityCardProps) { return (

{icon}

{title}

{status} • {time}

{statusLabel}

) } [V0_FILE]typescriptreact:file="components/verdi/verdi-chat.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Send } from "lucide-react" interface Message { id: string role: "user" | "assistant" content: string timestamp: string } export function VerdiChat() { const [messages, setMessages] = useState([ { id: "1", role: "assistant", content: "Hello! I'm your AI assistant. How can I help you today?", timestamp: "10:47 a.m.", }, ]) const [input, setInput] = useState("") const handleSendMessage = () => { if (!input.trim()) return // Add user message const userMessage: Message = { id: Date.now().toString(), role: "user", content: input, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, userMessage]) setInput("") // Simulate assistant response setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: "I can help with that. What specific steps would you like to include in your workflow?", timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, assistantMessage]) }, 1000) } return (

Platform Assistant

Always available to help

{messages.map((message) => (

{message.content}

{message.timestamp}

))}

setInput(e.target.value)} placeholder="Type a message..." onKeyDown={(e) => { if (e.key === "Enter") { handleSendMessage() } }} />

) } [V0_FILE]typescriptreact:file="components/sections/data-section.tsx" isMerged="true" import { ChevronDown } from "lucide-react" import { Card } from "@/components/ui/card" import { BarChart3, Database, GitBranch, LineChart, ListTodo } from "lucide-react" export function DataSection() { return (

DATA

Analytics

Access key metrics and insights to drive decisions.

Query Builder

Run queries against a variety of data sources.

Data Flow

Build your own pipelines.

Dashboards

Make business decisions by browsing all the dashboards.

Catalog

Discover information about MeLi's artifacts.

) } [V0_FILE]typescriptreact:file="components/sections/ai-section.tsx" isMerged="true" import { ChevronDown } from "lucide-react" import { Card } from "@/components/ui/card" import { MessageSquare, Puzzle, BookOpen, Database, Layers, WaypointsIcon as Gateway, GitBranch } from "lucide-react" import Link from "next/link" export function AISection() { return (

GEN AI

Meli GPT

Optimize your results by leveraging AI.

Explore MCPs

Discover and manage Model Context Protocol servers.

Prompt Catalog

Browse and manage reusable prompts for AI models.

RAG Service

Retrieval-Augmented Generation for enhanced AI responses.

Verdi Suite

Comprehensive tools for AI model evaluation and testing.

Gateway

Centralized access control for AI services and models.

Rules

Define and manage business rules for AI decision-making.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { SidebarNav } from "@/components/sidebar/sidebar-nav" import { ThemeProvider } from "@/components/theme-provider" import { AssistantChat } from "@/components/global-chat/assistant-chat" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Fury - Workspace", description: "Explore and manage Model Context Protocol servers", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/verdi/verdi-suite-dashboard.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Plus, AlertTriangle, Clock, CheckCircle, XCircle, PlayCircle } from "lucide-react" import { VerdiMetricsCard } from "./verdi-metrics-card" import { VerdiAgentCard } from "./verdi-agent-card" import { VerdiActivityCard } from "./verdi-activity-card" export function VerdiSuiteDashboard() { return (

Dashboard

{/* Metrics Cards */}

} positive /> } positive /> } positive /> } positive />

{/* Recent Agents and Activities */}

Recent Agents

Your recently created or modified agents

Recent Activities

Latest deployments and changes

} statusLabel="Finished" statusColor="bg-green-100 text-green-800" /> } statusLabel="Finished" statusColor="bg-green-100 text-green-800" /> } statusLabel="Running" statusColor="bg-blue-100 text-blue-800" /> } statusLabel="Failed" statusColor="bg-red-100 text-red-800" />

Quick Actions

Common tasks and shortcuts

{/* Performance Metrics */}

Performance Metrics

Agent performance over the last 30 days

Performance chart will be displayed here

Top Performing Agents

Based on user satisfaction

) } [V0_FILE]plaintext:file="public/images/fury-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-41Us5GHnFv4SE9hXMTtR4XT3rqtjh8.png" isMerged="true" [V0_FILE]typescriptreact:file="app/engineering/page.tsx" isMerged="true" import { Workspace } from "@/components/workspace" export default function EngineeringPage() { return } [V0_FILE]typescriptreact:file="app/data/page.tsx" isMerged="true" import { Workspace } from "@/components/workspace" export default function DataPage() { return } [V0_FILE]typescriptreact:file="components/widgets/recent-activity-widget.tsx" isMerged="true" import { Activity, MessageSquare, GitPullRequest, FileText } from "lucide-react" interface ActivityItem { id: string type: "message" | "pull-request" | "document" title: string time: string user: string } interface RecentActivityWidgetProps { activities: ActivityItem[] } export function RecentActivityWidget({ activities }: RecentActivityWidgetProps) { const getIcon = (type: string) => { switch (type) { case "message": return case "pull-request": return case "document": return default: return } } return (

{activities.map((activity) => (

{getIcon(activity.type)}

{activity.title}

{activity.user} • {activity.time}

))}

) } [V0_FILE]typescriptreact:file="components/widgets/recommendations-widget.tsx" isMerged="true" import { Lightbulb, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" interface Recommendation { id: string title: string description: string actionText: string actionUrl: string } interface RecommendationsWidgetProps { recommendations: Recommendation[] } export function RecommendationsWidget({ recommendations }: RecommendationsWidgetProps) { return (

{recommendations.map((recommendation) => (

{recommendation.title}

{recommendation.description}

))}

) } [V0_FILE]typescriptreact:file="components/widgets/uptime-widget.tsx" isMerged="true" import { CheckCircle, AlertTriangle, XCircle } from "lucide-react" import { Progress } from "@/components/ui/progress" interface ServiceStatus { id: string name: string status: "operational" | "degraded" | "outage" uptime: number } interface UptimeWidgetProps { services: ServiceStatus[] } export function UptimeWidget({ services }: UptimeWidgetProps) { const getStatusIcon = (status: string) => { switch (status) { case "operational": return case "degraded": return case "outage": return default: return null } } const getStatusColor = (status: string) => { switch (status) { case "operational": return "text-green-600" case "degraded": return "text-amber-600" case "outage": return "text-red-600" default: return "text-gray-600" } } return (

{services.map((service) => (

{getStatusIcon(service.status)} {service.name}

{service.uptime}%

))}

) } [V0_FILE]typescriptreact:file="components/widgets/freeze-countdown-widget.tsx" isMerged="true" import { Calendar, Clock } from "lucide-react" interface FreezeCountdownWidgetProps { daysRemaining: number freezeDate: string freezeReason: string } export function FreezeCountdownWidget({ daysRemaining, freezeDate, freezeReason }: FreezeCountdownWidgetProps) { return (

{daysRemaining}

Days until next freeze

{freezeDate}

{freezeReason}

) } [V0_FILE]typescriptreact:file="components/widgets/bugs-widget.tsx" isMerged="true" import { Bug, ShieldAlert } from "lucide-react" import { Progress } from "@/components/ui/progress" interface BugsWidgetProps { bugs: { total: number critical: number high: number medium: number low: number } vulnerabilities: { total: number critical: number high: number medium: number low: number } } export function BugsWidget({ bugs, vulnerabilities }: BugsWidgetProps) { return (

Bugs

{bugs.total}

Critical {bugs.critical}

High {bugs.high}

Medium {bugs.medium}

Low {bugs.low}

Vulnerabilities

{vulnerabilities.total}

Critical {vulnerabilities.critical}

High {vulnerabilities.high}

Medium {vulnerabilities.medium}

Low {vulnerabilities.low}

) } [V0_FILE]typescriptreact:file="components/widgets/widget-selector.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Activity, Lightbulb, BarChart, Calendar, Bug, Plus } from "lucide-react" interface WidgetOption { id: string title: string description: string icon: React.ReactNode } interface WidgetSelectorProps { onAddWidget: (widgetType: string) => void } export function WidgetSelector({ onAddWidget }: WidgetSelectorProps) { const [open, setOpen] = useState(false) const widgetOptions: WidgetOption[] = [ { id: "recent-activity", title: "Recent Activity", description: "Track your recent actions and notifications", icon: , }, { id: "recommendations", title: "Recommendations", description: "Get personalized recommendations based on your activity", icon: , }, { id: "uptime", title: "Uptime", description: "Monitor the status of your services", icon: , }, { id: "freeze-countdown", title: "Freeze Countdown", description: "Track days until the next deployment freeze", icon: , }, { id: "bugs", title: "Bugs & Vulnerabilities", description: "Monitor pending bugs and security vulnerabilities", icon: , }, ] const handleAddWidget = (widgetType: string) => { onAddWidget(widgetType) setOpen(false) } return ( ) } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" interface ProgressProps extends React.ComponentPropsWithoutRef { indicatorClassName?: string } const Progress = React.forwardRef, ProgressProps>( ({ className, value, indicatorClassName, ...props }, ref) => ( ), ) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/workspace.tsx" isMerged="true" "use client" import { DashboardGrid } from "@/components/dashboard/dashboard-grid" export function Workspace() { return (

My Workspace

) } [V0_FILE]typescriptreact:file="components/widgets/widget-wrapper.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Card } from "@/components/ui/card" import { MoreHorizontal, Edit, Trash, GripVertical } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface WidgetWrapperProps { title: string children: React.ReactNode onRemove: () => void onEdit?: () => void id: string size?: "small" | "medium" | "large" } export function WidgetWrapper({ title, children, onRemove, onEdit, id, size = "medium" }: WidgetWrapperProps) { const [isDragging, setIsDragging] = useState(false) const dragRef = useRef(null) const handleDragStart = (e: React.DragEvent) => { e.dataTransfer.setData("widgetId", id) setIsDragging(true) // Create a ghost image for dragging if (dragRef.current) { const rect = dragRef.current.getBoundingClientRect() e.dataTransfer.setDragImage(dragRef.current, rect.width / 2, 20) } } const handleDragEnd = () => { setIsDragging(false) } // Determine height based on size const getHeightClass = () => { switch (size) { case "small": return "h-[200px]" case "medium": return "h-[320px]" case "large": return "h-[640px]" // Double the medium height default: return "h-[320px]" } } return (

{title}

{onEdit && ( Edit )} Remove

{children}

) } [V0_FILE]typescriptreact:file="components/dashboard/dashboard-grid.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { WidgetWrapper } from "@/components/widgets/widget-wrapper" import { RecentActivityWidget } from "@/components/widgets/recent-activity-widget" import { RecommendationsWidget } from "@/components/widgets/recommendations-widget" import { UptimeWidget } from "@/components/widgets/uptime-widget" import { FreezeCountdownWidget } from "@/components/widgets/freeze-countdown-widget" import { BugsWidget } from "@/components/widgets/bugs-widget" import { WidgetSelector } from "@/components/widgets/widget-selector" import { DataChartWidget } from "@/components/widgets/data-chart-widget" // Mock data const mockData = { recentActivity: [ { id: "1", type: "message", title: "New comment on PR #1234", time: "10 minutes ago", user: "John Doe", }, { id: "2", type: "pull-request", title: "PR #5678 merged to main", time: "2 hours ago", user: "Jane Smith", }, { id: "3", type: "document", title: "Updated API documentation", time: "Yesterday", user: "Alex Johnson", }, { id: "4", type: "message", title: "Mentioned in #team-frontend", time: "Yesterday", user: "Sarah Williams", }, ], recommendations: [ { id: "1", title: "Complete your profile", description: "Add your skills and experience to help others find you.", actionText: "Update Profile", actionUrl: "/profile", }, { id: "2", title: "Review pending PRs", description: "You have 3 pull requests waiting for your review.", actionText: "View PRs", actionUrl: "/pull-requests", }, { id: "3", title: "Update dependencies", description: "Some of your projects have outdated dependencies.", actionText: "View Details", actionUrl: "/dependencies", }, ], services: [ { id: "1", name: "API Gateway", status: "operational", uptime: 99.98, }, { id: "2", name: "Authentication Service", status: "operational", uptime: 99.95, }, { id: "3", name: "Database Cluster", status: "degraded", uptime: 98.5, }, { id: "4", name: "Storage Service", status: "operational", uptime: 99.99, }, ], freezeCountdown: { daysRemaining: 14, freezeDate: "December 15, 2025", freezeReason: "Holiday Release Freeze", }, bugs: { total: 24, critical: 2, high: 5, medium: 10, low: 7, }, vulnerabilities: { total: 12, critical: 1, high: 3, medium: 5, low: 3, }, } interface Widget { id: string type: string title: string size: "small" | "medium" | "large" // Widget size data?: any // Optional data for the widget } // Simple function to generate unique IDs without external dependencies function generateId() { return Date.now().toString() + Math.random().toString(36).substring(2, 11) } export function DashboardGrid() { const [widgets, setWidgets] = useState([]) const [draggedWidgetId, setDraggedWidgetId] = useState(null) const [dragOverWidgetId, setDragOverWidgetId] = useState(null) // Initialize with default widgets useEffect(() => { setWidgets([ { id: generateId(), type: "recent-activity", title: "Recent Activity", size: "medium" }, { id: generateId(), type: "recommendations", title: "Recommendations", size: "medium" }, { id: generateId(), type: "uptime", title: "Uptime", size: "medium" }, { id: generateId(), type: "freeze-countdown", title: "Freeze Countdown", size: "small" }, { id: generateId(), type: "bugs", title: "Bugs & Vulnerabilities", size: "large" }, ]) }, []) const handleAddWidget = (widgetType: string) => { const newWidget = { id: generateId(), type: widgetType, title: getWidgetTitle(widgetType), size: getWidgetDefaultSize(widgetType), } setWidgets([...widgets, newWidget]) } const handleRemoveWidget = (id: string) => { setWidgets(widgets.filter((widget) => widget.id !== id)) } const getWidgetTitle = (type: string) => { switch (type) { case "recent-activity": return "Recent Activity" case "recommendations": return "Recommendations" case "uptime": return "Uptime" case "freeze-countdown": return "Freeze Countdown" case "bugs": return "Bugs & Vulnerabilities" case "data-chart": return "Data Chart" default: return "Widget" } } const getWidgetDefaultSize = (type: string): "small" | "medium" | "large" => { switch (type) { case "freeze-countdown": return "small" case "bugs": return "large" case "data-chart": return "medium" default: return "medium" } } const renderWidgetContent = (widget: Widget) => { switch (widget.type) { case "recent-activity": return case "recommendations": return case "uptime": return case "freeze-countdown": return case "bugs": return case "data-chart": return default: return

Unknown widget type

} } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } const handleDrop = (e: React.DragEvent) => { e.preventDefault() const draggedId = e.dataTransfer.getData("widgetId") const targetId = dragOverWidgetId if (draggedId && targetId && draggedId !== targetId) { const draggedIndex = widgets.findIndex((w) => w.id === draggedId) const targetIndex = widgets.findIndex((w) => w.id === targetId) if (draggedIndex !== -1 && targetIndex !== -1) { const newWidgets = [...widgets] const [removed] = newWidgets.splice(draggedIndex, 1) newWidgets.splice(targetIndex, 0, removed) setWidgets(newWidgets) } } setDragOverWidgetId(null) } // Function to add a data chart widget from chat const addDataChartWidget = (chartData: any) => { const newWidget = { id: generateId(), type: "data-chart", title: chartData.title || "Data Chart", size: "medium", data: chartData, } setWidgets([...widgets, newWidget]) } // Expose the function to window for chat component to access useEffect(() => { // @ts-ignore window.addWidgetToWorkspace = addDataChartWidget }, [widgets]) return (

{widgets.map((widget) => (

{ e.preventDefault() setDragOverWidgetId(widget.id) }} onDragLeave={() => setDragOverWidgetId(null)} className={`transition-all ${dragOverWidgetId === widget.id ? "scale-105 shadow-lg" : ""}`} style={{ gridRow: widget.size === "large" ? "span 2" : "span 1", }} > handleRemoveWidget(widget.id)} onEdit={() => console.log("Edit widget", widget.id)} id={widget.id} size={widget.size} > {renderWidgetContent(widget)}

))}

) } [V0_FILE]typescriptreact:file="components/global-chat/assistant-chat.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Send, X, MessageSquare, Github, Mic, PanelRight, PanelBottom, Maximize2, CheckCircle, ArrowRight, Bot, Loader2, Database, Pin, FileCode, } from "lucide-react" import { Card } from "@/components/ui/card" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from "recharts" interface Message { id: string role: "user" | "assistant" content: string timestamp: string tasks?: { id: string text: string status: "done" | "in-progress" | "next" | "pending" }[] chart?: { title: string description?: string chartType?: "line" | "bar" series: Array<{ name: string data: Array<{ x: string y: number }> }> sql?: string } } interface SuggestionCard { id: string title: string description: string icon: React.ReactNode } interface AIModel { id: string name: string description: string icon: React.ReactNode selected?: boolean } type ViewMode = "right" | "bottom" | "fullscreen" export function AssistantChat() { const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([]) const [input, setInput] = useState("") const [showWelcome, setShowWelcome] = useState(true) const [viewMode, setViewMode] = useState("right") const [width, setWidth] = useState(420) // Wider default width for right sidebar const [height, setHeight] = useState(384) // Default height for bottom bar const [isResizing, setIsResizing] = useState(false) const [resizeEdge, setResizeEdge] = useState<"left" | "right" | "top" | "bottom" | null>(null) const [showModelSelector, setShowModelSelector] = useState(false) const [selectedModel, setSelectedModel] = useState("meligpt") const resizeRef = useRef(null) const startPosRef = useRef({ x: 0, y: 0 }) const startSizeRef = useRef({ width: 0, height: 0 }) const messagesEndRef = useRef(null) const chatContentRef = useRef(null) const [chartType, setChartType] = useState<"line" | "bar">("line") const [showSql, setShowSql] = useState(false) const [localChartType, setLocalChartType] = useState<"line" | "bar">("line") const [localShowSql, setLocalShowSql] = useState(false) const [showTable, setShowTable] = useState(false) const aiModels: AIModel[] = [ { id: "melimate", name: "MeliMate", description: "Meli ecosystem based topics", icon: , }, { id: "meligpt", name: "MeliGPT", description: "Overall assistance and global information", icon: , selected: true, }, { id: "melidata", name: "MeliData", description: "Data analysis and SQL queries", icon: , }, ] const suggestionCards: SuggestionCard[] = [ { id: "ecosystem", title: "Learn about Meli's ecosystem", description: "Ask MeliMate about Fury, Data and general information about our internal products", icon: , }, { id: "ai-models", title: "Access to global AI models", description: "Interact with multiple AI models like Chat GPT, Gemini and others", icon: , }, { id: "repositories", title: "Get assistance on your repositories", description: "Access rapidly and efficiently to the information of every Meli repository", icon: , }, { id: "project-help", title: "Help me with my project", description: "Get assistance with creating and setting up a new project", icon: , }, { id: "data-query", title: "Ask Data", description: "Query your data and get visualizations with natural language", icon: , }, ] // Scroll to bottom when messages change useEffect(() => { if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [messages]) // Initial project help conversation const projectHelpMessages: Message[] = [ { id: "1", role: "user", content: "I need help creating a new project", timestamp: "10:30 AM", }, { id: "2", role: "assistant", content: "I'd be happy to help you create a new project. Let's break this down into steps. What would you like to name your project?", timestamp: "10:30 AM", }, { id: "3", role: "user", content: "Let's call it fury-nico-test", timestamp: "10:31 AM", }, { id: "4", role: "assistant", content: "Great! I'll help you set up the fury-nico-test project. Here are the tasks we'll need to complete:", timestamp: "10:31 AM", tasks: [ { id: "task-1", text: "Create new project: 'fury agent'", status: "pending" }, { id: "task-2", text: "Create new app: fury-nico-test", status: "pending" }, { id: "task-3", text: "Create MySQL database", status: "pending" }, { id: "task-4", text: "Create KVS", status: "pending" }, { id: "task-5", text: "Catalogation", status: "pending" }, ], }, ] // Mock RPM data for Datadog query const mockRpmData = { title: "RPM for fury-test Application", description: "Requests per minute over the last 24 hours", chartType: "line", series: [ { name: "RPM", data: [ { x: "00:00", y: 245 }, { x: "02:00", y: 185 }, { x: "04:00", y: 143 }, { x: "06:00", y: 163 }, { x: "08:00", y: 432 }, { x: "10:00", y: 657 }, { x: "12:00", y: 728 }, { x: "14:00", y: 756 }, { x: "16:00", y: 680 }, { x: "18:00", y: 589 }, { x: "20:00", y: 467 }, { x: "22:00", y: 328 }, ], }, ], sql: `SELECT time, AVG(request_count) / 60 as rpm FROM datadog.metrics WHERE service = 'fury-test' AND time >= NOW() - INTERVAL 24 HOUR GROUP BY time ORDER BY time ASC;`, } const handleSendMessage = () => { if (!input.trim()) return // Add user message const userMessage: Message = { id: Date.now().toString(), role: "user", content: input, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, userMessage]) setInput("") setShowWelcome(false) // Check if this is a data query if ( selectedModel === "melidata" || input.toLowerCase().includes("rpm") || input.toLowerCase().includes("datadog") || input.toLowerCase().includes("requests") || input.toLowerCase().includes("data") ) { handleDataQuery(input) return } // For project help flow, handle task progression if (messages.length > 0 && messages[messages.length - 1].tasks) { if ( input.toLowerCase().includes("yes") || input.toLowerCase().includes("proceed") || input.toLowerCase().includes("start") ) { // Start executing tasks setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: "I'm starting to work on these tasks now. I'll update you on the progress.", timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, assistantMessage]) // Update task statuses progressively updateTaskStatus(0) }, 1000) return } } // Simulate assistant response for other messages setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: "I can help with that. What specific information would you like to know?", timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, assistantMessage]) }, 1000) } // Handle data queries const handleDataQuery = (query: string) => { // Show thinking message setTimeout(() => { const thinkingMessage: Message = { id: Date.now().toString(), role: "assistant", content: "Analyzing your data query...", timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, thinkingMessage]) // After a delay, show the result with chart setTimeout(() => { // Remove the thinking message setMessages((prev) => prev.filter((msg) => msg.id !== thinkingMessage.id)) // Add the result message with chart const resultMessage: Message = { id: Date.now().toString(), role: "assistant", content: `Here's the RPM data for your fury-test application over the last 24 hours. The peak traffic was at 14:00 with 756 requests per minute. There's a clear pattern showing higher traffic during business hours.`, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), chart: mockRpmData, } setMessages((prev) => [...prev, resultMessage]) }, 2000) }, 1000) } // Function to update task status progressively const updateTaskStatus = (taskIndex: number) => { if (taskIndex >= 5) return // All tasks completed setTimeout(() => { setMessages((prev) => { const newMessages = [...prev] const taskMessage = newMessages.find((m) => m.tasks) if (taskMessage && taskMessage.tasks) { // Update the current task to in-progress taskMessage.tasks[taskIndex].status = "in-progress" // Add a progress message newMessages.push({ id: Date.now().toString(), role: "assistant", content: `Working on: ${taskMessage.tasks[taskIndex].text}...`, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }) } return newMessages }) // After a delay, mark as done and move to next task setTimeout(() => { setMessages((prev) => { const newMessages = [...prev] const taskMessage = newMessages.find((m) => m.tasks) if (taskMessage && taskMessage.tasks) { // Mark current task as done taskMessage.tasks[taskIndex].status = "done" // Set next task status if (taskIndex + 1 < taskMessage.tasks.length) { taskMessage.tasks[taskIndex + 1].status = "next" } // Add completion message newMessages.push({ id: Date.now().toString(), role: "assistant", content: `✅ Completed: ${taskMessage.tasks[taskIndex].text}`, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }) } return newMessages }) // Move to next task updateTaskStatus(taskIndex + 1) }, 3000) }, 1500) } const handleSuggestionClick = (suggestion: SuggestionCard) => { if (suggestion.id === "project-help") { setMessages(projectHelpMessages) setShowWelcome(false) return } if (suggestion.id === "ai-models") { setShowModelSelector(true) setShowWelcome(false) setMessages([ { id: "ai-models-intro", role: "assistant", content: "You can choose from different AI models to assist you with various tasks:", timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }, ]) return } if (suggestion.id === "data-query") { setSelectedModel("melidata") setShowWelcome(false) setMessages([ { id: "data-query-intro", role: "assistant", content: "I can help you query your data. Try asking something like 'Show me the RPM for my fury-test app from Datadog'", timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }, ]) return } // Add user message based on suggestion const userMessage: Message = { id: Date.now().toString(), role: "user", content: suggestion.title, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, userMessage]) setShowWelcome(false) // Simulate assistant response setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: `I'd be happy to help with ${suggestion.title.toLowerCase()}. ${suggestion.description}`, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, assistantMessage]) }, 1000) } const toggleChat = () => { setIsOpen(!isOpen) } const toggleViewMode = (mode: ViewMode) => { setViewMode(mode) } const handleModelSelect = (modelId: string) => { setSelectedModel(modelId) setShowModelSelector(false) // Add a message confirming the model selection const assistantMessage: Message = { id: Date.now().toString(), role: "assistant", content: `You're now using ${aiModels.find((m) => m.id === modelId)?.name}. How can I assist you?`, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages((prev) => [...prev, assistantMessage]) } // Function to pin a chart to the workspace const pinChartToWorkspace = (chart: Message["chart"]) => { if (chart && typeof window !== "undefined" && window.addWidgetToWorkspace) { const chartWithId = { ...chart, id: Date.now().toString() + Math.random().toString(36).substring(2, 11), } // @ts-ignore window.addWidgetToWorkspace(chartWithId) } } // Set up resize event handlers useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isResizing || !resizeEdge) return const deltaX = e.clientX - startPosRef.current.x const deltaY = e.clientY - startPosRef.current.y if (resizeEdge === "left") { const newWidth = startSizeRef.current.width - deltaX if (newWidth >= 320 && newWidth <= window.innerWidth * 0.8) { setWidth(newWidth) } } else if (resizeEdge === "right") { const newWidth = startSizeRef.current.width + deltaX if (newWidth >= 320 && newWidth <= window.innerWidth * 0.8) { setWidth(newWidth) } } else if (resizeEdge === "top") { const newHeight = startSizeRef.current.height - deltaY if (newHeight >= 200 && newHeight <= window.innerHeight * 0.8) { setHeight(newHeight) } } else if (resizeEdge === "bottom") { const newHeight = startSizeRef.current.height + deltaY if (newHeight >= 200 && newHeight <= window.innerHeight * 0.8) { setHeight(newHeight) } } } const handleMouseUp = () => { setIsResizing(false) setResizeEdge(null) document.body.style.cursor = "default" } if (isResizing) { window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) } return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) } }, [isResizing, resizeEdge]) const startResize = (edge: "left" | "right" | "top" | "bottom") => (e: React.MouseEvent) => { e.preventDefault() setIsResizing(true) setResizeEdge(edge) startPosRef.current = { x: e.clientX, y: e.clientY } startSizeRef.current = { width, height } // Set cursor based on resize direction if (edge === "left" || edge === "right") { document.body.style.cursor = "ew-resize" } else { document.body.style.cursor = "ns-resize" } } // Format chart data for recharts const formatChartData = (chart: Message["chart"]) => { if (!chart) return [] return chart.series[0].data.map((point, i) => { const result: any = { name: point.x } // Add all series values for this x point chart.series.forEach((series) => { result[series.name] = series.data[i]?.y || 0 }) return result }) } const getResizeHandlers = () => { if (viewMode === "right") { return (

) } else if (viewMode === "bottom") { return (

) } return null } // Create a component for the chart widget to ensure consistent rendering const ChartWidget = ({ chart }: { chart: Message["chart"] }) => { if (!chart) return null // Use the chart's chartType or default to "line" const currentChartType = chart.chartType || "line" const data = formatChartData(chart) return (

{chart.title}

{chart.description &&

{chart.description}

} {chart.sql && (

{localShowSql && (

{chart.sql}

)}

{showTable ? (

{chart.series.map((series) => ( ))} {data.map((point, idx) => ( {chart.series.map((series) => ( ))} ))}

Time	{series.name}
{point.name}	{point[series.name]}

) : ( {localChartType === "bar" ? ( {chart.series.map((series, index) => ( ))} ) : ( {chart.series.map((series, index) => ( ))} )} )}

) } return ( <> {/* Chat Button */} {!isOpen && ( )} {/* Chat Panel */} {isOpen && (

{getResizeHandlers()} {/* Header */}

Fury AI

{viewMode !== "fullscreen" && ( )} {viewMode === "fullscreen" && ( )} {viewMode !== "bottom" && viewMode !== "fullscreen" && ( )} {viewMode !== "right" && viewMode !== "fullscreen" && ( )}

{/* Chat Content */}

{showWelcome && messages.length === 0 ? (

Hi! How can I help?

{suggestionCards.map((card) => ( handleSuggestionClick(card)} >

{card.title}

{card.description}

{card.icon}

))}

) : (

{showModelSelector && (

{aiModels.map((model) => (

handleModelSelect(model.id)} >

{model.icon}

{model.name}

{model.description}

{model.id === selectedModel && }

))}

)} {messages.map((message) => message.role === "assistant" && message.chart ? (

{message.content}

{message.timestamp}

) : (

{message.content}

{/* Task list */} {message.tasks && message.tasks.length > 0 && (

Tasks:

{task.status === "done" && ( )} {task.status === "in-progress" && ( )} {task.status === "next" && ( )} {task.status === "pending" && (
)} {task.text}

{message.tasks.some((t) => t.status === "pending") && (

Would you like me to proceed with these tasks?

)}

{message.timestamp}

), )}

{/* Empty div for scrolling to bottom */}

)}

{/* Input Area */}

setInput(e.target.value)} placeholder={selectedModel === "melidata" ? "Ask about your data..." : "Type a message..."} onKeyDown={(e) => { if (e.key === "Enter") { handleSendMessage() } }} />

{/* Model indicator */} {!showWelcome && !showModelSelector && (

{aiModels.find((m) => m.id === selectedModel)?.icon} {aiModels.find((m) => m.id === selectedModel)?.name}

)}

)} ) } [V0_FILE]typescriptreact:file="components/widgets/data-chart-widget.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from "recharts" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" interface DataChartWidgetProps { data: { title: string description?: string chartType?: "line" | "bar" series: Array<{ name: string data: Array<{ x: string y: number }> }> sql?: string } } export function DataChartWidget({ data }: DataChartWidgetProps) { const [chartType, setChartType] = useState<"line" | "bar">(data.chartType || "line") const [showSql, setShowSql] = useState(false) const [showTable, setShowTable] = useState(false) // Format data for recharts const chartData = data.series[0].data.map((point, index) => { const result: any = { name: point.x } // Add all series values for this x point data.series.forEach((series) => { result[series.name] = series.data[index]?.y }) return result }) return (

{data.description &&

{data.description}

}

setChartType(v as "line" | "bar")}> Line Bar { e.preventDefault() setShowTable(!showTable) }} > Table {data.sql && ( )}

{showSql && data.sql && (

{data.sql}

)}

{showTable ? (

{data.series.map((series) => ( ))} {chartData.map((point, idx) => ( {data.series.map((series) => ( ))} ))}

Time	{series.name}
{point.name}	{point[series.name]}

) : ( {chartType === "bar" ? ( {data.series.map((series, index) => ( ))} ) : ( {data.series.map((series, index) => ( ))} )} )}

) } // Helper function to get colors for chart series function getColor(index: number): string { const colors = [ "#3b82f6", // blue-500 "#10b981", // emerald-500 "#f59e0b", // amber-500 "#ef4444", // red-500 "#8b5cf6", // violet-500 "#ec4899", // pink-500 "#06b6d4", // cyan-500 ] return colors[index % colors.length] } [V0_FILE]typescriptreact:file="components/gateway/gateway-card.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Zap, Cpu, Clock } from "lucide-react" import Link from "next/link" import type { LlmModel } from "@/types/llm-model" interface GatewayCardProps { model: LlmModel } export function GatewayCard({ model }: GatewayCardProps) { return (

{model.provider === "openai" && } {model.provider === "anthropic" && } {model.provider === "google" && } {model.provider === "mistral" && }

{model.name}

{getProviderLabel(model.provider)}

{model.description}

{model.modelId}

{model.lastUsed}

) } function getProviderLabel(provider: string): string { switch (provider) { case "openai": return "OpenAI" case "anthropic": return "Anthropic" case "google": return "Google" case "mistral": return "Mistral" default: return provider } } function getProviderColorClass(provider: string): string { switch (provider) { case "openai": return "bg-green-50 text-green-700 border-green-200" case "anthropic": return "bg-blue-50 text-blue-700 border-blue-200" case "google": return "bg-purple-50 text-purple-700 border-purple-200" case "mistral": return "bg-indigo-50 text-indigo-700 border-indigo-200" default: return "bg-gray-50 text-gray-700 border-gray-200" } } [V0_FILE]typescriptreact:file="app/ai/gateway/add/page.tsx" isMerged="true" import { AddGatewayForm } from "@/components/gateway/add-gateway-form" import Link from "next/link" import { ArrowLeft } from "lucide-react" export default function AddGatewayPage() { return (

Back to Gateway

Add LLM Connection

Configure a new LLM model connection to use in your applications

) } [V0_FILE]typescriptreact:file="components/gateway/add-gateway-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { ArrowLeft } from "lucide-react" import { Card } from "@/components/ui/card" export function AddGatewayForm() { const router = useRouter() const [activeTab, setActiveTab] = useState("basic") const [formData, setFormData] = useState({ name: "", provider: "openai", modelId: "", endpoint: "", apiKey: "", description: "", temperature: 0.7, maxTokens: 1000, topP: 1, frequencyPenalty: 0, presencePenalty: 0, systemMessage: "", stopSequences: "", streamingEnabled: true, }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleSliderChange = (name: string, value: number[]) => { setFormData((prev) => ({ ...prev, [name]: value[0] })) } const handleSwitchChange = (name: string, checked: boolean) => { setFormData((prev) => ({ ...prev, [name]: checked })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submitted:", formData) // Here you would typically send the data to your API // Navigate back to the Gateway explorer router.push("/ai/gateway") } const handleTabChange = (value: string) => { setActiveTab(value) } const getModelOptions = () => { switch (formData.provider) { case "openai": return [ { value: "gpt-4o", label: "GPT-4o" }, { value: "gpt-4o-mini", label: "GPT-4o Mini" }, { value: "gpt-4-turbo", label: "GPT-4 Turbo" }, { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" }, ] case "anthropic": return [ { value: "claude-3-opus", label: "Claude 3 Opus" }, { value: "claude-3-sonnet", label: "Claude 3 Sonnet" }, { value: "claude-3-haiku", label: "Claude 3 Haiku" }, ] case "google": return [ { value: "gemini-1.5-pro", label: "Gemini 1.5 Pro" }, { value: "gemini-1.5-flash", label: "Gemini 1.5 Flash" }, { value: "gemini-1.0-pro", label: "Gemini 1.0 Pro" }, ] case "mistral": return [ { value: "mistral-large", label: "Mistral Large" }, { value: "mistral-medium", label: "Mistral Medium" }, { value: "mistral-small", label: "Mistral Small" }, ] default: return [] } } return (

Basic Information Advanced Configuration

Connection Name

Provider

Model

API Endpoint

API Key

Description

</div>

<div className="flex justify-end pt-4">
                <Button
                  type="button"
                  onClick={() => setActiveTab("advanced")}
                  className="bg-blue-600 hover:bg-blue-700"
                >
                  Next: Advanced Configuration
                </Button>
              </div>
            </div>
          </TabsContent>

<TabsContent value="advanced" className="space-y-6">
            <div className="space-y-4">
              <div>
                <Label htmlFor="temperature" className="text-base flex justify-between">
                  <span>Temperature</span>
                  <span className="text-gray-500">{formData.temperature}</span>
                </Label>
                <Slider
                  id="temperature"
                  min={0}
                  max={2}
                  step={0.1}
                  value={[formData.temperature]}
                  onValueChange={(value) => handleSliderChange("temperature", value)}
                  className="mt-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Controls randomness: Lower values are more deterministic, higher values are more creative.
                </p>
              </div>

<div>
                <Label htmlFor="maxTokens" className="text-base flex justify-between">
                  <span>Max Tokens</span>
                  <span className="text-gray-500">{formData.maxTokens}</span>
                </Label>
                <Slider
                  id="maxTokens"
                  min={100}
                  max={4000}
                  step={100}
                  value={[formData.maxTokens]}
                  onValueChange={(value) => handleSliderChange("maxTokens", value)}
                  className="mt-2"
                />
                <p className="text-xs text-gray-500 mt-1">Maximum number of tokens to generate in the completion.</p>
              </div>

<div>
                <Label htmlFor="topP" className="text-base flex justify-between">
                  <span>Top P</span>
                  <span className="text-gray-500">{formData.topP}</span>
                </Label>
                <Slider
                  id="topP"
                  min={0}
                  max={1}
                  step={0.05}
                  value={[formData.topP]}
                  onValueChange={(value) => handleSliderChange("topP", value)}
                  className="mt-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Controls diversity via nucleus sampling: 0.5 means half of all likelihood-weighted options are
                  considered.
                </p>
              </div>

<div>
                <Label htmlFor="frequencyPenalty" className="text-base flex justify-between">
                  <span>Frequency Penalty</span>
                  <span className="text-gray-500">{formData.frequencyPenalty}</span>
                </Label>
                <Slider
                  id="frequencyPenalty"
                  min={0}
                  max={2}
                  step={0.1}
                  value={[formData.frequencyPenalty]}
                  onValueChange={(value) => handleSliderChange("frequencyPenalty", value)}
                  className="mt-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Reduces repetition by penalizing tokens that have already appeared in the text.
                </p>
              </div>

<div>
                <Label htmlFor="presencePenalty" className="text-base flex justify-between">
                  <span>Presence Penalty</span>
                  <span className="text-gray-500">{formData.presencePenalty}</span>
                </Label>
                <Slider
                  id="presencePenalty"
                  min={0}
                  max={2}
                  step={0.1}
                  value={[formData.presencePenalty]}
                  onValueChange={(value) => handleSliderChange("presencePenalty", value)}
                  className="mt-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Reduces repetition by penalizing tokens that have appeared at all in the text.
                </p>
              </div>

<div>
                <Label htmlFor="systemMessage" className="text-base">
                  System Message
                </Label>
                <Textarea
                  id="systemMessage"
                  name="systemMessage"
                  value={formData.systemMessage}
                  onChange={handleInputChange}
                  placeholder="Instructions for the model"
                  className="mt-1 min-h-[100px]"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Instructions that the model will follow in all conversations.
                </p>
              </div>

<div>
                <Label htmlFor="stopSequences" className="text-base">
                  Stop Sequences
                </Label>
                <Input
                  id="stopSequences"
                  name="stopSequences"
                  value={formData.stopSequences}
                  onChange={handleInputChange}
                  placeholder="Comma-separated sequences"
                  className="mt-1"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Sequences where the API will stop generating further tokens.
                </p>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="streamingEnabled" className="text-base">
                    Enable Streaming
                  </Label>
                  <p className="text-xs text-gray-500">Stream partial results as they're generated.</p>
                </div>
                <Switch
                  id="streamingEnabled"
                  checked={formData.streamingEnabled}
                  onCheckedChange={(checked) => handleSwitchChange("streamingEnabled", checked)}
                />
              </div>

<div className="flex justify-between pt-4">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setActiveTab("basic")}
                  className="flex items-center"
                >
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Back to Basic Information
                </Button>
                <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
                  Create Connection
                </Button>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </Card>
    </form>
  )
}
[V0_FILE]typescriptreact:file="types/llm-model.ts" isMerged="true"
export interface LlmModel {
  id: string
  name: string
  provider: string
  modelId: string
  description: string
  endpoint: string
  contextWindow: number
  inputCost: number
  outputCost: number
  lastUsed: string
  created: string
  status: "active" | "inactive"
  capabilities: string[]
  parameters: {
    temperature: number
    maxTokens: number
    topP: number
    frequencyPenalty: number
    presencePenalty: number
    stopSequences: string[]
  }
  systemMessage: string
  responseFormat: any
  usage: {
    totalTokens: number
    promptTokens: number
    completionTokens: number
    estimatedCost: number
  }
}
[V0_FILE]typescriptreact:file="data/llm-models.ts" isMerged="true"
import type { LlmModel } from "@/types/llm-model"

export const llmModels: LlmModel[] = [
  {
    id: "gpt-4o",
    name: "GPT-4o",
    provider: "openai",
    modelId: "gpt-4o",
    description: "OpenAI's most advanced model, optimized for both text and vision tasks with improved performance.",
    endpoint: "https://api.openai.com/v1/chat/completions",
    contextWindow: 128000,
    inputCost: 0.01,
    outputCost: 0.03,
    lastUsed: "2 hours ago",
    created: "April 15, 2024",
    status: "active",
    capabilities: ["Text Generation", "Image Understanding", "Code Generation", "Reasoning"],
    parameters: {
      temperature: 0.7,
      maxTokens: 4000,
      topP: 1,
      frequencyPenalty: 0,
      presencePenalty: 0,
      stopSequences: [],
    },
    systemMessage: "You are a helpful assistant.",
    responseFormat: {
      type: "text",
    },
    usage: {
      totalTokens: 1250000,
      promptTokens: 450000,
      completionTokens: 800000,
      estimatedCost: 28.5,
    },
  },
  {
    id: "gpt-4o-mini",
    name: "GPT-4o Mini",
    provider: "openai",
    modelId: "gpt-4o-mini",
    description: "A smaller, faster, and more cost-effective version of GPT-4o for everyday tasks.",
    endpoint: "https://api.openai.com/v1/chat/completions",
    contextWindow: 128000,
    inputCost: 0.005,
    outputCost: 0.015,
    lastUsed: "1 day ago",
    created: "April 15, 2024",
    status: "active",
    capabilities: ["Text Generation", "Image Understanding", "Code Generation"],
    parameters: {
      temperature: 0.7,
      maxTokens: 4000,
      topP: 1,
      frequencyPenalty: 0,
      presencePenalty: 0,
      stopSequences: [],
    },
    systemMessage: "You are a helpful assistant.",
    responseFormat: {
      type: "text",
    },
    usage: {
      totalTokens: 2500000,
      promptTokens: 900000,
      completionTokens: 1600000,
      estimatedCost: 28.5,
    },
  },
  {
    id: "claude-3-opus",
    name: "Claude 3 Opus",
    provider: "anthropic",
    modelId: "claude-3-opus-20240229",
    description: "Anthropic's most powerful model for highly complex tasks requiring deep analysis and expertise.",
    endpoint: "https://api.anthropic.com/v1/messages",
    contextWindow: 200000,
    inputCost: 0.015,
    outputCost: 0.075,
    lastUsed: "3 days ago",
    created: "March 4, 2024",
    status: "active",
    capabilities: ["Text Generation", "Image Understanding", "Reasoning", "Long-form Content"],
    parameters: {
      temperature: 0.5,
      maxTokens: 4000,
      topP: 0.9,
      frequencyPenalty: 0,
      presencePenalty: 0,
      stopSequences: [],
    },
    systemMessage: "You are Claude, a helpful AI assistant created by Vercel.",
    responseFormat: {
      type: "text",
    },
    usage: {
      totalTokens: 850000,
      promptTokens: 300000,
      completionTokens: 550000,
      estimatedCost: 45.75,
    },
  },
  {
    id: "claude-3-sonnet",
    name: "Claude 3 Sonnet",
    provider: "anthropic",
    modelId: "claude-3-sonnet-20240229",
    description: "Balanced model for a wide range of tasks with excellent performance and cost-effectiveness.",
    endpoint: "https://api.anthropic.com/v1/messages",
    contextWindow: 200000,
    inputCost: 0.003,
    outputCost: 0.015,
    lastUsed: "5 hours ago",
    created: "March 4, 2024",
    status: "active",
    capabilities: ["Text Generation", "Image Understanding", "Reasoning"],
    parameters: {
      temperature: 0.7,
      maxTokens: 4000,
      topP: 0.9,
      frequencyPenalty: 0,
      presencePenalty: 0,
      stopSequences: [],
    },
    systemMessage: "You are Claude, a helpful AI assistant created by Vercel.",
    responseFormat: {
      type: "text",
    },
    usage: {
      totalTokens: 1750000,
      promptTokens: 650000,
      completionTokens: 1100000,
      estimatedCost: 18.45,
    },
  },
  {
    id: "gemini-1-5-pro",
    name: "Gemini 1.5 Pro",
    provider: "google",
    modelId: "gemini-1.5-pro",
    description: "Google's multimodal model with strong performance across text, code, audio, and image tasks.",
    endpoint: "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent",
    contextWindow: 1000000,
    inputCost: 0.0025,
    outputCost: 0.0075,
    lastUsed: "1 hour ago",
    created: "February 15, 2024",
    status: "active",
    capabilities: ["Text Generation", "Image Understanding", "Code Generation", "Audio Processing", "Long Context"],
    parameters: {
      temperature: 0.9,
      maxTokens: 8192,
      topP: 0.95,
      frequencyPenalty: 0,
      presencePenalty: 0,
      stopSequences: [],
    },
    systemMessage: "",
    responseFormat: {
      type: "text",
    },
    usage: {
      totalTokens: 3200000,
      promptTokens: 1200000,
      completionTokens: 2000000,
      estimatedCost: 18,
    },
  },
  {
    id: "mistral-large",
    name: "Mistral Large",
    provider: "mistral",
    modelId: "mistral-large-latest",
    description: "Mistral AI's most capable model, with strong performance across reasoning, math, and code.",
    endpoint: "https://api.mistral.ai/v1/chat/completions",
    contextWindow: 32768,
    inputCost: 0.008,
    outputCost: 0.024,
    lastUsed: "2 days ago",
    created: "January 10, 2024",
    status: "active",
    capabilities: ["Text Generation", "Code Generation", "Reasoning", "Math"],
    parameters: {
      temperature: 0.7,
      maxTokens: 4096,
      topP: 1,
      frequencyPenalty: 0,
      presencePenalty: 0,
      stopSequences: [],
    },
    systemMessage: "You are Mistral Large, a helpful AI assistant.",
    responseFormat: {
      type: "text",
    },
    usage: {
      totalTokens: 950000,
      promptTokens: 350000,
      completionTokens: 600000,
      estimatedCost: 17.2,
    },
  },
]
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-gray-100">
      <SliderPrimitive.Range className="absolute h-full bg-blue-600" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-blue-600 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="app/ai/page.tsx" isEdit="true" isMerged="true"
import { GenAILanding } from "@/components/ai/gen-ai-landing"

export default function AIPage() {
  return <GenAILanding />
}
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true"
"use client"

import * as React from "react"
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins,
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext],
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("select", onSelect)
      api.on("reInit", onSelect)

return () => {
        api.off("select", onSelect)
        api.off("reInit", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  },
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const { carouselRef, orientation } = useCarousel()

return (
      <div ref={carouselRef} className="overflow-hidden">
        <div
          ref={ref}
          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
          {...props}
        />
      </div>
    )
  },
)
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const { orientation } = useCarousel()

return (
      <div
        ref={ref}
        role="group"
        aria-roledescription="slide"
        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
        {...props}
      />
    )
  },
)
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
    const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
      <Button
        ref={ref}
        variant={variant}
        size={size}
        className={cn(
          "absolute h-8 w-8 rounded-full",
          orientation === "horizontal"
            ? "left-12 top-1/2 -translate-y-1/2"
            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
          className,
        )}
        disabled={!canScrollPrev}
        onClick={scrollPrev}
        {...props}
      >
        <ArrowLeft className="h-4 w-4" />
        <span className="sr-only">Previous slide</span>
      </Button>
    )
  },
)
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
    const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
      <Button
        ref={ref}
        variant={variant}
        size={size}
        className={cn(
          "absolute h-8 w-8 rounded-full",
          orientation === "horizontal"
            ? "right-12 top-1/2 -translate-y-1/2"
            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
          className,
        )}
        disabled={!canScrollNext}
        onClick={scrollNext}
        {...props}
      >
        <ArrowRight className="h-4 w-4" />
        <span className="sr-only">Next slide</span>
      </Button>
    )
  },
)
CarouselNext.displayName = "CarouselNext"

export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
[V0_FILE]typescriptreact:file="package.json" isEdit="true" isMerged="true"
{
  "dependencies": {
    "embla-carousel-react": "^8.0.0-rc17"
  }
}
[V0_FILE]typescriptreact:file="app/ai/explore-mcps/page.tsx" isEdit="true" isMerged="true"
import { Suspense } from "react"
import { McpExplorer } from "@/components/mcp/mcp-explorer"

export default function ExploreMcpsPage() {
  return (
    <Suspense fallback={<div className="p-6">Loading MCPs...</div>}>
      <McpExplorer />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="components/mcp/mcp-detail.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { ArrowLeft, Download, Globe, Server, Terminal, Code, Info, GitBranch } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"
import type { Mcp } from "@/types/mcp"

interface McpDetailProps {
  mcp: Mcp
}

export function McpDetail({ mcp }: McpDetailProps) {
  const searchParams = useSearchParams() || new URLSearchParams()
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("overview")

// Initialize the active tab from URL parameters
  useEffect(() => {
    const tab = searchParams.get("tab")
    if (tab) {
      setActiveTab(tab)
    }
  }, [searchParams])

const handleTabChange = (value: string) => {
    setActiveTab(value)
    router.push(`/ai/explore-mcps/${mcp.id}?tab=${value}`)
  }

return (
    <div>
      <div className="mb-6">
        <Link href="/ai/explore-mcps" className="flex items-center text-gray-500 hover:text-gray-700 mb-4">
          <ArrowLeft className="mr-1 h-4 w-4" />
          Back to MCPs
        </Link>

<div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 mb-2">
              {mcp.icon === "globe" && <Globe className="h-6 w-6 text-blue-500" />}
              {mcp.icon === "server" && <Server className="h-6 w-6 text-purple-500" />}
              <h1 className="text-2xl font-bold">{mcp.name}</h1>
            </div>
            <div className="flex items-center gap-2 mb-4">
              <span className="text-gray-500">@{mcp.author}</span>
              {mcp.type === "internal" ? (
                <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                  Internal
                </Badge>
              ) : mcp.approved ? (
                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                  Approved
                </Badge>
              ) : (
                <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
                  Pending
                </Badge>
              )}
            </div>
            <p className="text-gray-600 max-w-3xl">{mcp.description}</p>
          </div>

<Button className="bg-orange-500 hover:bg-orange-600">Install MCP</Button>
        </div>
      </div>

<Tabs value={activeTab} onValueChange={handleTabChange} className="mt-8">
        <TabsList>
          <TabsTrigger value="overview" className="flex items-center gap-1">
            <Info className="h-4 w-4" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="tools" className="flex items-center gap-1">
            <Terminal className="h-4 w-4" />
            Tools
          </TabsTrigger>
          <TabsTrigger value="api" className="flex items-center gap-1">
            <Code className="h-4 w-4" />
            API
          </TabsTrigger>
          <TabsTrigger value="test" className="flex items-center gap-1">
            <GitBranch className="h-4 w-4" />
            Test MCP
          </TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="mt-6">
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div className="lg:col-span-2">
              <h2 className="text-xl font-medium mb-4">Description</h2>
              <p className="text-gray-600 mb-4">{mcp.longDescription}</p>

<h3 className="text-lg font-medium mb-2">Features</h3>
              <ul className="list-disc pl-5 text-gray-600 space-y-1">
                {mcp.features.map((feature, index) => (
                  <li key={index}>{feature}</li>
                ))}
              </ul>
            </div>

<div className="bg-gray-50 p-6 rounded-lg">
              <h3 className="text-lg font-medium mb-4">Installation</h3>

<div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Monthly Tool Calls</h4>
                  <div className="flex items-center gap-1">
                    <Download className="h-4 w-4 text-gray-500" />
                    <span className="font-medium">{mcp.downloads.toLocaleString()}</span>
                  </div>
                </div>

<div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">License</h4>
                  <p>{mcp.license}</p>
                </div>

<div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Published</h4>
                  <p>{mcp.publishedDate}</p>
                </div>

<div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Version</h4>
                  <p>{mcp.version}</p>
                </div>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="tools" className="mt-6">
          <div className="bg-gray-50 p-6 rounded-lg mb-6">
            <h3 className="font-mono text-lg mb-2">{mcp.mainTool}</h3>
            <p className="text-gray-600">{mcp.toolDescription}</p>
          </div>

<h3 className="text-lg font-medium mb-4">Example Usage</h3>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
            <code>{mcp.exampleCode}</code>
          </pre>
        </TabsContent>

<TabsContent value="api" className="mt-6">
          <h2 className="text-xl font-medium mb-4">API Reference</h2>
          <p className="text-gray-600 mb-6">
            This section provides documentation for the API endpoints exposed by this MCP.
          </p>

<div className="space-y-6">
            {mcp.apiEndpoints.map((endpoint, index) => (
              <div key={index} className="border border-gray-200 rounded-lg p-4">
                <div className="flex items-center gap-2 mb-2">
                  <Badge className="bg-green-100 text-green-800 border-0">{endpoint.method}</Badge>
                  <code className="text-sm font-mono">{endpoint.path}</code>
                </div>
                <p className="text-gray-600 mb-2">{endpoint.description}</p>
                <h4 className="text-sm font-medium text-gray-500 mt-4 mb-1">Response</h4>
                <pre className="bg-gray-50 p-3 rounded text-sm overflow-x-auto">
                  <code>{endpoint.response}</code>
                </pre>
              </div>
            ))}
          </div>
        </TabsContent>

<TabsContent value="test" className="mt-6">
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h2 className="text-xl font-medium mb-4">Test MCP</h2>
            <p className="text-gray-600 mb-6">
              Use this playground to test the MCP functionality before integrating it into your application.
            </p>

<div className="mb-4">
              <h3 className="text-lg font-medium mb-2">Input</h3>
              <textarea
                className="w-full h-32 p-3 border border-gray-300 rounded-md"
                placeholder="Enter your test input here..."
              >

Output

Test results will appear here...

) } [V0_FILE]typescriptreact:file="app/ai/explore-mcps/[id]/page.tsx" isEdit="true" isMerged="true" import { Suspense } from "react" import { McpDetail } from "@/components/mcp/mcp-detail" import { mcps } from "@/data/mcps" import { notFound } from "next/navigation" interface McpDetailPageProps { params: { id: string } } export default function McpDetailPage({ params }: McpDetailPageProps) { const mcp = mcps.find((m) => m.id === params.id) if (!mcp) { notFound() } return ( Loading MCP details...

}> ) } [V0_FILE]typescriptreact:file="components/gateway/gateway-explorer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSearchParams, useRouter } from "next/navigation" import { Search, Plus } from "lucide-react" import { Input } from "@/components/ui/input" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { GatewayCard } from "@/components/gateway/gateway-card" import { llmModels } from "@/data/llm-models" import { Button } from "@/components/ui/button" type ModelProvider = "all" | "openai" | "anthropic" | "google" | "mistral" export function GatewayExplorer() { const searchParams = useSearchParams() || new URLSearchParams() const router = useRouter() const [searchQuery, setSearchQuery] = useState("") const [activeTab, setActiveTab] = useState("all") // Initialize the active tab from URL parameters useEffect(() => { const provider = searchParams.get("provider") if (provider) { setActiveTab(provider as ModelProvider) } }, [searchParams]) const filteredModels = llmModels.filter((model) => { // Filter by search query if (searchQuery && !model.name.toLowerCase().includes(searchQuery.toLowerCase())) { return false } // Filter by tab if (activeTab === "all") return true return model.provider === activeTab }) const handleTabChange = (value: string) => { setActiveTab(value as ModelProvider) router.push(`/ai/gateway?provider=${value}`) } return (

Gateway

Manage LLM model configurations and connections for your AI applications

setSearchQuery(e.target.value)} />

All Models OpenAI Anthropic Google Mistral

{filteredModels.map((model) => ( ))}

) } [V0_FILE]typescriptreact:file="components/gateway/gateway-detail.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useSearchParams, useRouter } from "next/navigation" import { ArrowLeft, Zap, Code, Info, Settings, Activity, Key } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import Link from "next/link" import type { LlmModel } from "@/types/llm-model" interface GatewayDetailProps { model: LlmModel } export function GatewayDetail({ model }: GatewayDetailProps) { const searchParams = useSearchParams() || new URLSearchParams() const router = useRouter() const [activeTab, setActiveTab] = useState("overview") // Initialize the active tab from URL parameters useEffect(() => { const tab = searchParams.get("tab") if (tab) { setActiveTab(tab) } }, [searchParams]) const handleTabChange = (value: string) => { setActiveTab(value) router.push(`/ai/gateway/${model.id}?tab=${value}`) } return (

Back to Gateway

{model.provider === "openai" && } {model.provider === "anthropic" && } {model.provider === "google" && } {model.provider === "mistral" && }

{model.name}

{model.provider.charAt(0).toUpperCase() + model.provider.slice(1)} Model ID: {model.modelId}

{model.description}

Overview Configuration Usage

API



        
          
            
              Model Information
              
                
                  
                    Model ID
                    {model.modelId}
                  
                  
                    Provider
                    {model.provider.charAt(0).toUpperCase() + model.provider.slice(1)}
                  
                  
                    Context Window
                    {model.contextWindow.toLocaleString()} tokens
                  
                  
                    Input Cost
                    ${model.inputCost} / 1K tokens
                  
                  
                    Output Cost
                    ${model.outputCost} / 1K tokens
                  
                  
                    Last Used
                    {model.lastUsed}
                  
                

                
                  Capabilities
                  
                    {model.capabilities.map((capability) => (
                      
                        {capability}
                      
                    ))}
                  
                
              
            

            
              Connection Details

              
                
                  Endpoint
                  {model.endpoint}
                

                
                  API Key
                  
                    ••••••••••••••••
                    
                  
                

                
                  Created
                  {model.created}
                

                
                  Status
                  
                    
                    {model.status.charAt(0).toUpperCase() + model.status.slice(1)}
                  
                
              
            
          
        

        
          
            
              Request Parameters
              
                
                  
                    Temperature
                    {model.parameters.temperature}
                  
                  
                    Top P
                    {model.parameters.topP}
                  
                  
                    Max Tokens
                    {model.parameters.maxTokens}
                  
                  
                    Frequency Penalty
                    {model.parameters.frequencyPenalty}
                  
                  
                    Presence Penalty
                    {model.parameters.presencePenalty}
                  
                  
                    Stop Sequences
                    {model.parameters.stopSequences.join(", ") || "None"}
                  
                
              
            

            
              System Message
              
                {model.systemMessage || "No system message configured"}
              
            

            
              Response Format
              
                {JSON.stringify(model.responseFormat, null, 2)}
              
            
          
        

        
          
            
              Usage Statistics
              
                Usage chart will be displayed here
              
            

            
              Token Usage
              
                
                  Total Tokens
                  {model.usage.totalTokens.toLocaleString()}
                
                
                  Prompt Tokens
                  {model.usage.promptTokens.toLocaleString()}
                
                
                  Completion Tokens
                  {model.usage.completionTokens.toLocaleString()}
                
                
                  Estimated Cost
                  ${model.usage.estimatedCost.toFixed(2)}
                
              
            
          
        

        
          API Reference
          
            Use this model in your applications by making requests to the Gateway API.
          

          
            
              
                POST
                /api/gateway/{model.id}/chat/completions
              
              Create a chat completion with this model

              Request Body
              
                {`{
  "model": "${model.modelId}",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Hello"
        }
      ]
    }
  ],
  "temperature": ${model.parameters.temperature},
  "max_tokens": ${model.parameters.maxTokens}
}`}
              

              Response
              
                {`{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677858242,
  "model": "${model.modelId}",
  "usage": {
    "prompt_tokens": 7,
    "completion_tokens": 29,
    "total_tokens": 36
  },
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Hello! How can I help you today?"
      },
      "finish_reason": "stop",
      "index": 0
    }
  ]
}`}
              
            

            
              
                GET
                /api/gateway/{model.id}/status
              
              Check the status of this model connection

              Response
              
                {`{
  "status": "${model.status}",
  "model": "${model.modelId}",
  "provider": "${model.provider}",
  "last_checked": "2023-04-15T12:30:45Z"
}`}


  )
}
[V0_FILE]typescriptreact:file="app/ai/gateway/page.tsx" isEdit="true" isMerged="true"
import { Suspense } from "react"
import { GatewayExplorer } from "@/components/gateway/gateway-explorer"

export default function GatewayPage() {
  return (
    Loading Gateway...

}>
      
    
  )
}
[V0_FILE]typescriptreact:file="app/ai/gateway/[id]/page.tsx" isEdit="true" isMerged="true"
import { Suspense } from "react"
import { GatewayDetail } from "@/components/gateway/gateway-detail"
import { llmModels } from "@/data/llm-models"
import { notFound } from "next/navigation"

interface GatewayDetailPageProps {
  params: {
    id: string
  }
}

export default function GatewayDetailPage({ params }: GatewayDetailPageProps) {
  const model = llmModels.find((m) => m.id === params.id)

  if (!model) {
    notFound()
  }

  return (
    Loading model details...}>
      
    
  )
}
[V0_FILE]typescriptreact:file="app/ai/explore-mcps/not-found.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function NotFound() {
  return (
    
      MCP Not Found
      The MCP you're looking for doesn't exist or has been removed.
      
    
  )
}
[V0_FILE]typescriptreact:file="components/sidebar/sidebar-nav.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { usePathname, useRouter } from "next/navigation"
import Link from "next/link"
import {
  AppWindow,
  BarChart3,
  Bell,
  BookOpen,
  ChevronDown,
  ChevronRight,
  Database,
  FileCode,
  FolderKanban,
  WaypointsIcon as Gateway,
  GitBranch,
  Globe,
  HelpCircle,
  Home,
  Layers,
  LineChart,
  ListTodo,
  MessageSquare,
  Network,
  Puzzle,
  Server,
  Settings,
  ShieldCheck,
  TestTube,
  Users,
  Rocket,
  Code,
  Hammer,
  LayoutDashboard,
  Plus,
  Zap,
  Info,
  Activity,
} from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

interface SidebarNavProps {
  children: React.ReactNode
}

export function SidebarNav({ children }: SidebarNavProps) {
  const pathname = usePathname()
  const router = useRouter()
  const isMcpExplorer = pathname === "/ai/explore-mcps" || pathname === "/ai/explore-mcps/add"
  const isMcpDetail =
    pathname.startsWith("/ai/explore-mcps/") && pathname !== "/ai/explore-mcps" && pathname !== "/ai/explore-mcps/add"
  const isGateway = pathname === "/ai/gateway" || pathname === "/ai/gateway/add"
  const isGatewayDetail =
    pathname.startsWith("/ai/gateway/") && pathname !== "/ai/gateway" && pathname !== "/ai/gateway/add"
  const isVerdiSuite = pathname.startsWith("/ai/verdi-suite")
  const isAiSection = pathname.startsWith("/ai/")
  const isDataSection = pathname.startsWith("/data/")
  const isEngineeringSection = pathname.startsWith("/engineering/")

  // Determine which section is active based on the pathname
  const getInitialOpenSection = () => {
    if (isAiSection) return "genai"
    if (isDataSection) return "data"
    if (isEngineeringSection) return "engineering"
    return "genai" // Default open section
  }

  const [openSection, setOpenSection] = useState(getInitialOpenSection())

  // Update open section when pathname changes
  useEffect(() => {
    setOpenSection(getInitialOpenSection())
  }, [pathname])

  const toggleSection = (section: string) => {
    if (section === openSection) {
      // If already open, close it
      setOpenSection("")
    } else {
      // Open the section and navigate to the corresponding path
      setOpenSection(section)

      // Navigate to the section's main page
      if (section === "engineering") {
        router.push("/engineering")
      } else if (section === "data") {
        router.push("/data")
      } else if (section === "genai") {
        router.push("/ai")
      }
    }
  }

  // Determine if we should show the contextual navigation
  const showContextualNav = isMcpExplorer || isMcpDetail || isVerdiSuite || isGateway || isGatewayDetail

  return (
    
      
        
          
            
              Fury
            
          
          
            {/* Main Navigation */}
            
              
                
                  
                    
                      
                      Workspace
                    
                  
                
              
            

            {/* Contextual Navigation for MCP Explorer */}
            {isMcpExplorer && (
              
                
                  
                    
                    Home
                  
                  /
                  Explore MCPs
                
                MCP Categories
                
                  
                    
                      
                        
                          
                          All MCPs
                        
                      
                    
                    
                      
                        
                          
                          Internal MCPs
                        
                      
                    
                    
                      
                        
                          
                          External (Pending)
                        
                      
                    
                    
                      
                        
                          
                          External (Approved)
                        
                      
                    
                    
                      
                        
                          
                          Add MCP
                        
                      
                    
                  
                
              
            )}

            {/* Contextual Navigation for Gateway */}
            {isGateway && (
              
                
                  
                    
                    Home
                  
                  /
                  Gateway
                
                Model Providers
                
                  
                    
                      
                        
                          
                          All Models
                        
                      
                    
                    
                      
                        
                          
                          OpenAI
                        
                      
                    
                    
                      
                        
                          
                          Anthropic
                        
                      
                    
                    
                      
                        
                          
                          Google
                        
                      
                    
                    
                      
                        
                          
                          Mistral
                        
                      
                    
                    
                      
                        
                          
                          Add Connection
                        
                      
                    
                  
                
              
            )}

            {/* Contextual Navigation for Gateway Detail */}
            {isGatewayDetail && (
              
                
                  
                    
                    Home
                  
                  /
                  
                    Gateway
                  
                  /
                  Model Detail
                
                Model Navigation
                
                  
                    
                      
                        
                          
                          Overview
                        
                      
                    
                    
                      
                        
                          
                          Configuration
                        
                      
                    
                    
                      
                        
                          
                          Usage
                        
                      
                    
                    
                      
                        
                          
                          API
                        
                      
                    
                  
                
              
            )}

            {/* Contextual Navigation for MCP Detail */}
            {isMcpDetail && (
              
                
                  
                    
                    Home
                  
                  /
                  
                    Explore MCPs
                  
                  /
                  MCP Detail
                
                MCP Navigation
                
                  
                    
                      
                        
                          
                          Overview
                        
                      
                    
                    
                      
                        
                          
                          Tools
                        
                      
                    
                    
                      
                        
                          
                          API
                        
                      
                    
                    
                      
                        
                          
                          Test MCP
                        
                      
                    
                  
                
              
            )}

            {/* Contextual Navigation for Verdi Suite */}
            {isVerdiSuite && (
              
                
                  
                    
                    Home
                  
                  /
                  Verdi Suite
                
                Verdi Suite
                
                  
                    
                      
                        
                          
                          Dashboard
                        
                      
                    
                    
                      
                        
                          
                          Agents
                        
                      
                    
                    
                      
                        
                          
                          Agent Builder
                        
                      
                    
                    
                      
                        
                          
                          IDE
                        
                      
                    
                    
                      
                        
                          
                          Workflows
                        
                      
                    
                    
                      
                        
                          
                          Testing
                        
                      
                    
                    
                      
                        
                          
                          Analytics
                        
                      
                    
                    
                      
                        
                          
                          Deployments
                        
                      
                    
                    
                      
                        
                          
                          Agent Chat
                        
                      
                    
                    
                      
                        
                          
                          Settings
                        
                      
                    
                  
                
              
            )}

            {/* Main Navigation Sections - Only show if not in a contextual view */}
            {!showContextualNav && (
              <>
                {/* Engineering Section */}
                
                  
                  {openSection === "engineering" && (
                    
                      
                        
                          
                            
                              
                              Applications
                            
                          
                        
                        
                          
                            
                              
                              Projects
                            
                          
                        
                        
                          
                            
                              
                              Teams
                            
                          
                        
                        
                          
                            
                              
                              Authorizations
                            
                          
                        
                        
                          
                            
                              
                              Systems
                            
                          
                        
                        
                          
                            
                              
                              Specs Hub
                            
                          
                        
                        
                          
                            
                              
                              Actionables
                            
                          
                        
                        
                          
                            
                              
                              Traffic
                            
                          
                        
                      
                    
                  )}
                

                {/* Gen AI Section */}
                
                  
                  {openSection === "genai" && (
                    
                      
                        
                          
                            
                              
                              Meli GPT
                            
                          
                        
                        
                          
                            
                              
                              Explore MCPs
                            
                          
                        
                        
                          
                            
                              
                              Gateway
                            
                          
                        
                        
                          
                            
                              
                              Prompt Catalog
                            
                          
                        
                        
                          
                            
                              
                              RAG Service
                            
                          
                        
                        
                          
                            
                              
                              Verdi Suite
                            
                          
                        
                        
                          
                            
                              
                              Rules
                            
                          
                        
                      
                    
                  )}
                

                {/* Data Section */}
                
                  
                  {openSection === "data" && (
                    
                      
                        
                          
                            
                              
                              Analytics
                            
                          
                        
                        
                          
                            
                              
                              Query Builder
                            
                          
                        
                        
                          
                            
                              
                              Data Flow
                            
                          
                        
                        
                          
                            
                              
                              Dashboards
                            
                          
                        
                        
                          
                            
                              
                              Catalog
                            
                          
                        
                      
                    
                  )}
                
              
            )}
          
          
            {/* User Profile */}
            
              
              
                User Name
                user@example.com
              
            

            {/* Footer Menu Items */}
            
              
                
                  
                    
                    Notifications
                  
                
              
              
                
                  
                    
                    Help & Support
                  
                
              
              
                
                  
                    
                    Knowledge
                  
                
              
            
          
        
        
          
            
            
              
                
                
                  4
                
              
              
            
          
          {children}
        
      

    
  )
}
[V0_FILE]typescriptreact:file="components/mcp/add-mcp-wizard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { Card } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { ArrowLeft, ArrowRight, Check, Info, Code, Wrench, Trash2, Plus, HelpCircle, Sparkles } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

interface Tool {
  id: string
  name: string
  returnType: string
  description: string
  inputs: ToolInput[]
}

interface ToolInput {
  id: string
  name: string
  type: string
  description: string
  required: boolean
}

export function AddMcpWizard() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [isGeneratingDescription, setIsGeneratingDescription] = useState(false)
  const [characterCount, setCharacterCount] = useState({ overview: 0, description: 0, content: 0 })
  const [tools, setTools] = useState([
    {
      id: "tool-1",
      name: "",
      returnType: "",
      description: "",
      inputs: [],
    },
  ])

  const [formData, setFormData] = useState({
    name: "",
    overview: "",
    shortDescription: "",
    mcpType: "internal",
    mcpMode: ["remote"],
    category: "",
    license: "",
    repository: "",
    version: "",
    communicationProtocol: "stdio",
    stdioContent: "",
    content: "",
  })

  const totalSteps = 4
  const progress = (currentStep / totalSteps) * 100

  const handleInputChange = (e: React.ChangeEvent) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))

    // Update character count
    if (name === "overview") {
      setCharacterCount((prev) => ({ ...prev, overview: value.length }))
    } else if (name === "shortDescription") {
      setCharacterCount((prev) => ({ ...prev, description: value.length }))
    } else if (name === "content") {
      setCharacterCount((prev) => ({ ...prev, content: value.length }))
    }
  }

  const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleRadioChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleCheckboxChange = (name: string, value: string, checked: boolean) => {
    const currentValues = formData[name as keyof typeof formData] as string[]
    let newValues: string[]

    if (checked) {
      newValues = [...currentValues, value]
    } else {
      newValues = currentValues.filter((v) => v !== value)
    }

    setFormData((prev) => ({ ...prev, [name]: newValues }))
  }

  const handleToolChange = (toolId: string, field: keyof Tool, value: string) => {
    setTools((prevTools) => prevTools.map((tool) => (tool.id === toolId ? { ...tool, [field]: value } : tool)))
  }

  const handleToolInputChange = (toolId: string, inputId: string, field: keyof ToolInput, value: any) => {
    setTools((prevTools) =>
      prevTools.map((tool) => {
        if (tool.id === toolId) {
          return {
            ...tool,
            inputs: tool.inputs.map((input) => (input.id === inputId ? { ...input, [field]: value } : input)),
          }
        }
        return tool
      }),
    )
  }

  const addToolInput = (toolId: string) => {
    setTools((prevTools) =>
      prevTools.map((tool) => {
        if (tool.id === toolId) {
          return {
            ...tool,
            inputs: [
              ...tool.inputs,
              {
                id: `input-${tool.inputs.length + 1}-${Date.now()}`,
                name: "",
                type: "string",
                description: "",
                required: true,
              },
            ],
          }
        }
        return tool
      }),
    )
  }

  const removeToolInput = (toolId: string, inputId: string) => {
    setTools((prevTools) =>
      prevTools.map((tool) => {
        if (tool.id === toolId) {
          return {
            ...tool,
            inputs: tool.inputs.filter((input) => input.id !== inputId),
          }
        }
        return tool
      }),
    )
  }

  const addTool = () => {
    setTools((prevTools) => [
      ...prevTools,
      {
        id: `tool-${prevTools.length + 1}-${Date.now()}`,
        name: "",
        returnType: "",
        description: "",
        inputs: [],
      },
    ])
  }

  const removeTool = (toolId: string) => {
    setTools((prevTools) => prevTools.filter((tool) => tool.id !== toolId))
  }

  const generateDescription = () => {
    setIsGeneratingDescription(true)
    // Simulate AI generating a description based on the overview
    setTimeout(() => {
      const generatedDescription = formData.overview
        ? `${formData.name} is an MCP that ${formData.overview.substring(0, 150)}...`
        : "Description will be generated based on the overview."
      setFormData((prev) => ({ ...prev, shortDescription: generatedDescription }))
      setCharacterCount((prev) => ({ ...prev, description: generatedDescription.length }))
      setIsGeneratingDescription(false)
    }, 1500)
  }

  const nextStep = () => {
    if (currentStep < totalSteps) {
      setCurrentStep(currentStep + 1)
      window.scrollTo(0, 0)
    }
  }

  const prevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
      window.scrollTo(0, 0)
    }
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted:", { ...formData, tools })
    // Here you would typically send the data to your API

    // Navigate back to the MCP explorer
    router.push("/ai/explore-mcps")
  }

  // Auto-generate description when overview changes
  useEffect(() => {
    if (formData.overview && !formData.shortDescription) {
      const timer = setTimeout(() => {
        generateDescription()
      }, 2000)
      return () => clearTimeout(timer)
    }
  }, [formData.overview])

  const isStepComplete = (step: number) => {
    switch (step) {
      case 1:
        return formData.name.trim() !== "" && formData.overview.trim() !== ""
      case 2:
        return (
          formData.mcpType !== "" &&
          formData.category !== "" &&
          formData.license !== "" &&
          formData.version.trim() !== ""
        )
      case 3:
        return formData.content.trim() !== ""
      case 4:
        return tools.every((tool) => tool.name.trim() !== "" && tool.description.trim() !== "")
      default:
        return false
    }
  }

  const renderStepIndicator = () => {
    return (
      
        
          
            Step {currentStep} of {totalSteps}
          
          
            {currentStep === 1
              ? "Basic Information"
              : currentStep === 2
                ? "Configuration"
                : currentStep === 3
                  ? "Content"
                  : "Tools"}
          
        
        
        
           setCurrentStep(1)} label="Overview" />
           setCurrentStep(2)} label="Configuration" />
           setCurrentStep(3)} label="Content" />
           setCurrentStep(4)} label="Tools" />
        
      
    )
  }

  return (
    
      {renderStepIndicator()}

      {/* Step 1: Overview */}
      {currentStep === 1 && (
        
          
            
              
                
                  
                    Name
                  
                  
                    
                      
                        
                      
                      
                        
                          Choose a clear, descriptive name for your MCP that indicates its functionality.
                        
                      
                    
                  
                
                
              

              
                
                  
                    
                      Overview
                    
                    
                      Markdown supported
                    
                  
                  {characterCount.overview} / 6000 (Min. 20 characters)
                
                
                  
                    
                    
                    
                    
                    
                    
                  

                                  </div>
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <Label htmlFor="shortDescription" className="text-base font-medium">
                      Short description
                    </Label>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={generateDescription}
                      disabled={isGeneratingDescription || !formData.overview}
                      className="h-7 gap-1 text-xs"
                    >
                      {isGeneratingDescription ? (
                        <>Generating...</>
                      ) : (
                        <>
                          <Sparkles className="h-3 w-3" />
                          Generate with AI
                        </>
                      )}
                    </Button>
                  </div>
                  <div className="text-xs text-gray-500">{characterCount.description} / 200</div>
                </div>
                <Textarea
                  id="shortDescription"
                  name="shortDescription"
                  value={formData.shortDescription}
                  onChange={handleInputChange}
                  placeholder="A brief description of your MCP (will be auto-generated from overview if left empty)"
                  className="min-h-[80px] resize-none"
                  maxLength={200}
                />
                <p className="text-xs text-gray-500 mt-1">
                  This description will be displayed in the MCP explorer card.
                </p>
              </div>
            </div>
          </Card>

          <div className="flex justify-end">
            <Button type="button" onClick={nextStep} className="bg-blue-600 hover:bg-blue-700">
              Next: Configuration
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      {/* Step 2: Configuration */}
      {currentStep === 2 && (
        <div className="space-y-6">
          <Card className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <Label className="text-base font-medium mb-2 block">MCP Type</Label>
                <RadioGroup
                  value={formData.mcpType}
                  onValueChange={(value) => handleRadioChange("mcpType", value)}
                  className="flex gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="internal" id="internal" />
                    <Label htmlFor="internal" className="cursor-pointer">
                      Internal
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="external" id="external" />
                    <Label htmlFor="external" className="cursor-pointer">
                      External
                    </Label>
                  </div>
                </RadioGroup>
                <p className="text-xs text-gray-500 mt-1">
                  Internal MCPs are maintained by your organization, external ones are from third parties.
                </p>
              </div>

              <div>
                <Label className="text-base font-medium mb-2 block">MCP Mode</Label>
                <div className="flex gap-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="local"
                      checked={formData.mcpMode.includes("local")}
                      onCheckedChange={(checked) => handleCheckboxChange("mcpMode", "local", checked === true)}
                    />
                    <Label htmlFor="local" className="cursor-pointer">
                      Local
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="remote"
                      checked={formData.mcpMode.includes("remote")}
                      onCheckedChange={(checked) => handleCheckboxChange("mcpMode", "remote", checked === true)}
                    />
                    <Label htmlFor="remote" className="cursor-pointer">
                      Remote
                    </Label>
                  </div>
                </div>
                <p className="text-xs text-gray-500 mt-1">
                  Local MCPs run on the same machine, remote ones are accessed over the network.
                </p>
              </div>

              <div>
                <Label htmlFor="category" className="text-base font-medium mb-2 block">
                  Category
                </Label>
                <Select value={formData.category} onValueChange={(value) => handleSelectChange("category", value)}>
                  <SelectTrigger id="category" className="w-full">
                    <SelectValue placeholder="Select Category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="research-and-data">Research And Data</SelectItem>
                    <SelectItem value="ai-ml">AI & Machine Learning</SelectItem>
                    <SelectItem value="data-processing">Data Processing</SelectItem>
                    <SelectItem value="development-tools">Development Tools</SelectItem>
                    <SelectItem value="integration">Integration</SelectItem>
                    <SelectItem value="security">Security</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="license" className="text-base font-medium mb-2 block">
                  License
                </Label>
                <Select value={formData.license} onValueChange={(value) => handleSelectChange("license", value)}>
                  <SelectTrigger id="license" className="w-full">
                    <SelectValue placeholder="Select a License" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="apache-2.0">Apache License 2.0</SelectItem>
                    <SelectItem value="mit">MIT</SelectItem>
                    <SelectItem value="gpl-3.0">GPL 3.0</SelectItem>
                    <SelectItem value="bsd-3">BSD 3-Clause</SelectItem>
                    <SelectItem value="proprietary">Proprietary</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="repository" className="text-base font-medium mb-2 block">
                  Repository
                </Label>
                <Input
                  id="repository"
                  name="repository"
                  value={formData.repository}
                  onChange={handleInputChange}
                  placeholder="e.g., github.com/username/repo"
                  className="w-full"
                />
              </div>

              <div>
                <Label htmlFor="version" className="text-base font-medium mb-2 block">
                  Version
                </Label>
                <Input
                  id="version"
                  name="version"
                  value={formData.version}
                  onChange={handleInputChange}
                  placeholder="e.g., 1.0.0"
                  className="w-full"
                  required
                />
              </div>
            </div>

            <div className="mt-6">
              <Label htmlFor="communicationProtocol" className="text-base font-medium mb-2 block">
                Communication Protocol
              </Label>
              <Select
                value={formData.communicationProtocol}
                onValueChange={(value) => handleSelectChange("communicationProtocol", value)}
              >
                <SelectTrigger id="communicationProtocol" className="w-full">
                  <SelectValue placeholder="Select Protocol" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="stdio">Stdio</SelectItem>
                  <SelectItem value="server-site-event">Server Site Event</SelectItem>
                  <SelectItem value="http">HTTP</SelectItem>
                  <SelectItem value="websocket">WebSocket</SelectItem>
                </SelectContent>
              </Select>

              {formData.communicationProtocol === "stdio" && (
                <div className="mt-4">
                  <Label htmlFor="stdioContent" className="text-base font-medium mb-2 block">
                    Stdio
                  </Label>
                  <div className="border rounded-md">
                    <div className="flex items-center justify-between p-2 bg-gray-50 border-b">
                      <div className="flex items-center">
                        <span className="text-xs font-mono">1</span>
                      </div>
                    </div>
                    <Textarea
                      id="stdioContent"
                      name="stdioContent"
                      value={formData.stdioContent}
                      onChange={handleInputChange}
                      placeholder="Enter stdio configuration"
                      className="min-h-[200px] border-0 focus-visible:ring-0 resize-none font-mono text-sm"
                    />
                  </div>
                </div>
              )}
            </div>
          </Card>

          <div className="flex justify-between">
            <Button type="button" variant="outline" onClick={prevStep} className="flex items-center">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Overview
            </Button>
            <Button type="button" onClick={nextStep} className="bg-blue-600 hover:bg-blue-700">
              Next: Content
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      {/* Step 3: Content */}
      {currentStep === 3 && (
        <div className="space-y-6">
          <Card className="p-6">
            <div>
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Label htmlFor="content" className="text-base font-medium">
                    Content
                  </Label>
                  <Badge variant="outline" className="font-normal">
                    Markdown supported
                  </Badge>
                </div>
                <div className="text-xs text-gray-500">{characterCount.content} / 6000</div>
              </div>
              <div className="border rounded-md">
                <div className="flex flex-wrap gap-1 p-1 border-b bg-gray-50">
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Bold</span>
                    <span className="font-bold">B</span>
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Italic</span>
                    <span className="italic">I</span>
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Code</span>
                    <Code className="h-4 w-4" />
                  </Button>
                  <div className="h-6 w-px bg-gray-200 mx-1"></div>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Bullet list</span>
                    <span>•</span>
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Numbered list</span>
                    <span>1.</span>
                  </Button>
                </div>
                <Textarea
                  id="content"
                  name="content"
                  value={formData.content}
                  onChange={handleInputChange}
                  placeholder={`Please provide the content for your MCP. Include any scripts, rules, templates, or other essential components required for its operation. When completing this section, please consider the following questions:

• How can I install and use this MCP?
• What scripts, code, or logic blocks does the MCP utilize?
• Are there any references or dependencies that should be included?`}
                  className="min-h-[400px] border-0 focus-visible:ring-0 resize-none font-mono text-sm"
                  required
                />
              </div>
              <div className="flex items-center mt-2 text-xs text-gray-500">
                <Info className="h-3 w-3 mr-1" />
                This content will be used to document your MCP and help others understand how to use it.
              </div>
            </div>
          </Card>

          <div className="flex justify-between">
            <Button type="button" variant="outline" onClick={prevStep} className="flex items-center">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Configuration
            </Button>
            <Button type="button" onClick={nextStep} className="bg-blue-600 hover:bg-blue-700">
              Next: Tools
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      {/* Step 4: Tools */}
      {currentStep === 4 && (
        <div className="space-y-6">
          <Card className="p-6">
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium">Tools</h3>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                        <HelpCircle className="h-4 w-4" />
                        <span className="sr-only">Tools help</span>
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p className="max-w-xs">
                        Tools define the capabilities of your MCP. Each tool represents a function that can be called by
                        the agent.
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>

              <Accordion type="multiple" className="w-full">
                {tools.map((tool, index) => (
                  <AccordionItem key={tool.id} value={tool.id} className="border rounded-md mb-4 overflow-hidden">
                    <AccordionTrigger className="px-4 py-2 hover:bg-gray-50">
                      <div className="flex items-center gap-2">
                        <Wrench className="h-4 w-4 text-gray-500" />
                        <span className="font-medium">
                          Tool {index + 1}: {tool.name || "Unnamed Tool"}
                        </span>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 py-4 border-t">
                      <div className="space-y-4">
                        <div className="flex justify-end">
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => removeTool(tool.id)}
                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
                          >
                            <Trash2 className="h-4 w-4 mr-1" />
                            Remove Tool
                          </Button>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <Label htmlFor={`${tool.id}-name`} className="text-sm font-medium">
                              Name
                            </Label>
                            <Input
                              id={`${tool.id}-name`}
                              value={tool.name}
                              onChange={(e) => handleToolChange(tool.id, "name", e.target.value)}
                              placeholder="Name Tool"
                              className="mt-1"
                              required
                            />
                          </div>

                          <div>
                            <Label htmlFor={`${tool.id}-returnType`} className="text-sm font-medium">
                              Return Type
                            </Label>
                            <Input
                              id={`${tool.id}-returnType`}
                              value={tool.returnType}
                              onChange={(e) => handleToolChange(tool.id, "returnType", e.target.value)}
                              placeholder="Return Type (e.g., string, number, etc.)"
                              className="mt-1"
                            />
                          </div>
                        </div>

                        <div>
                          <Label htmlFor={`${tool.id}-description`} className="text-sm font-medium">
                            Description
                          </Label>
                          <Textarea
                            id={`${tool.id}-description`}
                            value={tool.description}
                            onChange={(e) => handleToolChange(tool.id, "description", e.target.value)}
                            placeholder="Description of the tool"
                            className="mt-1 min-h-[100px]"
                            required
                          />
                        </div>

                        <div>
                          <div className="flex items-center justify-between mb-2">
                            <Label className="text-sm font-medium">Inputs</Label>
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              onClick={() => addToolInput(tool.id)}
                              className="h-7 gap-1 text-xs"
                            >
                              <Plus className="h-3 w-3" />
                              Add Input
                            </Button>
                          </div>

                          {tool.inputs.length === 0 ? (
                            <div className="text-center py-6 border rounded-md bg-gray-50 text-gray-500 text-sm">
                              There are no inputs. Click Add Input to create one.
                            </div>
                          ) : (
                            <div className="space-y-4">
                              {tool.inputs.map((input, inputIndex) => (
                                <div key={input.id} className="border rounded-md p-4 bg-gray-50">
                                  <div className="flex justify-between items-center mb-3">
                                    <h4 className="text-sm font-medium">Input {inputIndex + 1}</h4>
                                    <Button
                                      type="button"
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => removeToolInput(tool.id, input.id)}
                                      className="h-7 text-red-500 hover:text-red-700 hover:bg-red-50"
                                    >
                                      <Trash2 className="h-3 w-3" />
                                      <span className="sr-only">Remove Input</span>
                                    </Button>
                                  </div>

                                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <div>
                                      <Label htmlFor={`${input.id}-name`} className="text-xs font-medium">
                                        Name
                                      </Label>
                                      <Input
                                        id={`${input.id}-name`}
                                        value={input.name}
                                        onChange={(e) =>
                                          handleToolInputChange(tool.id, input.id, "name", e.target.value)
                                        }
                                        placeholder="Input Name"
                                        className="mt-1 h-8 text-sm"
                                        required
                                      />
                                    </div>

                                    <div>
                                      <Label htmlFor={`${input.id}-type`} className="text-xs font-medium">
                                        Type
                                      </Label>
                                      <Select
                                        value={input.type}
                                        onValueChange={(value) =>
                                          handleToolInputChange(tool.id, input.id, "type", value)
                                        }
                                      >
                                        <SelectTrigger id={`${input.id}-type`} className="mt-1 h-8 text-sm">
                                          <SelectValue placeholder="Select Type" />
                                        </SelectTrigger>
                                        <SelectContent>
                                          <SelectItem value="string">String</SelectItem>
                                          <SelectItem value="number">Number</SelectItem>
                                          <SelectItem value="boolean">Boolean</SelectItem>
                                          <SelectItem value="object">Object</SelectItem>
                                          <SelectItem value="array">Array</SelectItem>
                                        </SelectContent>
                                      </Select>
                                    </div>
                                  </div>

                                  <div className="mb-4">
                                    <Label htmlFor={`${input.id}-description`} className="text-xs font-medium">
                                      Description
                                    </Label>
                                    <Input
                                      id={`${input.id}-description`}
                                      value={input.description}
                                      onChange={(e) =>
                                        handleToolInputChange(tool.id, input.id, "description", e.target.value)
                                      }
                                      placeholder="Input Description"
                                      className="mt-1 h-8 text-sm"
                                    />
                                  </div>

                                  <div className="flex items-center space-x-2">
                                    <Checkbox
                                      id={`${input.id}-required`}
                                      checked={input.required}
                                      onCheckedChange={(checked) =>
                                        handleToolInputChange(tool.id, input.id, "required", checked === true)
                                      }
                                    />
                                    <Label htmlFor={`${input.id}-required`} className="text-xs cursor-pointer">
                                      Required
                                    </Label>
                                  </div>
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>

              <Button
                type="button"
                variant="outline"
                onClick={addTool}
                className="w-full py-6 border-dashed flex items-center justify-center gap-2"
              >
                <Plus className="h-4 w-4" />
                Add Tool
              </Button>
            </div>
          </Card>

          <div className="flex justify-between">
            <Button type="button" variant="outline" onClick={prevStep} className="flex items-center">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Content
            </Button>
            <Button type="submit" className="bg-green-600 hover:bg-green-700">
              <Check className="mr-2 h-4 w-4" />
              Save and Finish
            </Button>
          </div>
        </div>
      )}
    </form>
  )
}

interface StepButtonProps {
  step: number
  currentStep: number
  onClick: () => void
  label: string
}

function StepButton({ step, currentStep, onClick, label }: StepButtonProps) {
  const isActive = step === currentStep
  const isPast = step < currentStep

  return (
    <button
      type="button"
      onClick={onClick}
      className={`flex flex-col items-center ${isActive || isPast ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
    >
      <div
        className={`flex items-center justify-center w-8 h-8 rounded-full mb-1 ${
          isActive
            ? "bg-blue-600 text-white"
            : isPast
              ? "bg-green-100 text-green-600 border border-green-600"
              : "bg-gray-100 text-gray-400"
        }`}
      >
        {isPast ? <Check className="h-4 w-4" /> : step}
      </div>
      <span className="text-xs">{label}</span>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-blue-600" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-3 w-3 text-white" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => <AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />)
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/mcp/mcp-explorer.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Search, Plus } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { McpCard } from "@/components/mcp/mcp-card"
import { mcps } from "@/data/mcps"
import { Button } from "@/components/ui/button"
import Link from "next/link"

type McpType = "all" | "internal" | "external-pending" | "external-approved"

export function McpExplorer() {
  const searchParams = useSearchParams() || new URLSearchParams()
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [activeTab, setActiveTab] = useState<McpType>("all")

  // Initialize the active tab from URL parameters
  useEffect(() => {
    const filter = searchParams.get("filter")
    if (filter) {
      setActiveTab(filter as McpType)
    }
  }, [searchParams])

  const filteredMcps = mcps.filter((mcp) => {
    // Filter by search query
    if (searchQuery && !mcp.name.toLowerCase().includes(searchQuery.toLowerCase())) {
      return false
    }

    // Filter by tab
    if (activeTab === "all") return true
    if (activeTab === "internal") return mcp.type === "internal"
    if (activeTab === "external-pending") return mcp.type === "external" && !mcp.approved
    if (activeTab === "external-approved") return mcp.type === "external" && mcp.approved

    return true
  })

  const handleTabChange = (value: string) => {
    setActiveTab(value as McpType)
    router.push(`/ai/explore-mcps?filter=${value}`)
  }

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold mb-2">Explore MCPs</h1>
        <p className="text-gray-500">
          Discover and manage Model Context Protocol servers to extend your agent capabilities
        </p>
      </div>

      <div className="flex justify-between items-center mb-6">
        <div className="relative max-w-xl">
          <Input
            type="text"
            placeholder="Search MCPs..."
            className="pl-10"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
        </div>
        <Link href="/ai/explore-mcps/add">
          <Button className="bg-orange-500 hover:bg-orange-600">
            <Plus className="mr-2 h-4 w-4" />
            Add MCP
          </Button>
        </Link>
      </div>

      <Tabs defaultValue={activeTab} value={activeTab} className="mb-6" onValueChange={handleTabChange}>
        <TabsList>
          <TabsTrigger value="all">All MCPs</TabsTrigger>
          <TabsTrigger value="internal">Internal MCPs</TabsTrigger>
          <TabsTrigger value="external-pending">External (Pending)</TabsTrigger>
          <TabsTrigger value="external-approved">External (Approved)</TabsTrigger>
        </TabsList>
      </Tabs>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredMcps.map((mcp) => (
          <McpCard key={mcp.id} mcp={mcp} />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mcp/add-mcp-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { Check, Info, Code, Wrench, Trash2, Plus, HelpCircle, Sparkles } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

interface Tool {
  id: string
  name: string
  returnType: string
  description: string
  inputs: ToolInput[]
}

interface ToolInput {
  id: string
  name: string
  type: string
  description: string
  required: boolean
}

export function AddMcpForm() {
  const router = useRouter()
  const [isGeneratingDescription, setIsGeneratingDescription] = useState(false)
  const [characterCount, setCharacterCount] = useState({ overview: 0, description: 0, content: 0 })
  const [expandedSections, setExpandedSections] = useState<string[]>(["overview"])
  const [tools, setTools] = useState<Tool[]>([
    {
      id: "tool-1",
      name: "",
      returnType: "",
      description: "",
      inputs: [],
    },
  ])

  const [formData, setFormData] = useState({
    name: "",
    overview: "",
    shortDescription: "",
    mcpType: "internal",
    mcpMode: ["remote"],
    category: "",
    license: "",
    repository: "",
    version: "",
    communicationProtocol: "stdio",
    stdioContent: "",
    content: "",
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))

    // Update character count
    if (name === "overview") {
      setCharacterCount((prev) => ({ ...prev, overview: value.length }))
    } else if (name === "shortDescription") {
      setCharacterCount((prev) => ({ ...prev, description: value.length }))
    } else if (name === "content") {
      setCharacterCount((prev) => ({ ...prev, content: value.length }))
    }
  }

  const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleRadioChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleCheckboxChange = (name: string, value: string, checked: boolean) => {
    const currentValues = formData[name as keyof typeof formData] as string[]
    let newValues: string[]

    if (checked) {
      newValues = [...currentValues, value]
    } else {
      newValues = currentValues.filter((v) => v !== value)
    }

    setFormData((prev) => ({ ...prev, [name]: newValues }))
  }

  const handleToolChange = (toolId: string, field: keyof Tool, value: string) => {
    setTools((prevTools) => prevTools.map((tool) => (tool.id === toolId ? { ...tool, [field]: value } : tool)))
  }

  const handleToolInputChange = (toolId: string, inputId: string, field: keyof ToolInput, value: any) => {
    setTools((prevTools) =>
      prevTools.map((tool) => {
        if (tool.id === toolId) {
          return {
            ...tool,
            inputs: tool.inputs.map((input) => (input.id === inputId ? { ...input, [field]: value } : input)),
          }
        }
        return tool
      }),
    )
  }

  const addToolInput = (toolId: string) => {
    setTools((prevTools) =>
      prevTools.map((tool) => {
        if (tool.id === toolId) {
          return {
            ...tool,
            inputs: [
              ...tool.inputs,
              {
                id: `input-${tool.inputs.length + 1}-${Date.now()}`,
                name: "",
                type: "string",
                description: "",
                required: true,
              },
            ],
          }
        }
        return tool
      }),
    )
  }

  const removeToolInput = (toolId: string, inputId: string) => {
    setTools((prevTools) =>
      prevTools.map((tool) => {
        if (tool.id === toolId) {
          return {
            ...tool,
            inputs: tool.inputs.filter((input) => input.id !== inputId),
          }
        }
        return tool
      }),
    )
  }

  const addTool = () => {
    setTools((prevTools) => [
      ...prevTools,
      {
        id: `tool-${prevTools.length + 1}-${Date.now()}`,
        name: "",
        returnType: "",
        description: "",
        inputs: [],
      },
    ])
  }

  const removeTool = (toolId: string) => {
    setTools((prevTools) => prevTools.filter((tool) => tool.id !== toolId))
  }

  const generateDescription = () => {
    setIsGeneratingDescription(true)
    // Simulate AI generating a description based on the overview
    setTimeout(() => {
      const generatedDescription = formData.overview
        ? `${formData.name} is an MCP that ${formData.overview.substring(0, 150)}...`
        : "Description will be generated based on the overview."
      setFormData((prev) => ({ ...prev, shortDescription: generatedDescription }))
      setCharacterCount((prev) => ({ ...prev, description: generatedDescription.length }))
      setIsGeneratingDescription(false)
    }, 1500)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted:", { ...formData, tools })
    // Here you would typically send the data to your API

    // Navigate back to the MCP explorer
    router.push("/ai/explore-mcps")
  }

  // Auto-generate description when overview changes
  useEffect(() => {
    if (formData.overview && !formData.shortDescription) {
      const timer = setTimeout(() => {
        generateDescription()
      }, 2000)
      return () => clearTimeout(timer)
    }
  }, [formData.overview])

  const toggleSection = (section: string) => {
    setExpandedSections((prev) => {
      if (prev.includes(section)) {
        return prev.filter((s) => s !== section)
      } else {
        return [...prev, section]
      }
    })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6 pb-10">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">Add MCP</h1>
        <Button type="submit" className="bg-green-600 hover:bg-green-700">
          <Check className="mr-2 h-4 w-4" />
          Save MCP
        </Button>
      </div>

      <Accordion type="multiple" value={expandedSections} onValueChange={setExpandedSections} className="space-y-4">
        {/* Overview Section */}
        <AccordionItem value="overview" className="border rounded-lg overflow-hidden">
          <AccordionTrigger className="px-6 py-4 hover:bg-gray-50 data-[state=open]:bg-gray-50 border-b">
            <div className="flex flex-col items-start text-left">
              <div className="text-lg font-medium">Overview</div>
              <div className="text-sm text-gray-500">Basic information about your MCP</div>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 py-4">
            <div className="space-y-6">
              <div>
                <div className="flex items-center justify-between mb-2">
                  <Label htmlFor="name" className="text-base font-medium">
                    Name
                  </Label>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <HelpCircle className="h-4 w-4" />
                          <span className="sr-only">Name help</span>
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p className="max-w-xs">
                          Choose a clear, descriptive name for your MCP that indicates its functionality.
                        </p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
                <Input
                  id="name"
                  name="name"
                  value={formData.name}
                  onChange={handleInputChange}
                  placeholder="Enter MCP name"
                  className="mt-1"
                  required
                />
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <Label htmlFor="overview" className="text-base font-medium">
                      Overview
                    </Label>
                    <Badge variant="outline" className="font-normal">
                      Markdown supported
                    </Badge>
                  </div>
                  <div className="text-xs text-gray-500">{characterCount.overview} / 6000 (Min. 20 characters)</div>
                </div>
                <div className="border rounded-md">
                  <div className="flex flex-wrap gap-1 p-1 border-b bg-gray-50">
                    <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <span className="sr-only">Bold</span>
                      <span className="font-bold">B</span>
                    </Button>
                    <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <span className="sr-only">Italic</span>
                      <span className="italic">I</span>
                    </Button>
                    <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <span className="sr-only">Code</span>
                      <Code className="h-4 w-4" />
                    </Button>
                    <div className="h-6 w-px bg-gray-200 mx-1"></div>
                    <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <span className="sr-only">Bullet list</span>
                      <span>•</span>
                    </Button>
                    <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <span className="sr-only">Numbered list</span>
                      <span>1.</span>
                    </Button>
                  </div>
                  <Textarea
                    id="overview"
                    name="overview"
                    value={formData.overview}
                    onChange={handleInputChange}
                    placeholder={`Please provide an overview of your MCP. You may use the following questions as a guide:

• What is its main functionality?
• What business problem does it address?
• What logic or process does it implement?
• Why is it important or useful?`}
                    className="min-h-[300px] border-0 focus-visible:ring-0 resize-none font-mono text-sm"
                    required
                  />
                </div>
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <Label htmlFor="shortDescription" className="text-base font-medium">
                      Short description
                    </Label>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={generateDescription}
                      disabled={isGeneratingDescription || !formData.overview}
                      className="h-7 gap-1 text-xs"
                    >
                      {isGeneratingDescription ? (
                        <>Generating...</>
                      ) : (
                        <>
                          <Sparkles className="h-3 w-3" />
                          Generate with AI
                        </>
                      )}
                    </Button>
                  </div>
                  <div className="text-xs text-gray-500">{characterCount.description} / 200</div>
                </div>
                <Textarea
                  id="shortDescription"
                  name="shortDescription"
                  value={formData.shortDescription}
                  onChange={handleInputChange}
                  placeholder="A brief description of your MCP (will be auto-generated from overview if left empty)"
                  className="min-h-[80px] resize-none"
                  maxLength={200}
                />
                <p className="text-xs text-gray-500 mt-1">
                  This description will be displayed in the MCP explorer card.
                </p>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        {/* Configuration Section */}
        <AccordionItem value="configuration" className="border rounded-lg overflow-hidden">
          <AccordionTrigger className="px-6 py-4 hover:bg-gray-50 data-[state=open]:bg-gray-50 border-b">
            <div className="flex flex-col items-start text-left">
              <div className="text-lg font-medium">Configuration</div>
              <div className="text-sm text-gray-500">Technical details and settings for your MCP</div>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 py-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <Label className="text-base font-medium mb-2 block">MCP Type</Label>
                <RadioGroup
                  value={formData.mcpType}
                  onValueChange={(value) => handleRadioChange("mcpType", value)}
                  className="flex gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="internal" id="internal" />
                    <Label htmlFor="internal" className="cursor-pointer">
                      Internal
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="external" id="external" />
                    <Label htmlFor="external" className="cursor-pointer">
                      External
                    </Label>
                  </div>
                </RadioGroup>
                <p className="text-xs text-gray-500 mt-1">
                  Internal MCPs are maintained by your organization, external ones are from third parties.
                </p>
              </div>

              <div>
                <Label className="text-base font-medium mb-2 block">MCP Mode</Label>
                <div className="flex gap-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="local"
                      checked={formData.mcpMode.includes("local")}
                      onCheckedChange={(checked) => handleCheckboxChange("mcpMode", "local", checked === true)}
                    />
                    <Label htmlFor="local" className="cursor-pointer">
                      Local
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="remote"
                      checked={formData.mcpMode.includes("remote")}
                      onCheckedChange={(checked) => handleCheckboxChange("mcpMode", "remote", checked === true)}
                    />
                    <Label htmlFor="remote" className="cursor-pointer">
                      Remote
                    </Label>
                  </div>
                </div>
                <p className="text-xs text-gray-500 mt-1">
                  Local MCPs run on the same machine, remote ones are accessed over the network.
                </p>
              </div>

              <div>
                <Label htmlFor="category" className="text-base font-medium mb-2 block">
                  Category
                </Label>
                <Select value={formData.category} onValueChange={(value) => handleSelectChange("category", value)}>
                  <SelectTrigger id="category" className="w-full">
                    <SelectValue placeholder="Select Category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="research-and-data">Research And Data</SelectItem>
                    <SelectItem value="ai-ml">AI & Machine Learning</SelectItem>
                    <SelectItem value="data-processing">Data Processing</SelectItem>
                    <SelectItem value="development-tools">Development Tools</SelectItem>
                    <SelectItem value="integration">Integration</SelectItem>
                    <SelectItem value="security">Security</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="license" className="text-base font-medium mb-2 block">
                  License
                </Label>
                <Select value={formData.license} onValueChange={(value) => handleSelectChange("license", value)}>
                  <SelectTrigger id="license" className="w-full">
                    <SelectValue placeholder="Select a License" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="apache-2.0">Apache License 2.0</SelectItem>
                    <SelectItem value="mit">MIT</SelectItem>
                    <SelectItem value="gpl-3.0">GPL 3.0</SelectItem>
                    <SelectItem value="bsd-3">BSD 3-Clause</SelectItem>
                    <SelectItem value="proprietary">Proprietary</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="repository" className="text-base font-medium mb-2 block">
                  Repository
                </Label>
                <Input
                  id="repository"
                  name="repository"
                  value={formData.repository}
                  onChange={handleInputChange}
                  placeholder="e.g., github.com/username/repo"
                  className="w-full"
                />
              </div>

              <div>
                <Label htmlFor="version" className="text-base font-medium mb-2 block">
                  Version
                </Label>
                <Input
                  id="version"
                  name="version"
                  value={formData.version}
                  onChange={handleInputChange}
                  placeholder="e.g., 1.0.0"
                  className="w-full"
                  required
                />
              </div>
            </div>

            <div className="mt-6">
              <Label htmlFor="communicationProtocol" className="text-base font-medium mb-2 block">
                Communication Protocol
              </Label>
              <Select
                value={formData.communicationProtocol}
                onValueChange={(value) => handleSelectChange("communicationProtocol", value)}
              >
                <SelectTrigger id="communicationProtocol" className="w-full">
                  <SelectValue placeholder="Select Protocol" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="stdio">Stdio</SelectItem>
                  <SelectItem value="server-site-event">Server Site Event</SelectItem>
                  <SelectItem value="http">HTTP</SelectItem>
                  <SelectItem value="websocket">WebSocket</SelectItem>
                </SelectContent>
              </Select>

              {formData.communicationProtocol === "stdio" && (
                <div className="mt-4">
                  <Label htmlFor="stdioContent" className="text-base font-medium mb-2 block">
                    Stdio
                  </Label>
                  <div className="border rounded-md">
                    <div className="flex items-center justify-between p-2 bg-gray-50 border-b">
                      <div className="flex items-center">
                        <span className="text-xs font-mono">1</span>
                      </div>
                    </div>
                    <Textarea
                      id="stdioContent"
                      name="stdioContent"
                      value={formData.stdioContent}
                      onChange={handleInputChange}
                      placeholder="Enter stdio configuration"
                      className="min-h-[200px] border-0 focus-visible:ring-0 resize-none font-mono text-sm"
                    />
                  </div>
                </div>
              )}
            </div>
          </AccordionContent>
        </AccordionItem>

        {/* Content Section */}
        <AccordionItem value="content" className="border rounded-lg overflow-hidden">
          <AccordionTrigger className="px-6 py-4 hover:bg-gray-50 data-[state=open]:bg-gray-50 border-b">
            <div className="flex flex-col items-start text-left">
              <div className="text-lg font-medium">Content</div>
              <div className="text-sm text-gray-500">Documentation and implementation details</div>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 py-4">
            <div>
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Label htmlFor="content" className="text-base font-medium">
                    Content
                  </Label>
                  <Badge variant="outline" className="font-normal">
                    Markdown supported
                  </Badge>
                </div>
                <div className="text-xs text-gray-500">{characterCount.content} / 6000</div>
              </div>
              <div className="border rounded-md">
                <div className="flex flex-wrap gap-1 p-1 border-b bg-gray-50">
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Bold</span>
                    <span className="font-bold">B</span>
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Italic</span>
                    <span className="italic">I</span>
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Code</span>
                    <Code className="h-4 w-4" />
                  </Button>
                  <div className="h-6 w-px bg-gray-200 mx-1"></div>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Bullet list</span>
                    <span>•</span>
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Numbered list</span>
                    <span>1.</span>
                  </Button>
                </div>
                <Textarea
                  id="content"
                  name="content"
                  value={formData.content}
                  onChange={handleInputChange}
                  placeholder={`Please provide the content for your MCP. Include any scripts, rules, templates, or other essential components required for its operation. When completing this section, please consider the following questions:

• How can I install and use this MCP?
• What scripts, code, or logic blocks does the MCP utilize?
• Are there any references or dependencies that should be included?`}
                  className="min-h-[400px] border-0 focus-visible:ring-0 resize-none font-mono text-sm"
                  required
                />
              </div>
              <div className="flex items-center mt-2 text-xs text-gray-500">
                <Info className="h-3 w-3 mr-1" />
                This content will be used to document your MCP and help others understand how to use it.
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        {/* Tools Section */}
        <AccordionItem value="tools" className="border rounded-lg overflow-hidden">
          <AccordionTrigger className="px-6 py-4 hover:bg-gray-50 data-[state=open]:bg-gray-50 border-b">
            <div className="flex flex-col items-start text-left">
              <div className="text-lg font-medium">Tools</div>
              <div className="text-sm text-gray-500">Define the capabilities and functions of your MCP</div>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 py-4">
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium">Tools</h3>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                        <HelpCircle className="h-4 w-4" />
                        <span className="sr-only">Tools help</span>
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p className="max-w-xs">
                        Tools define the capabilities of your MCP. Each tool represents a function that can be called by
                        the agent.
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>

              <Accordion type="multiple" className="w-full">
                {tools.map((tool, index) => (
                  <AccordionItem key={tool.id} value={tool.id} className="border rounded-md mb-4 overflow-hidden">
                    <AccordionTrigger className="px-4 py-2 hover:bg-gray-50">
                      <div className="flex items-center gap-2">
                        <Wrench className="h-4 w-4 text-gray-500" />
                        <span className="font-medium">
                          Tool {index + 1}: {tool.name || "Unnamed Tool"}
                        </span>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-4 py-4 border-t">
                      <div className="space-y-4">
                        <div className="flex justify-end">
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => removeTool(tool.id)}
                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
                          >
                            <Trash2 className="h-4 w-4 mr-1" />
                            Remove Tool
                          </Button>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <Label htmlFor={`${tool.id}-name`} className="text-sm font-medium">
                              Name
                            </Label>
                            <Input
                              id={`${tool.id}-name`}
                              value={tool.name}
                              onChange={(e) => handleToolChange(tool.id, "name", e.target.value)}
                              placeholder="Name Tool"
                              className="mt-1"
                              required
                            />
                          </div>

                          <div>
                            <Label htmlFor={`${tool.id}-returnType`} className="text-sm font-medium">
                              Return Type
                            </Label>
                            <Input
                              id={`${tool.id}-returnType`}
                              value={tool.returnType}
                              onChange={(e) => handleToolChange(tool.id, "returnType", e.target.value)}
                              placeholder="Return Type (e.g., string, number, etc.)"
                              className="mt-1"
                            />
                          </div>
                        </div>

                        <div>
                          <Label htmlFor={`${tool.id}-description`} className="text-sm font-medium">
                            Description
                          </Label>
                          <Textarea
                            id={`${tool.id}-description`}
                            value={tool.description}
                            onChange={(e) => handleToolChange(tool.id, "description", e.target.value)}
                            placeholder="Description of the tool"
                            className="mt-1 min-h-[100px]"
                            required
                          />
                        </div>

                        <div>
                          <div className="flex items-center justify-between mb-2">
                            <Label className="text-sm font-medium">Inputs</Label>
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              onClick={() => addToolInput(tool.id)}
                              className="h-7 gap-1 text-xs"
                            >
                              <Plus className="h-3 w-3" />
                              Add Input
                            </Button>
                          </div>

                          {tool.inputs.length === 0 ? (
                            <div className="text-center py-6 border rounded-md bg-gray-50 text-gray-500 text-sm">
                              There are no inputs. Click Add Input to create one.
                            </div>
                          ) : (
                            <div className="space-y-4">
                              {tool.inputs.map((input, inputIndex) => (
                                <div key={input.id} className="border rounded-md p-4 bg-gray-50">
                                  <div className="flex justify-between items-center mb-3">
                                    <h4 className="text-sm font-medium">Input {inputIndex + 1}</h4>
                                    <Button
                                      type="button"
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => removeToolInput(tool.id, input.id)}
                                      className="h-7 text-red-500 hover:text-red-700 hover:bg-red-50"
                                    >
                                      <Trash2 className="h-3 w-3" />
                                      <span className="sr-only">Remove Input</span>
                                    </Button>
                                  </div>

                                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <div>
                                      <Label htmlFor={`${input.id}-name`} className="text-xs font-medium">
                                        Name
                                      </Label>
                                      <Input
                                        id={`${input.id}-name`}
                                        value={input.name}
                                        onChange={(e) =>
                                          handleToolInputChange(tool.id, input.id, "name", e.target.value)
                                        }
                                        placeholder="Input Name"
                                        className="mt-1 h-8 text-sm"
                                        required
                                      />
                                    </div>

                                    <div>
                                      <Label htmlFor={`${input.id}-type`} className="text-xs font-medium">
                                        Type
                                      </Label>
                                      <Select
                                        value={input.type}
                                        onValueChange={(value) =>
                                          handleToolInputChange(tool.id, input.id, "type", value)
                                        }
                                      >
                                        <SelectTrigger id={`${input.id}-type`} className="mt-1 h-8 text-sm">
                                          <SelectValue placeholder="Select Type" />
                                        </SelectTrigger>
                                        <SelectContent>
                                          <SelectItem value="string">String</SelectItem>
                                          <SelectItem value="number">Number</SelectItem>
                                          <SelectItem value="boolean">Boolean</SelectItem>
                                          <SelectItem value="object">Object</SelectItem>
                                          <SelectItem value="array">Array</SelectItem>
                                        </SelectContent>
                                      </Select>
                                    </div>
                                  </div>

                                  <div className="mb-4">
                                    <Label htmlFor={`${input.id}-description`} className="text-xs font-medium">
                                      Description
                                    </Label>
                                    <Input
                                      id={`${input.id}-description`}
                                      value={input.description}
                                      onChange={(e) =>
                                        handleToolInputChange(tool.id, input.id, "description", e.target.value)
                                      }
                                      placeholder="Input Description"
                                      className="mt-1 h-8 text-sm"
                                    />
                                  </div>

                                  <div className="flex items-center space-x-2">
                                    <Checkbox
                                      id={`${input.id}-required`}
                                      checked={input.required}
                                      onCheckedChange={(checked) =>
                                        handleToolInputChange(tool.id, input.id, "required", checked === true)
                                      }
                                    />
                                    <Label htmlFor={`${input.id}-required`} className="text-xs cursor-pointer">
                                      Required
                                    </Label>
                                  </div>
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>

              <Button
                type="button"
                variant="outline"
                onClick={addTool}
                className="w-full py-6 border-dashed flex items-center justify-center gap-2"
              >
                <Plus className="h-4 w-4" />
                Add Tool
              </Button>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      <div className="flex justify-end mt-8">
        <Button type="submit" className="bg-green-600 hover:bg-green-700">
          <Check className="mr-2 h-4 w-4" />
          Save MCP
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/ai/explore-mcps/add/page.tsx" isEdit="true" isMerged="true"
import { Suspense } from "react"
import { AddMcpForm } from "@/components/mcp/add-mcp-form"

export default function AddMcpPage() {
  return (
    <div className="container mx-auto py-6">
      <Suspense fallback={<div>Loading form...</div>}>
        <AddMcpForm />
      </Suspense>
    </div>
  )
}
[V0_FILE]typescriptreact:file="types/prompt.ts" isMerged="true"
export interface PromptVariable {
  name: string
  description: string
  type: "text" | "number" | "boolean" | "select"
  options?: string[] // Para variables de tipo "select"
  default?: string | number | boolean
  required: boolean
}

export type PromptFunctionality =
  | "data analysis"
  | "content generation"
  | "reporting"
  | "task automation"
  | "workflow optimization"
  | "code generation"
  | "customer support"

export type PromptType =
  | "generation"
  | "repetitive tasks"
  | "transformation"
  | "retrieval & analysis"
  | "validation & compliance"
  | "decision support"

export interface Prompt {
  id: string
  name: string
  description: string
  promptText: string
  variables: PromptVariable[]
  functionality: PromptFunctionality
  cld: string // Customer Language Domain
  type: PromptType
  alias: string
  author: string
  createdAt: string
  updatedAt: string
  usageCount: number
  tags: string[]
  isVerified: boolean
}
[V0_FILE]typescriptreact:file="data/prompts.ts" isMerged="true"
import type { Prompt } from "@/types/prompt"

export const prompts: Prompt[] = [
  {
    id: "weekly-report-generator",
    name: "Weekly Report Generator",
    description: "Generates a comprehensive weekly report based on key metrics and achievements",
    promptText: `Create a weekly report for {{department}} covering the period from {{startDate}} to {{endDate}}. 
Include the following sections:
1. Executive Summary
2. Key Metrics: {{metrics}}
3. Achievements
4. Challenges
5. Next Week's Goals
6. Resources Needed

Use a professional tone and format the report in markdown.`,
    variables: [
      {
        name: "department",
        description: "The department for which the report is being generated",
        type: "select",
        options: ["Engineering", "Marketing", "Sales", "Customer Support", "Product", "Design"],
        required: true,
      },
      {
        name: "startDate",
        description: "The start date of the reporting period",
        type: "text",
        required: true,
      },
      {
        name: "endDate",
        description: "The end date of the reporting period",
        type: "text",
        required: true,
      },
      {
        name: "metrics",
        description: "Key metrics to include in the report",
        type: "text",
        required: true,
      },
    ],
    functionality: "reporting",
    cld: "Business Operations",
    type: "generation",
    alias: "weekly-report",
    author: "reporting-team",
    createdAt: "2024-03-15",
    updatedAt: "2024-04-02",
    usageCount: 1245,
    tags: ["report", "weekly", "business"],
    isVerified: true,
  },
  {
    id: "data-analysis-assistant",
    name: "Data Analysis Assistant",
    description: "Analyzes data sets and provides insights, trends, and recommendations",
    promptText: `Analyze the following {{dataType}} data and provide insights:

Data:
{{data}}

Please include:
1. Key trends and patterns
2. Anomalies or outliers
3. Correlations between variables
4. Actionable recommendations
5. Visualizations suggestions

Format the analysis in a clear, structured way with headings and bullet points.`,
    variables: [
      {
        name: "dataType",
        description: "The type of data being analyzed",
        type: "select",
        options: ["Sales", "User Behavior", "Performance Metrics", "Survey Results", "Financial"],
        required: true,
      },
      {
        name: "data",
        description: "The data to be analyzed (CSV, JSON, or plain text)",
        type: "text",
        required: true,
      },
    ],
    functionality: "data analysis",
    cld: "Analytics",
    type: "retrieval & analysis",
    alias: "analyze-data",
    author: "data-science-team",
    createdAt: "2024-02-10",
    updatedAt: "2024-04-10",
    usageCount: 3782,
    tags: ["data", "analysis", "insights"],
    isVerified: true,
  },
  {
    id: "product-description-generator",
    name: "Product Description Generator",
    description: "Creates compelling product descriptions for e-commerce platforms",
    promptText: `Create a compelling product description for {{productName}} with the following details:

- Category: {{category}}
- Key Features: {{features}}
- Target Audience: {{audience}}
- Price Point: {{pricePoint}}
- Unique Selling Proposition: {{usp}}

The description should be {{length}} words and use a {{tone}} tone. Include SEO-friendly keywords and a strong call-to-action.`,
    variables: [
      {
        name: "productName",
        description: "The name of the product",
        type: "text",
        required: true,
      },
      {
        name: "category",
        description: "Product category",
        type: "text",
        required: true,
      },
      {
        name: "features",
        description: "Key features of the product",
        type: "text",
        required: true,
      },
      {
        name: "audience",
        description: "Target audience for the product",
        type: "text",
        required: true,
      },
      {
        name: "pricePoint",
        description: "Price point (e.g., budget, mid-range, premium)",
        type: "select",
        options: ["Budget", "Mid-range", "Premium", "Luxury"],
        required: true,
      },
      {
        name: "usp",
        description: "Unique selling proposition",
        type: "text",
        required: true,
      },
      {
        name: "length",
        description: "Desired length in words",
        type: "number",
        default: 200,
        required: false,
      },
      {
        name: "tone",
        description: "Tone of the description",
        type: "select",
        options: ["Professional", "Casual", "Enthusiastic", "Technical", "Luxurious"],
        default: "Professional",
        required: false,
      },
    ],
    functionality: "content generation",
    cld: "E-commerce",
    type: "generation",
    alias: "product-desc",
    author: "marketing-team",
    createdAt: "2024-01-20",
    updatedAt: "2024-03-25",
    usageCount: 5621,
    tags: ["marketing", "product", "e-commerce"],
    isVerified: true,
  },
  {
    id: "code-review-assistant",
    name: "Code Review Assistant",
    description: "Analyzes code snippets and provides feedback, suggestions, and best practices",
    promptText: `Review the following {{language}} code and provide feedback:

\`\`\`{{language}}
{{code}}
\`\`\`

Please analyze the code for:
1. Bugs and potential issues
2. Performance optimizations
3. Readability and maintainability
4. Security concerns
5. Adherence to best practices for {{language}}

If applicable, suggest improvements with code examples.`,
    variables: [
      {
        name: "language",
        description: "Programming language of the code",
        type: "select",
        options: ["JavaScript", "Python", "Java", "C#", "Go", "Ruby", "PHP", "TypeScript"],
        required: true,
      },
      {
        name: "code",
        description: "The code snippet to review",
        type: "text",
        required: true,
      },
    ],
    functionality: "code generation",
    cld: "Software Development",
    type: "validation & compliance",
    alias: "review-code",
    author: "dev-tools-team",
    createdAt: "2024-02-05",
    updatedAt: "2024-04-15",
    usageCount: 4328,
    tags: ["code", "review", "development"],
    isVerified: true,
  },
  {
    id: "customer-email-responder",
    name: "Customer Email Responder",
    description: "Generates professional and empathetic responses to customer inquiries and issues",
    promptText: `Create a response to the following customer email:

Customer Email:
{{customerEmail}}

Consider the following details:
- Customer Name: {{customerName}}
- Customer Status: {{customerStatus}}
- Issue Category: {{issueCategory}}
- Previous Interactions: {{previousInteractions}}

The response should be {{tone}} in tone, address the customer's concerns directly, and provide clear next steps or solutions. Include a proper greeting and sign-off.`,
    variables: [
      {
        name: "customerEmail",
        description: "The email content from the customer",
        type: "text",
        required: true,
      },
      {
        name: "customerName",
        description: "Customer's name",
        type: "text",
        required: true,
      },
      {
        name: "customerStatus",
        description: "Customer's status",
        type: "select",
        options: ["New", "Regular", "Premium", "Enterprise"],
        required: true,
      },
      {
        name: "issueCategory",
        description: "Category of the customer's issue",
        type: "select",
        options: ["Technical Support", "Billing", "Product Inquiry", "Complaint", "Feature Request"],
        required: true,
      },
      {
        name: "previousInteractions",
        description: "Summary of previous interactions with this customer",
        type: "text",
        required: false,
      },
      {
        name: "tone",
        description: "Tone of the response",
        type: "select",
        options: ["Professional", "Friendly", "Empathetic", "Formal"],
        default: "Professional",
        required: false,
      },
    ],
    functionality: "customer support",
    cld: "Customer Service",
    type: "generation",
    alias: "customer-response",
    author: "support-team",
    createdAt: "2024-01-15",
    updatedAt: "2024-03-30",
    usageCount: 8754,
    tags: ["customer", "support", "email"],
    isVerified: true,
  },
  {
    id: "meeting-summarizer",
    name: "Meeting Summarizer",
    description: "Transforms meeting transcripts into concise, structured summaries with action items",
    promptText: `Summarize the following meeting transcript:

Transcript:
{{transcript}}

Please structure the summary as follows:
1. Meeting Overview (date, participants, duration: {{duration}})
2. Key Discussion Points
3. Decisions Made
4. Action Items (with assignees if mentioned)
5. Follow-up Schedule

The summary should be concise but comprehensive, highlighting the most important points and outcomes.`,
    variables: [
      {
        name: "transcript",
        description: "The meeting transcript to summarize",
        type: "text",
        required: true,
      },
      {
        name: "duration",
        description: "Duration of the meeting",
        type: "text",
        required: false,
      },
    ],
    functionality: "content generation",
    cld: "Business Operations",
    type: "transformation",
    alias: "summarize-meeting",
    author: "productivity-team",
    createdAt: "2024-02-25",
    updatedAt: "2024-04-05",
    usageCount: 2967,
    tags: ["meeting", "summary", "productivity"],
    isVerified: true,
  },
]
[V0_FILE]typescriptreact:file="components/prompt/prompt-card.tsx" isMerged="true"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { FileText, Clock, Tag } from "lucide-react"
import Link from "next/link"
import type { Prompt } from "@/types/prompt"

interface PromptCardProps {
  prompt: Prompt
}

export function PromptCard({ prompt }: PromptCardProps) {
  return (
    <Link href={`/ai/prompt-catalog/${prompt.id}`}>
      <Card className="p-5 hover:shadow-md transition-shadow cursor-pointer h-full">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-2">
            <FileText className="h-5 w-5 text-blue-500" />
            <h3 className="font-medium">{prompt.name}</h3>
          </div>
          <div>
            {prompt.isVerified ? (
              <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                Verified
              </Badge>
            ) : (
              <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
                Community
              </Badge>
            )}
          </div>
        </div>

        <p className="text-sm text-gray-600 mb-4 line-clamp-2">{prompt.description}</p>

        <div className="flex items-center justify-between text-xs text-gray-500">
          <div className="flex items-center gap-1">
            <Clock className="h-3 w-3" />
            <span>{new Date(prompt.updatedAt).toLocaleDateString()}</span>
          </div>
          <div className="flex items-center gap-1">
            <Tag className="h-3 w-3" />
            <span>{prompt.functionality}</span>
          </div>
        </div>
      </Card>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/prompt/prompt-explorer.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Plus, Filter } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PromptCard } from "./prompt-card"
import { prompts } from "@/data/prompts"
import Link from "next/link"

export function PromptExplorer() {
  const [searchQuery, setSearchQuery] = useState("")
  const [functionality, setFunctionality] = useState<string>("all")

  // Filter prompts based on search query and functionality
  const filteredPrompts = prompts.filter((prompt) => {
    const matchesSearch =
      prompt.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      prompt.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      prompt.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))

    const matchesFunctionality = functionality === "all" || prompt.functionality === functionality

    return matchesSearch && matchesFunctionality
  })

  return (
    <div className="container mx-auto py-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">Prompt Catalog</h1>
        <Link href="/ai/prompt-catalog/add">
          <Button className="bg-orange-500 hover:bg-orange-600">
            <Plus className="mr-2 h-4 w-4" /> Add Prompt
          </Button>
        </Link>
      </div>

      <div className="flex flex-col md:flex-row gap-4 mb-6">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input
            placeholder="Search prompts..."
            className="pl-10"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <div className="flex gap-2">
          <Select value={functionality} onValueChange={setFunctionality}>
            <SelectTrigger className="w-[200px]">
              <SelectValue placeholder="Functionality" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Functionalities</SelectItem>
              <SelectItem value="data analysis">Data Analysis</SelectItem>
              <SelectItem value="content generation">Content Generation</SelectItem>
              <SelectItem value="reporting">Reporting</SelectItem>
              <SelectItem value="task automation">Task Automation</SelectItem>
              <SelectItem value="workflow optimization">Workflow Optimization</SelectItem>
              <SelectItem value="code generation">Code Generation</SelectItem>
              <SelectItem value="customer support">Customer Support</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" className="gap-2">
            <Filter className="h-4 w-4" /> More Filters
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredPrompts.length > 0 ? (
          filteredPrompts.map((prompt) => <PromptCard key={prompt.id} prompt={prompt} />)
        ) : (
          <div className="col-span-full text-center py-10">
            <p className="text-gray-500">No prompts found matching your criteria.</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ai/prompt-catalog/page.tsx" isMerged="true"
import { Suspense } from "react"
import { PromptExplorer } from "@/components/prompt/prompt-explorer"

export default function PromptCatalogPage() {
  return (
    <Suspense fallback={<div className="p-6">Loading Prompts...</div>}>
      <PromptExplorer />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/ai/prompt-catalog/[id]/page.tsx" isMerged="true"
import { Suspense } from "react"
import { PromptDetail } from "@/components/prompt/prompt-detail"
import { prompts } from "@/data/prompts"
import { notFound } from "next/navigation"

interface PromptDetailPageProps {
  params: {
    id: string
  }
}

export default function PromptDetailPage({ params }: PromptDetailPageProps) {
  const prompt = prompts.find((p) => p.id === params.id)

  if (!prompt) {
    notFound()
  }

  return (
    <Suspense fallback={<div className="p-6">Loading Prompt details...</div>}>
      <PromptDetail prompt={prompt} />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/ai/prompt-catalog/not-found.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
      <h2 className="text-2xl font-bold mb-2">Prompt Not Found</h2>
      <p className="text-gray-600 mb-6">The prompt you're looking for doesn't exist or has been removed.</p>
      <Link href="/ai/prompt-catalog">
        <Button>Return to Prompt Catalog</Button>
      </Link>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/prompt/prompt-detail.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { ArrowLeft, FileText, Tag, Copy, Check, Info, Settings } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import type { Prompt, PromptVariable } from "@/types/prompt"

interface PromptDetailProps {
  prompt: Prompt
}

export function PromptDetail({ prompt }: PromptDetailProps) {
  const searchParams = useSearchParams() || new URLSearchParams()
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("overview")
  const [copied, setCopied] = useState(false)
  const [variableValues, setVariableValues] = useState<Record<string, string>>({})

  // Initialize the active tab from URL parameters
  useEffect(() => {
    const tab = searchParams.get("tab")
    if (tab) {
      setActiveTab(tab)
    }
  }, [searchParams])

  const handleTabChange = (value: string) => {
    setActiveTab(value)
    router.push(`/ai/prompt-catalog/${prompt.id}?tab=${value}`)
  }

  const copyPrompt = () => {
    navigator.clipboard.writeText(prompt.promptText)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const handleVariableChange = (name: string, value: string) => {
    setVariableValues((prev) => ({ ...prev, [name]: value }))
  }

  const renderVariableInput = (variable: PromptVariable) => {
    if (variable.type === "select" && variable.options) {
      return (
        <Select
          value={variableValues[variable.name] || ""}
          onValueChange={(value) => handleVariableChange(variable.name, value)}
        >
          <SelectTrigger>
            <SelectValue placeholder={`Select ${variable.name}`} />
          </SelectTrigger>
          <SelectContent>
            {variable.options.map((option) => (
              <SelectItem key={option} value={option}>
                {option}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      )
    } else if (variable.type === "text" || variable.type === "number") {
      return (
        <Input
          type={variable.type === "number" ? "number" : "text"}
          placeholder={variable.description}
          value={variableValues[variable.name] || ""}
          onChange={(e) => handleVariableChange(variable.name, e.target.value)}
        />
      )
    } else if (variable.type === "boolean") {
      return (
        <Select
          value={variableValues[variable.name] || ""}
          onValueChange={(value) => handleVariableChange(variable.name, value)}
        >
          <SelectTrigger>
            <SelectValue placeholder={`Select ${variable.name}`} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="true">True</SelectItem>
            <SelectItem value="false">False</SelectItem>
          </SelectContent>
        </Select>
      )
    }

    return null
  }

  return (
    <div>
      <div className="mb-6">
        <Link href="/ai/prompt-catalog" className="flex items-center text-gray-500 hover:text-gray-700 mb-4">
          <ArrowLeft className="mr-1 h-4 w-4" />
          Back to Prompt Catalog
        </Link>

        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <FileText className="h-6 w-6 text-blue-500" />
              <h1 className="text-2xl font-bold">{prompt.name}</h1>
            </div>
            <div className="flex items-center gap-2 mb-4">
              <span className="text-gray-500">@{prompt.author}</span>
              {prompt.isVerified ? (
                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                  Verified
                </Badge>
              ) : (
                <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
                  Community
                </Badge>
              )}
            </div>
            <p className="text-gray-600 max-w-3xl">{prompt.description}</p>
          </div>

          <Button className="bg-orange-500 hover:bg-orange-600">Try in Meligpt</Button>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={handleTabChange} className="mt-8">
        <TabsList>
          <TabsTrigger value="overview" className="flex items-center gap-1">
            <Info className="h-4 w-4" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="variables" className="flex items-center gap-1">
            <Settings className="h-4 w-4" />
            Variables
          </TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-6">
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div className="lg:col-span-2">
              <h2 className="text-xl font-medium mb-4">Prompt Template</h2>
              <div className="relative">
                <pre className="bg-gray-50 p-4 rounded-lg overflow-x-auto whitespace-pre-wrap text-sm">
                  {prompt.promptText}
                </pre>
                <Button variant="ghost" size="sm" className="absolute top-2 right-2" onClick={copyPrompt}>
                  {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>

              <h3 className="text-lg font-medium mt-6 mb-2">Variables</h3>
              <div className="space-y-2">
                {prompt.variables.map((variable) => (
                  <div key={variable.name} className="bg-gray-50 p-3 rounded-lg">
                    <div className="flex items-center justify-between">
                      <div className="font-medium">{`{{${variable.name}}}`}</div>
                      <Badge variant="outline">{variable.type}</Badge>
                    </div>
                    <p className="text-sm text-gray-600 mt-1">{variable.description}</p>
                    {variable.type === "select" && variable.options && (
                      <div className="mt-2">
                        <span className="text-xs text-gray-500">Options: </span>
                        <div className="flex flex-wrap gap-1 mt-1">
                          {variable.options.map((option) => (
                            <Badge key={option} variant="secondary" className="text-xs">
                              {option}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-gray-50 p-6 rounded-lg">
              <h3 className="text-lg font-medium mb-4">Prompt Details</h3>

              <div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Functionality</h4>
                  <div className="flex items-center gap-1">
                    <Tag className="h-4 w-4 text-gray-500" />
                    <span className="font-medium">{prompt.functionality}</span>
                  </div>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Type</h4>
                  <p>{prompt.type}</p>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">CLD</h4>
                  <p>{prompt.cld}</p>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Alias</h4>
                  <p>{prompt.alias}</p>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Usage Count</h4>
                  <p>{prompt.usageCount.toLocaleString()}</p>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Last Updated</h4>
                  <p>{new Date(prompt.updatedAt).toLocaleDateString()}</p>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">Tags</h4>
                  <div className="flex flex-wrap gap-1">
                    {prompt.tags.map((tag) => (
                      <Badge key={tag} variant="secondary" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="variables" className="mt-6">
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h2 className="text-xl font-medium mb-4">Variables Configuration</h2>
            <p className="text-gray-600 mb-6">Configure the variables used in this prompt template.</p>

            <div className="space-y-6">
              {prompt.variables.map((variable) => (
                <div key={variable.name} className="border border-gray-200 rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium">{`{{${variable.name}}}`}</h3>
                    <Badge variant="outline">{variable.required ? "Required" : "Optional"}</Badge>
                  </div>
                  <p className="text-sm text-gray-600 mb-3">{variable.description}</p>
                  <div className="mt-2">{renderVariableInput(variable)}</div>
                </div>
              ))}
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/verdi/verdi-sidebar-nav.tsx" isEdit="true" isQuickEdit="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  FileText,
  BarChart2,
  PenToolIcon as Tool,
  Bell,
  Database,
  MessageSquare,
  LayoutGrid,
  Users,
  BarChart,
} from "lucide-react"

export function VerdiSidebarNav() {
  const pathname = usePathname()

  const menuItems = [
    { icon: FileText, label: "Overview", href: "/ai/verdi-suite" },
    { icon: BarChart2, label: "Analytics", href: "/ai/verdi-suite/analytics" },
    { icon: Tool, label: "Build", href: "/ai/verdi-suite/build" },
    { icon: Bell, label: "Alerts", href: "/ai/verdi-suite/alerts" },
    { icon: Database, label: "Batch", href: "/ai/verdi-suite/batch" },
    { icon: MessageSquare, label: "Executions", href: "/ai/verdi-suite/executions" },
    { icon: LayoutGrid, label: "Workflows", href: "/ai/verdi-suite/workflows" },
    { icon: Users, label: "Agents", href: "/ai/verdi-suite/agents" },
    { icon: BarChart, label: "Evals", href: "/ai/verdi-suite/evals" },
  ]

  return (
    <div className="w-64 border-r bg-white h-full">
      <div className="p-4 border-b">
        <div className="flex items-center gap-2">
          <div className="h-8 w-8 rounded-md bg-orange-500 flex items-center justify-center text-white font-bold">
            V
          </div>
          <h1 className="text-xl font-bold">Verdi Agents</h1>
        </div>
      </div>
      <nav className="p-2">
        <ul className="space-y-1">
          {menuItems.map((item) => {
            const isActive = pathname === item.href
            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors ${
                    isActive ? "bg-orange-50 text-orange-900 font-medium" : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <item.icon className="h-5 w-5" />
                  <span>{item.label}</span>
                </Link>
              </li>
            )
          })}
        </ul>
      </nav>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai/gen-ai-landing.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, Search, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

export function GenAILanding() {
  const [searchQuery, setSearchQuery] = useState("")
  const heroRef = useRef<HTMLDivElement>(null)

  // Parallax effect for hero section
  useEffect(() => {
    const handleScroll = () => {
      if (heroRef.current) {
        const scrollPosition = window.scrollY
        heroRef.current.style.backgroundPosition = `center ${scrollPosition * 0.5}px`
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Search query:", searchQuery)
    // Handle search functionality
  }

  return (
    <div className="min-h-screen bg-black text-white">
      {/* Hero Section */}
      <div
        ref={heroRef}
        className="relative h-[500px] flex items-center justify-center bg-cover bg-center overflow-hidden"
        style={{
          backgroundImage: "url('/placeholder.svg?height=1080&width=1920')",
          backgroundSize: "cover",
        }}
      >
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/50 z-10"></div>
        <div className="container mx-auto px-4 relative z-20 text-center">
          <h1 className="text-5xl md:text-7xl font-bold mb-6">
            <span className="text-gray-300">Ask</span> <span className="text-orange-500">MELI GPT</span>{" "}
            <span className="text-gray-300">anything</span>
          </h1>
          <form onSubmit={handleSearch} className="max-w-2xl mx-auto">
            <div className="relative">
              <Input
                type="text"
                placeholder="¿Sabías que Mel..."
                className="bg-black/80 border-gray-700 h-14 pl-12 pr-12 text-lg rounded-full"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <Button
                type="submit"
                className="absolute right-2 top-1/2 transform -translate-y-1/2 rounded-full h-10 w-10 p-0 bg-orange-500 hover:bg-orange-600"
              >
                <ArrowRight className="h-5 w-5" />
              </Button>
            </div>
          </form>
        </div>
      </div>

      {/* Models Section */}
      <section className="py-16 container mx-auto px-4">
        <h2 className="text-4xl font-bold mb-4">Models</h2>
        <p className="text-xl text-gray-400 mb-10">
          In this section, you can find all the models included in MELI GPT. By clicking on a card, you can view and use
          that model.
        </p>

        <Carousel className="w-full">
          <CarouselContent>
            {models.map((model) => (
              <CarouselItem key={model.id} className="md:basis-1/2 lg:basis-1/3 pl-4">
                <Link href={model.link}>
                  <Card className="overflow-hidden h-[400px] relative group cursor-pointer">
                    <Image
                      src={model.image || "/placeholder.svg"}
                      alt={model.name}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
                    <div className="absolute bottom-0 left-0 p-6 w-full">
                      <h3 className="text-3xl font-bold mb-2">{model.name}</h3>
                      <div className="flex items-center text-sm text-gray-300">
                        {model.providerIcon}
                        <span className="ml-1">By {model.provider}</span>
                      </div>
                    </div>
                  </Card>
                </Link>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="left-2" />
          <CarouselNext className="right-2" />
        </Carousel>
      </section>

      {/* Comparison Section */}
      <section className="py-16 bg-black/50">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold mb-4">GenAI Models Comparison</h2>
          <p className="text-xl text-gray-400 mb-10">
            This component displays a table with information about generative AI models, including details about their
            lifecycle and configuration.
          </p>

          <div className="mb-6 flex flex-col sm:flex-row justify-between gap-4">
            <div className="flex gap-2">
              <Input type="text" placeholder="Search in the Table" className="max-w-xs bg-black/30 border-gray-700" />
              <Button variant="outline" className="border-gray-700">
                <Search className="h-4 w-4" />
              </Button>
            </div>

            <div className="flex gap-4">
              <Tabs defaultValue="all">
                <TabsList className="bg-black/30">
                  <TabsTrigger value="all">All</TabsTrigger>
                  <TabsTrigger value="general">General Purpose</TabsTrigger>
                  <TabsTrigger value="vision">Vision</TabsTrigger>
                </TabsList>
              </Tabs>

              <Button variant="outline" className="border-gray-700 gap-2">
                Calculate your cost
                <ExternalLink className="h-4 w-4" />
              </Button>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="border-b border-gray-800">
                  <th className="py-4 px-4 text-left">Name</th>
                  <th className="py-4 px-4 text-left">Mode</th>
                  <th className="py-4 px-4 text-left">Context Input (Max)</th>
                  <th className="py-4 px-4 text-left">Context Output (Max)</th>
                  <th className="py-4 px-4 text-left">Amount USD</th>
                  <th className="py-4 px-4 text-center">Verdi</th>
                  <th className="py-4 px-4 text-center">MELI GPT</th>
                  <th className="py-4 px-4 text-center">Gateway</th>
                </tr>
              </thead>
              <tbody>
                {modelComparison.map((model, index) => (
                  <tr
                    key={model.name}
                    className={`border-b border-gray-800 ${index % 2 === 0 ? "bg-gray-900/30" : ""}`}
                  >
                    <td className="py-4 px-4">
                      <Badge variant="outline" className="font-mono bg-black/30 border-gray-700">
                        {model.name}
                      </Badge>
                    </td>
                    <td className="py-4 px-4">{model.mode}</td>
                    <td className="py-4 px-4">{model.contextInput}</td>
                    <td className="py-4 px-4">{model.contextOutput}</td>
                    <td className="py-4 px-4">${model.cost}</td>
                    <td className="py-4 px-4 text-center">{model.verdi ? "✅" : "❌"}</td>
                    <td className="py-4 px-4 text-center">{model.meliGpt ? "✅" : "❌"}</td>
                    <td className="py-4 px-4 text-center">{model.gateway ? "✅" : "❌"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="mt-6 text-center">
            <Button variant="outline" className="border-gray-700">
              View All Models
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      </section>

      {/* News Section */}
      <section className="py-16 container mx-auto px-4">
        <h2 className="text-4xl font-bold mb-4">News</h2>
        <p className="text-xl text-gray-400 mb-10">
          In this section, you can explore the most notable news in the fields of artificial intelligence and
          technology.
        </p>

        <Carousel className="w-full">
          <CarouselContent>
            {news.map((item) => (
              <CarouselItem key={item.id} className="md:basis-1/2 lg:basis-1/3 pl-4">
                <Link href={item.link}>
                  <Card className="overflow-hidden h-[400px] relative group cursor-pointer">
                    <Image
                      src={item.image || "/placeholder.svg"}
                      alt={item.title}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div className="absolute bottom-0 left-0 p-6 w-full">
                      <h3 className="text-2xl font-bold mb-2 line-clamp-2">{item.title}</h3>
                      <div className="flex items-center text-sm text-gray-300 mt-4">
                        <span className="ml-1">By {item.source}</span>
                      </div>
                    </div>
                  </Card>
                </Link>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="left-2" />
          <CarouselNext className="right-2" />
        </Carousel>
      </section>

      {/* Research Section */}
      <section className="py-16 bg-black/50">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold mb-4">Research</h2>
          <p className="text-xl text-gray-400 mb-10">
            Our collaborators conduct cutting-edge research in the dynamic field of artificial intelligence.
          </p>

          <Carousel className="w-full">
            <CarouselContent>
              {research.map((item) => (
                <CarouselItem key={item.id} className="md:basis-1/2 lg:basis-1/3 pl-4">
                  <Link href={item.link}>
                    <Card className="overflow-hidden h-[400px] relative group cursor-pointer">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.title}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-105"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                      <div className="absolute bottom-0 left-0 p-6 w-full">
                        <h3 className="text-2xl font-bold mb-2 line-clamp-3">{item.title}</h3>
                        <div className="flex items-center text-sm text-gray-300 mt-4">
                          <span className="ml-1">By {item.author}</span>
                        </div>
                      </div>
                    </Card>
                  </Link>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="left-2" />
            <CarouselNext className="right-2" />
          </Carousel>
        </div>
      </section>

      {/* Products Section */}
      <section className="py-16 container mx-auto px-4">
        <h2 className="text-4xl font-bold mb-4">Products</h2>
        <p className="text-xl text-gray-400 mb-10">
          Explore our suite of AI-powered products designed to enhance your workflow and productivity.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Asegúrate de que la tarjeta de VerdiSuite sea la primera */}
          <Link href="/ai/verdi-suite">
            <Card className="bg-gradient-to-br from-gray-900 to-black border-gray-800 p-6 h-full hover:shadow-lg hover:shadow-orange-500/10 transition-all duration-300 hover:-translate-y-1">
              <div className="mb-4 text-orange-500">
                <Layers className="h-8 w-8" />
              </div>
              <h3 className="text-xl font-bold mb-2">Verdi Suite</h3>
              <p className="text-gray-400 mb-4">
                Comprehensive tools for AI model evaluation, testing, and deployment.
              </p>
              <div className="flex items-center text-orange-500 text-sm font-medium">
                Learn more
                <ArrowRight className="ml-2 h-4 w-4" />
              </div>
            </Card>
          </Link>
          {products
            .filter((product) => product.name !== "Verdi Suite")
            .map((product) => (
              <Link href={product.link} key={product.id}>
                <Card className="bg-gradient-to-br from-gray-900 to-black border-gray-800 p-6 h-full hover:shadow-lg hover:shadow-orange-500/10 transition-all duration-300 hover:-translate-y-1">
                  <div className="mb-4 text-orange-500">{product.icon}</div>
                  <h3 className="text-xl font-bold mb-2">{product.name}</h3>
                  <p className="text-gray-400 mb-4">{product.description}</p>
                  <div className="flex items-center text-orange-500 text-sm font-medium">
                    Learn more
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </div>
                </Card>
              </Link>
            ))}
        </div>
      </section>
    </div>
  )
}

// Sample data
const models = [
  {
    id: 1,
    name: "gemini-2.0-flash",
    provider: "Google",
    providerIcon: <span className="font-bold">G</span>,
    image: "/placeholder.svg?height=600&width=400",
    link: "/ai/gateway/gemini-2-0-flash",
  },
  {
    id: 2,
    name: "gpt-4.1",
    provider: "OpenAI",
    providerIcon: <span className="font-bold">O</span>,
    image: "/placeholder.svg?height=600&width=400",
    link: "/ai/gateway/gpt-4-1",
  },
  {
    id: 3,
    name: "gpt-4.1-mini",
    provider: "OpenAI",
    providerIcon: <span className="font-bold">O</span>,
    image: "/placeholder.svg?height=600&width=400",
    link: "/ai/gateway/gpt-4-1-mini",
  },
  {
    id: 4,
    name: "claude-3.5-haiku",
    provider: "Anthropic",
    providerIcon: <span className="font-bold">A</span>,
    image: "/placeholder.svg?height=600&width=400",
    link: "/ai/gateway/claude-3-5-haiku",
  },
  {
    id: 5,
    name: "mistral-large",
    provider: "Mistral",
    providerIcon: <span className="font-bold">M</span>,
    image: "/placeholder.svg?height=600&width=400",
    link: "/ai/gateway/mistral-large",
  },
]

const modelComparison = [
  {
    name: "nova-micro",
    mode: "General purpose",
    contextInput: "128,000 tokens",
    contextOutput: "5,000 tokens",
    cost: "0.66",
    verdi: true,
    meliGpt: true,
    gateway: true,
  },
  {
    name: "nova-lite",
    mode: "General purpose",
    contextInput: "300,000 tokens",
    contextOutput: "5,000 tokens",
    cost: "1.14",
    verdi: true,
    meliGpt: true,
    gateway: true,
  },
  {
    name: "gpt-4.1-nano",
    mode: "General purpose",
    contextInput: "1,047,576 tokens",
    contextOutput: "32,768 tokens",
    cost: "1.90",
    verdi: true,
    meliGpt: true,
    gateway: true,
  },
  {
    name: "gemini-2.0-flash",
    mode: "General purpose, Vision",
    contextInput: "1,048,576 tokens",
    contextOutput: "8,192 tokens",
    cost: "2.85",
    verdi: true,
    meliGpt: true,
    gateway: true,
  },
  {
    name: "gpt-4o-mini",
    mode: "General purpose",
    contextInput: "128,000 tokens",
    contextOutput: "16,384 tokens",
    cost: "2.85",
    verdi: true,
    meliGpt: true,
    gateway: true,
  },
]

const news = [
  {
    id: 1,
    title: "Variance Decomposition Ensembles over Multiple Domains",
    image: "/placeholder.svg?height=600&width=400",
    source: "Arxiv",
    link: "/ai/news/variance-decomposition",
  },
  {
    id: 2,
    title: "Adversarial Attacks to Latent Representations of Distributed Systems",
    image: "/placeholder.svg?height=600&width=400",
    source: "Arxiv",
    link: "/ai/news/adversarial-attacks",
  },
  {
    id: 3,
    title: "CR-LSO: Convex Neural Architecture Optimization in the Wild",
    image: "/placeholder.svg?height=600&width=400",
    source: "Arxiv",
    link: "/ai/news/cr-lso-convex",
  },
  {
    id: 4,
    title: "Emergent Abilities of Large Language Models on Chain-of-Thought Reasoning",
    image: "/placeholder.svg?height=600&width=400",
    source: "Arxiv",
    link: "/ai/news/emergent-abilities",
  },
]

const research = [
  {
    id: 1,
    title: "Automatic Model Routers: Charting a Course for Intelligence",
    image: "/placeholder.svg?height=600&width=400",
    author: "MELI",
    link: "/ai/research/automatic-model-routers",
  },
  {
    id: 2,
    title: "Optimizing Large Language Models (LLMs) Performance with Quantization",
    image: "/placeholder.svg?height=600&width=400",
    author: "MELI",
    link: "/ai/research/optimizing-llms",
  },
  {
    id: 3,
    title: "Revolutionizing Customer Experience with Multimodal AI",
    image: "/placeholder.svg?height=600&width=400",
    author: "MELI",
    link: "/ai/research/revolutionizing-customer-experience",
  },
  {
    id: 4,
    title: "Efficient Prompt Engineering for Domain-Specific Applications",
    image: "/placeholder.svg?height=600&width=400",
    author: "MELI",
    link: "/ai/research/efficient-prompt-engineering",
  },
]

const products = [
  {
    id: 1,
    name: "MELI GPT",
    description: "Our flagship conversational AI assistant powered by state-of-the-art language models.",
    icon: <MessageSquare className="h-8 w-8" />,
    link: "/ai/meli-gpt",
  },
  {
    id: 2,
    name: "Explore MCPs",
    description: "Discover and manage Model Context Protocol servers to extend agent capabilities.",
    icon: <Puzzle className="h-8 w-8" />,
    link: "/ai/explore-mcps",
  },
  {
    id: 3,
    name: "Gateway",
    description: "Centralized access control for AI services and models with comprehensive management.",
    icon: <Gateway className="h-8 w-8" />,
    link: "/ai/gateway",
  },
  {
    id: 4,
    name: "Prompt Catalog",
    description: "Browse and manage reusable prompts for AI models to ensure consistency.",
    icon: <BookOpen className="h-8 w-8" />,
    link: "/ai/prompt-catalog",
  },
  {
    id: 5,
    name: "RAG Service",
    description: "Retrieval-Augmented Generation for enhanced AI responses with your data.",
    icon: <Database className="h-8 w-8" />,
    link: "/ai/rag-service",
  },
  {
    id: 6,
    name: "Verdi Suite",
    description: "Comprehensive tools for AI model evaluation, testing, and deployment.",
    icon: <Layers className="h-8 w-8" />,
    link: "/ai/verdi-suite",
  },
]

import { MessageSquare, Puzzle, BookOpen, Database, Layers, WaypointsIcon as Gateway } from "lucide-react"</article></body></html>