From 069ca8f7f73c90ab309561c6c2c3e659f8113901 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Wed, 18 Jun 2025 07:20:12 +0000 Subject: [PATCH] feat: Implement landing page and chatbot interface Create a minimal, high-end landing page with a chatbot-like interface, including dark/light mode, prewritten prompts, and animated sidebar. Design should be black and white with glassmorphism and subtle gradients. --- index.html | 20 ++- src/components/ChatInterface.tsx | 155 ++++++++++++++++++ src/components/Header.tsx | 44 +++++ src/components/SidebarPanel.tsx | 46 ++++++ src/components/TypingAnimation.tsx | 34 ++++ src/components/content/HowToEarnContent.tsx | 113 +++++++++++++ src/components/content/WhatCanHelpContent.tsx | 110 +++++++++++++ src/components/content/WhatIsMCPContent.tsx | 88 ++++++++++ .../content/WhoIsThisForContent.tsx | 100 +++++++++++ src/contexts/ThemeContext.tsx | 39 +++++ src/pages/Index.tsx | 54 +++++- src/utils/promptContent.tsx | 36 ++++ tailwind.config.ts | 4 + 13 files changed, 830 insertions(+), 13 deletions(-) create mode 100644 src/components/ChatInterface.tsx create mode 100644 src/components/Header.tsx create mode 100644 src/components/SidebarPanel.tsx create mode 100644 src/components/TypingAnimation.tsx create mode 100644 src/components/content/HowToEarnContent.tsx create mode 100644 src/components/content/WhatCanHelpContent.tsx create mode 100644 src/components/content/WhatIsMCPContent.tsx create mode 100644 src/components/content/WhoIsThisForContent.tsx create mode 100644 src/contexts/ThemeContext.tsx create mode 100644 src/utils/promptContent.tsx diff --git a/index.html b/index.html index 2e8a759..485a0de 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,29 @@ + - mcp-verse-spark - - + MCP Platform - AI-First Development + + - - + + - + + + + + + - +
diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx new file mode 100644 index 0000000..16a75b0 --- /dev/null +++ b/src/components/ChatInterface.tsx @@ -0,0 +1,155 @@ + +import React, { useState, useEffect } from 'react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import TypingAnimation from './TypingAnimation'; +import { getPromptContent } from '../utils/promptContent'; + +interface ChatInterfaceProps { + onPromptSelect: (prompt: string, content: any) => void; + isExpanded: boolean; +} + +const prompts = [ + "What can you help me with?", + "What is MCP?", + "Who is this for?", + "Show me how I can earn" +]; + +const ChatInterface: React.FC = ({ onPromptSelect, isExpanded }) => { + const [messages, setMessages] = useState>([]); + const [inputValue, setInputValue] = useState(''); + const [isThinking, setIsThinking] = useState(false); + + const handlePromptClick = (prompt: string) => { + setMessages(prev => [...prev, { text: prompt, isUser: true }]); + setIsThinking(true); + + setTimeout(() => { + setIsThinking(false); + setMessages(prev => [...prev, { text: `Let me show you detailed information about "${prompt}"`, isUser: false, isTyping: true }]); + + setTimeout(() => { + const content = getPromptContent(prompt); + onPromptSelect(prompt, content); + }, 1500); + }, 1000); + }; + + const handleSendMessage = () => { + if (!inputValue.trim()) return; + + const prompt = inputValue; + setInputValue(''); + handlePromptClick(prompt); + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleSendMessage(); + } + }; + + return ( +
+ {/* Hero Section */} + {messages.length === 0 && ( +
+
+

+ Build an MCP server and become part of the new world +

+

+ Where AI chatbots are the modern interface +

+
+ + {/* Glassmorphism card with prompts */} +
+

+ How can I help you today? +

+
+ {prompts.map((prompt, index) => ( + + ))} +
+
+
+ )} + + {/* Chat Messages */} + {messages.length > 0 && ( +
+ {messages.map((message, index) => ( +
+
+ {message.isTyping ? ( + + ) : ( + message.text + )} +
+
+ ))} + + {isThinking && ( +
+
+
+
+
+
+
+
+ AI is thinking... +
+
+
+ )} +
+ )} + + {/* Input Area */} +
+
+ setInputValue(e.target.value)} + onKeyPress={handleKeyPress} + placeholder="Ask me anything about MCP..." + className="flex-1 border-0 bg-transparent focus:ring-0 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" + /> + +
+
+
+ ); +}; + +export default ChatInterface; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..ff2fee4 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,44 @@ + +import React from 'react'; +import { useTheme } from '../contexts/ThemeContext'; +import { Button } from '@/components/ui/button'; + +const Header = () => { + const { isDark, toggleTheme } = useTheme(); + + return ( +
+
+
+
+ M +
+

+ MCP Platform +

+
+ +
+ +
+
+
+ ); +}; + +export default Header; diff --git a/src/components/SidebarPanel.tsx b/src/components/SidebarPanel.tsx new file mode 100644 index 0000000..513f084 --- /dev/null +++ b/src/components/SidebarPanel.tsx @@ -0,0 +1,46 @@ + +import React from 'react'; +import { Button } from '@/components/ui/button'; + +interface SidebarPanelProps { + isOpen: boolean; + content: any; + onClose: () => void; +} + +const SidebarPanel: React.FC = ({ isOpen, content, onClose }) => { + return ( +
+
+
+
+

+ {content?.title || 'Details'} +

+ +
+ + {content && ( +
+ {content.component} +
+ )} +
+
+
+ ); +}; + +export default SidebarPanel; diff --git a/src/components/TypingAnimation.tsx b/src/components/TypingAnimation.tsx new file mode 100644 index 0000000..5624b1b --- /dev/null +++ b/src/components/TypingAnimation.tsx @@ -0,0 +1,34 @@ + +import React, { useState, useEffect } from 'react'; + +interface TypingAnimationProps { + text: string; + speed?: number; +} + +const TypingAnimation: React.FC = ({ text, speed = 50 }) => { + const [displayedText, setDisplayedText] = useState(''); + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + if (currentIndex < text.length) { + const timer = setTimeout(() => { + setDisplayedText(prev => prev + text[currentIndex]); + setCurrentIndex(prev => prev + 1); + }, speed); + + return () => clearTimeout(timer); + } + }, [currentIndex, text, speed]); + + return ( + + {displayedText} + {currentIndex < text.length && ( + | + )} + + ); +}; + +export default TypingAnimation; diff --git a/src/components/content/HowToEarnContent.tsx b/src/components/content/HowToEarnContent.tsx new file mode 100644 index 0000000..eefcd68 --- /dev/null +++ b/src/components/content/HowToEarnContent.tsx @@ -0,0 +1,113 @@ + +import React from 'react'; +import { Card } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; + +const HowToEarnContent = () => { + return ( +
+
+

+ Monetize Your AI Creations +

+

+ Turn your MCP servers into revenue-generating assets +

+
+ +
+ +
+
+ + + +
+

+ Token-Based Revenue +

+
+

+ Earn tokens every time users interact with your MCP servers. Set your own pricing and watch your revenue grow. +

+
+
+ Per interaction + 0.01-0.50 tokens +
+
+ Monthly potential + $100-$10,000+ +
+
+ + + +
+
+ + + +
+

+ Series Subscriptions +

+
+

+ Create premium series with exclusive content. Users subscribe for ongoing access to your specialized AI tools. +

+
+
+ Monthly subscription + $5-$50/user +
+
+ Revenue share + 70% creator +
+
+ +
+ + +

+ Revenue Streams +

+
+
+
+ 💰 +
+

Pay-per-Use

+

Users pay tokens for each interaction

+
+
+
+ 📱 +
+

App Licensing

+

License your MCPs to other developers

+
+
+
+ 🎯 +
+

Premium Features

+

Offer advanced capabilities for higher fees

+
+
+ + +
+ +

+ No upfront costs • 70% revenue share • Instant payments +

+
+
+ ); +}; + +export default HowToEarnContent; diff --git a/src/components/content/WhatCanHelpContent.tsx b/src/components/content/WhatCanHelpContent.tsx new file mode 100644 index 0000000..42ee5a5 --- /dev/null +++ b/src/components/content/WhatCanHelpContent.tsx @@ -0,0 +1,110 @@ + +import React from 'react'; +import { Card } from '@/components/ui/card'; + +const WhatCanHelpContent = () => { + const features = [ + { + title: "Your MCPs", + description: "Manage and deploy your MCP servers", + icon: "🚀", + items: ["Create new servers", "Monitor performance", "Update configurations", "View analytics"], + gradient: "from-blue-500 to-cyan-600" + }, + { + title: "Earn by Sharing", + description: "Monetize your AI creations", + icon: "💰", + items: ["Set pricing models", "Track earnings", "Revenue optimization", "Payment processing"], + gradient: "from-green-500 to-emerald-600" + }, + { + title: "Get on the Cloud", + description: "Scale your MCPs globally", + icon: "☁️", + items: ["Auto-scaling", "Global CDN", "99.9% uptime", "Load balancing"], + gradient: "from-purple-500 to-pink-600" + }, + { + title: "Build without Coding", + description: "Visual MCP builder for everyone", + icon: "🎨", + items: ["Drag & drop interface", "Pre-built templates", "AI assistance", "One-click deploy"], + gradient: "from-orange-500 to-red-600" + } + ]; + + return ( +
+
+

+ Platform Features +

+

+ Everything you need to build, deploy, and monetize AI-first applications +

+
+ +
+ {features.map((feature, index) => ( + +
+
+ {feature.icon} +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+
+
+ {feature.items.map((item, itemIndex) => ( +
+
+ {item} +
+ ))} +
+ + ))} +
+ + +
+

+ AI-First Development +

+

+ Experience the future of application development where AI chatbots are the primary interface +

+
+
+
⚡
+

Lightning Fast

+

Deploy in seconds, not hours

+
+
+
🔒
+

Secure by Default

+

Enterprise-grade security

+
+
+
📈
+

Auto-Scale

+

Handles millions of requests

+
+
+
+ +
+ ); +}; + +export default WhatCanHelpContent; diff --git a/src/components/content/WhatIsMCPContent.tsx b/src/components/content/WhatIsMCPContent.tsx new file mode 100644 index 0000000..0bc5559 --- /dev/null +++ b/src/components/content/WhatIsMCPContent.tsx @@ -0,0 +1,88 @@ + +import React from 'react'; +import { Card } from '@/components/ui/card'; + +const WhatIsMCPContent = () => { + return ( +
+
+

+ MCP (Model Context Protocol) is a revolutionary wrapper around LLM APIs that creates + a standardized interface for AI interactions. Think of it as the bridge between + traditional applications and the AI-first future. +

+
+ +
+ +
+
+ + + +
+

+ Standardized Protocol +

+
+

+ Creates a universal language for AI agents to communicate with any application or service. +

+ + + +
+
+ + + +
+

+ Lightning Fast +

+
+

+ Optimized for real-time interactions with minimal latency and maximum efficiency. +

+ +
+ + +

+ How MCP Works +

+
+
+
+ 1 +
+
+

Connect

+

Your application connects to MCP servers

+
+
+
+
+ 2 +
+
+

Process

+

MCP handles the communication and context

+
+
+
+
+ 3 +
+
+

Deliver

+

Receive intelligent, contextual responses

+
+
+
+ +
+ ); +}; + +export default WhatIsMCPContent; diff --git a/src/components/content/WhoIsThisForContent.tsx b/src/components/content/WhoIsThisForContent.tsx new file mode 100644 index 0000000..cb87716 --- /dev/null +++ b/src/components/content/WhoIsThisForContent.tsx @@ -0,0 +1,100 @@ + +import React from 'react'; +import { Card } from '@/components/ui/card'; + +const WhoIsThisForContent = () => { + const audiences = [ + { + title: "Developers", + description: "Build powerful MCP servers with full code control", + icon: "💻", + features: ["Full API access", "Custom integrations", "Advanced features", "Revenue sharing"], + gradient: "from-blue-500 to-cyan-600" + }, + { + title: "Non-Coders", + description: "Create amazing AI experiences without writing code", + icon: "🎨", + features: ["Visual builder", "Pre-built templates", "Drag & drop", "Instant deployment"], + gradient: "from-purple-500 to-pink-600" + }, + { + title: "Creators", + description: "Monetize your AI creations and build an audience", + icon: "✨", + features: ["Token economy", "Series monetization", "Community tools", "Analytics"], + gradient: "from-green-500 to-emerald-600" + } + ]; + + return ( +
+
+

+ Built for Everyone +

+

+ Whether you code or not, MCP Platform empowers you to create AI-first applications +

+
+ +
+ {audiences.map((audience, index) => ( + +
+
+ {audience.icon} +
+
+

+ {audience.title} +

+

+ {audience.description} +

+
+ {audience.features.map((feature, featureIndex) => ( +
+
+ {feature} +
+ ))} +
+
+
+ + ))} +
+ + +
+

+ The AI-First Future +

+

+ Join thousands of creators building the next generation of AI-powered applications +

+
+
+
10K+
+
Active Creators
+
+
+
50K+
+
MCP Servers
+
+
+
$1M+
+
Creator Earnings
+
+
+
+ +
+ ); +}; + +export default WhoIsThisForContent; diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..f9d4847 --- /dev/null +++ b/src/contexts/ThemeContext.tsx @@ -0,0 +1,39 @@ + +import React, { createContext, useContext, useState, useEffect } from 'react'; + +interface ThemeContextType { + isDark: boolean; + toggleTheme: () => void; +} + +const ThemeContext = createContext(undefined); + +export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + if (isDark) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + }, [isDark]); + + const toggleTheme = () => { + setIsDark(!isDark); + }; + + return ( + + {children} + + ); +}; + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 99637ff..64804de 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,13 +1,55 @@ -// Update this page (the content is just a fallback if you fail to update the page) + +import React, { useState } from 'react'; +import Header from '../components/Header'; +import ChatInterface from '../components/ChatInterface'; +import SidebarPanel from '../components/SidebarPanel'; +import { ThemeProvider } from '../contexts/ThemeContext'; const Index = () => { + const [selectedPrompt, setSelectedPrompt] = useState(null); + const [sidebarContent, setSidebarContent] = useState(null); + + const handlePromptSelect = (prompt: string, content: any) => { + setSelectedPrompt(prompt); + setSidebarContent(content); + }; + + const handleCloseSidebar = () => { + setSelectedPrompt(null); + setSidebarContent(null); + }; + return ( -
-
-

