"use client"; import React, { useState } from 'react'; import { Search, FileText, Newspaper, Presentation, Table, Lightbulb, TrendingUp, Code, Briefcase, Shield, Heart, Gamepad2, Palette, Book, Calculator, Globe, Clock, Star, ArrowRight, ExternalLink, Copy, Download, Play, Server, Cpu, Cloud, Sun, ShoppingCart, UserPlus } from 'lucide-react'; // Mock data for prompts const promptCategories = [ { name: "AI Development", count: 4, color: "--primary", icon: Code }, { name: "Security", count: 8, color: "--destructive", icon: Shield }, { name: "Programming", count: 6, color: "--secondary", icon: Code }, { name: "Career & Employment", count: 3, color: "--accent", icon: Briefcase }, { name: "Health & Therapy", count: 4, color: "--chart-1", icon: Heart }, { name: "Games & Entertainment", count: 5, color: "--chart-2", icon: Gamepad2 }, { name: "Art & Design", count: 4, color: "--chart-3", icon: Palette }, { name: "Education", count: 6, color: "--chart-4", icon: Book }, { name: "Business & Finance", count: 4, color: "--chart-5", icon: Calculator }, { name: "Technology", count: 3, color: "--primary", icon: Globe } ]; const featuredPrompts = [ { name: "Job Scout Pro", category: "Career & Employment", description: "AI-powered job hunting assistant", rating: 4.8 }, { name: "Cyber Security Sentinel", category: "Security", description: "Advanced security analysis tool", rating: 4.9 }, { name: "Code Copilot Pro", category: "Programming", description: "Intelligent coding companion", rating: 4.7 }, { name: "Digital Synthia Companion", category: "AI & Chatbots", description: "Advanced AI conversation partner", rating: 4.6 } ]; // Mock data for templates const templateCategories = [ { name: "Documents", icon: FileText, count: 12, color: "--primary" }, { name: "Presentations", icon: Presentation, count: 8, color: "--destructive" }, { name: "Spreadsheets", icon: Table, count: 6, color: "--secondary" } ]; // Mock data for news const newsCategories = [ { name: "Technology", count: 45, color: "--primary" }, { name: "AI & ML", count: 38, color: "--chart-2" }, { name: "Business", count: 52, color: "--secondary" }, { name: "Science", count: 29, color: "--destructive" }, { name: "Startups", count: 34, color: "--accent" } ]; const mcpServers = [ { name: "ModelScope MCP Playground", description: "Exploring the Free Combination and Interaction of Open Source Models and MCP Server", type: "Hosted", category: "developer-tools", usage: "1203", icon: Server }, { name: "ModelScope MCP Tutorial", description: "Learn about MCP, observe and discuss best practices", type: "Hosted", category: "knowledge-and-memory", usage: "264", icon: Book }, { name: "TONGYI Lingma Programming Agent", description: "Supports the use of MCP tools", type: "Hosted", category: "developer-tools", usage: "1203", icon: Code }, { name: "Cherry Studio Integration", description: "Integrate ModelScope-hosted MCP server in Cherry Studio", type: "Hosted", category: "developer-tools", usage: "1203", icon: Cpu }, { name: "fetch", description: "Retrieve and process content from web pages, converting HTML to markdown", type: "Hosted", category: "search", usage: "609", icon: Cloud }, { name: "amap-maps", description: "Location-based services using Amap Maps MCP server", type: "Hosted", category: "location-services", usage: "71", icon: Globe }, { name: "bing-cn-mcp-server", description: "Bing search Chinese version", type: "Hosted", category: "search", usage: "609", icon: Search }, { name: "AllVoiceLab", description: "Text-to-speech and video translation APIs", type: "Local", category: "entertainment-and-media", usage: "106", icon: Heart }, { name: "12306-mcp", description: "Search for 12306 train tickets", type: "Hosted", category: "other", usage: "294", icon: Clock }, { name: "Jina-AI-MCP-Tools", description: "Integrates with Jina AI Search Foundation APIs", type: "Hosted", category: "search", usage: "609", icon: TrendingUp } ]; // LLM Tools data const llmTools = [ { name: "Enroll", description: "User registration and account creation tool", category: "User Management", icon: UserPlus, color: "--primary" }, { name: "How is the weather", description: "Real-time weather information lookup", category: "Location Services", icon: Sun, color: "--accent" }, { name: "Price of Product", description: "Product price lookup and comparison", category: "E-commerce", icon: ShoppingCart, color: "--secondary" }, { name: "Document Analyzer", description: "Extract and analyze document content", category: "Knowledge", icon: FileText, color: "--chart-2" }, { name: "Code Generator", description: "Generate code snippets from descriptions", category: "Development", icon: Code, color: "--primary" }, { name: "Data Visualizer", description: "Create charts and visualizations from data", category: "Analytics", icon: TrendingUp, color: "--chart-1" } ]; export default function LabComponent() { const [activeTab, setActiveTab] = useState('prompts'); const [selectedCategory, setSelectedCategory] = useState(null); const renderPrompts = () => (
{/* Header */}