Welcome to Your Blank App

-

Start building your amazing project here!

+ +
+
+ +
+ {/* Main Chat Interface */} +
+ +
+ + {/* Sliding Sidebar Panel */} + +
+ + {/* Subtle light leaks */} +
+
+
+
-
+ ); }; diff --git a/src/utils/promptContent.tsx b/src/utils/promptContent.tsx new file mode 100644 index 0000000..8749577 --- /dev/null +++ b/src/utils/promptContent.tsx @@ -0,0 +1,36 @@ + +import React from 'react'; +import WhatIsMCPContent from '../components/content/WhatIsMCPContent'; +import WhoIsThisForContent from '../components/content/WhoIsThisForContent'; +import HowToEarnContent from '../components/content/HowToEarnContent'; +import WhatCanHelpContent from '../components/content/WhatCanHelpContent'; + +export const getPromptContent = (prompt: string) => { + switch (prompt) { + case "What is MCP?": + return { + title: "What is MCP?", + component: + }; + case "Who is this for?": + return { + title: "Who is this for?", + component: + }; + case "Show me how I can earn": + return { + title: "How to Earn", + component: + }; + case "What can you help me with?": + return { + title: "Platform Features", + component: + }; + default: + return { + title: "Information", + component:
Content for "{prompt}" coming soon...
+ }; + } +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 8706086..6a94538 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,3 +1,4 @@ + import type { Config } from "tailwindcss"; export default { @@ -68,6 +69,9 @@ export default { md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)' }, + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', + }, keyframes: { 'accordion-down': { from: {