Prompt Library

{/* Search */}
{/* Categories Sidebar */}

Categories

{promptCategories.map((category, index) => { const IconComponent = category.icon; return ( ); })}
{/* Featured Section */}

Featured Prompts

{featuredPrompts.map((prompt, index) => (

{prompt.name}

{prompt.description}

{prompt.category}
{prompt.rating}
))}
{/* Content Area */}
{[...Array(8)].map((_, index) => (

Advanced Code Review Assistant

AI assistant specialized in code review, security analysis, and optimization suggestions.

Programming
))}
); const renderTemplates = () => (
{/* Header */}

Document Templates

{/* Search */}
{/* Template Types */}

Template Types

{templateCategories.map((category, index) => { const IconComponent = category.icon; return ( ); })}
{/* Quick Actions */}

Quick Start

{/* Templates Grid */}
{[...Array(9)].map((_, index) => (
{/* Template Preview */}

Business Proposal Template

Professional template for business proposals and project pitches.

Document
))}
); const renderNews = () => (
{/* Header */}

News & Insights

{/* Search & Filters */}
{/* News Categories */}

Categories

{newsCategories.map((category, index) => ( ))}
{/* Trending Topics */}

Trending

{['OpenAI GPT-5', 'Quantum Computing', 'Climate Tech', 'Space X'].map((topic, index) => ( ))}
{/* News Feed */}
{[...Array(6)].map((_, index) => (
AI & ML TechCrunch 2 hours ago

OpenAI Announces GPT-5 with Revolutionary Capabilities

The latest AI model shows unprecedented reasoning abilities and multimodal understanding, setting new benchmarks across various tasks and potentially reshaping the AI landscape...

))}
); const renderMCPServers = () => (
{/* Header */}

MCP Servers

{/* Search */}
{/* Categories Sidebar */}

Categories

{[ { name: "developer-tools", count: 1203, color: "--primary" }, { name: "search", count: 609, color: "--secondary" }, { name: "communication", count: 233, color: "--chart-1" }, { name: "entertainment", count: 106, color: "--chart-2" }, { name: "file-systems", count: 207, color: "--chart-3" }, { name: "finance", count: 226, color: "--chart-4" }, { name: "knowledge", count: 264, color: "--chart-5" }, { name: "location", count: 71, color: "--primary" }, { name: "other", count: 294, color: "--accent" } ].map((category, index) => ( ))}
{/* Quick Filters */}

Server Type

{/* Content Area */}
{mcpServers.map((server, index) => { const IconComponent = server.icon; return (

{server.name}

{server.type}

{server.description}

{server.category}
{server.usage} uses
); })}
); const renderLLMTools = () => (
{/* Header */}

LLM Tools

{/* Search */}
{/* Categories Sidebar */}

Categories

{[ { name: "User Management", count: 12, color: "--primary" }, { name: "Location Services", count: 8, color: "--accent" }, { name: "E-commerce", count: 6, color: "--secondary" }, { name: "Knowledge", count: 15, color: "--chart-2" }, { name: "Development", count: 22, color: "--primary" }, { name: "Analytics", count: 9, color: "--chart-1" } ].map((category, index) => ( ))}
{/* Featured Tools */}

Most Used

{llmTools.slice(0, 3).map((tool, index) => (

{tool.name}

{tool.description}

))}
{/* Content Area */}
{llmTools.map((tool, index) => { const IconComponent = tool.icon; return (

{tool.name}

{tool.description}

{tool.category}
); })}
); const renderModels = () => (
{/* Header */}

AI Models

{/* Search */}
{/* Categories Sidebar */}

Providers

{[ { name: "OpenAI", count: 12, color: "--primary" }, { name: "Anthropic", count: 8, color: "--accent" }, { name: "Google", count: 6, color: "--secondary" }, { name: "Meta", count: 5, color: "--chart-2" }, { name: "Mistral", count: 4, color: "--chart-3" }, { name: "Cohere", count: 3, color: "--chart-4" }, { name: "AWS", count: 7, color: "--chart-5" }, { name: "Azure", count: 5, color: "--primary" }, { name: "Other", count: 9, color: "--destructive" } ].map((category, index) => ( ))}
{/* Model Types */}

Model Types

{/* Content Area */}
{[ { name: "AI21", description: "You can get started with AI21Labs' Jurassic family of models, as well as their task-specific models.", provider: "AI21 Labs", type: "Text Generation", status: "Active" }, { name: "AlephAlpha", description: "LangChain.js supports AlephAlpha's Luminous family of models. You'll need an AlephAlpha API key.", provider: "Aleph Alpha", type: "Text Generation", status: "Active" }, { name: "Arcjet Redact", description: "The Arcjet redact integration allows you to redact sensitive information from text.", provider: "Arcjet", type: "Text Processing", status: "Beta" }, { name: "AWS SageMakerEndpoint", description: "LangChain.js supports integration with AWS SageMaker-hosted endpoints for custom models.", provider: "AWS", type: "Custom Models", status: "Active" }, { name: "Azure OpenAI", description: "Azure OpenAI provides access to OpenAI models through Microsoft's Azure cloud platform.", provider: "Microsoft", type: "Text Generation", status: "Active" }, { name: "Bedrock", description: "Amazon Bedrock is a fully managed service that makes foundation models from AI21, Anthropic, and Amazon accessible via API.", provider: "AWS", type: "Text Generation", status: "Active" }, { name: "ChromeAI", description: "This feature is experimental and is subject to change. Provides browser-based AI capabilities.", provider: "Google", type: "Experimental", status: "Preview" }, { name: "Cloudflare Workers AI", description: "This will help you get started with Cloudflare Workers AI text generation models.", provider: "Cloudflare", type: "Text Generation", status: "Active" }, { name: "Cohere", description: "This will help you get started with Cohere completion models (LLMs) and embedding models.", provider: "Cohere", type: "Text Generation", status: "Active" }, { name: "Deep Infra", description: "LangChain supports LLMs hosted by Deep Infra through the DeepInfra wrapper.", provider: "Deep Infra", type: "Text Generation", status: "Active" }, { name: "Fireworks", description: "Fireworks AI is an AI inference platform to run open-source models at scale.", provider: "Fireworks", type: "Text Generation", status: "Active" }, { name: "Friendli", description: "Friendli enhances AI application performance and optimizes cost savings for LLM inference.", provider: "Friendli", type: "Optimization", status: "Beta" }, { name: "Google Vertex AI", description: "Google Vertex is a service that provides access to Google's foundation models.", provider: "Google", type: "Text Generation", status: "Active" }, { name: "HuggingFaceInference", description: "Here's an example of calling a HuggingFaceInference model as an LLM.", provider: "Hugging Face", type: "Text Generation", status: "Active" }, { name: "IBM watsonx.ai", description: "This will help you get started with IBM text completion models on watsonx.ai.", provider: "IBM", type: "Text Generation", status: "Active" }, { name: "Llama CPP", description: "Only available on Node.js. Provides access to locally run Llama models.", provider: "Meta", type: "Local Inference", status: "Active" }, { name: "MistralAI", description: "Mistral AI is a platform that offers hosting for their open-weight models.", provider: "Mistral", type: "Text Generation", status: "Active" }, { name: "Ollama", description: "This will help you get started with Ollama text completion models running locally.", provider: "Ollama", type: "Local Inference", status: "Active" }, { name: "Replicate", description: "Here's an example of calling a Replicate model as an LLM.", provider: "Replicate", type: "Text Generation", status: "Active" }, { name: "Together AI", description: "You are currently on a page documenting the use of Together AI models with LangChain.", provider: "Together AI", type: "Text Generation", status: "Active" }, { name: "Writer", description: "LangChain.js supports calling Writer LLMs for content generation.", provider: "Writer", type: "Text Generation", status: "Active" }, { name: "YandexGPT", description: "LangChain.js supports calling YandexGPT LLMs. Also supports qwen and deepseek models.", provider: "Yandex", type: "Text Generation", status: "Active" } ].map((model, index) => (

{model.name}

{model.status}

{model.description}

{model.provider} {model.type}
))}
); return (
{/* Tab Navigation */}
{[ { id: 'prompts', label: 'Prompts', icon: Lightbulb, color: 'text-yellow-600' }, { id: 'templates', label: 'Templates', icon: FileText, color: 'text-green-600' }, { id: 'news', label: 'News', icon: Newspaper, color: 'text-blue-600' }, { id: 'mcp', label: 'MCP Servers', icon: Server, color: 'text-purple-600' }, { id: 'llm-tools', label: 'LLM Tools', icon: Cpu, color: 'text-indigo-600' }, { id: 'models', label: 'Models', icon: Cpu, color: 'text-teal-600' } ].map((tab) => { const IconComponent = tab.icon; return ( ); })}
{/* Content */}
{activeTab === 'prompts' && renderPrompts()} {activeTab === 'templates' && renderTemplates()} {activeTab === 'news' && renderNews()} {activeTab === 'mcp' && renderMCPServers()} {activeTab === 'llm-tools' && renderLLMTools()} {activeTab === 'models' && renderModels()}
); }