From c9e01145868a4d24960856930f50f17ea80a8b25 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:39:35 +0000 Subject: [PATCH] Refactor: Replace emojis, redesign sidebars, and add chat messages - Replaced all emojis with React icons. - Redesigned the sidebars with a more minimal and modern approach. - Added left navbar questions as messages in the chat interface. --- src/components/ChatInterface.tsx | 26 +++- src/components/LeftSidebar.tsx | 93 +++++------ src/components/SidebarPanel.tsx | 10 +- src/components/content/HowToEarnContent.tsx | 147 +++++++----------- src/components/content/WhatCanHelpContent.tsx | 140 ++++++----------- src/components/content/WhatIsMCPContent.tsx | 108 +++++-------- .../content/WhoIsThisForContent.tsx | 130 ++++++---------- 7 files changed, 256 insertions(+), 398 deletions(-) diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx index 16a75b0..c4fd0df 100644 --- a/src/components/ChatInterface.tsx +++ b/src/components/ChatInterface.tsx @@ -23,6 +23,7 @@ const ChatInterface: React.FC = ({ onPromptSelect, isExpande const [isThinking, setIsThinking] = useState(false); const handlePromptClick = (prompt: string) => { + // Add user message setMessages(prev => [...prev, { text: prompt, isUser: true }]); setIsThinking(true); @@ -51,6 +52,19 @@ const ChatInterface: React.FC = ({ onPromptSelect, isExpande } }; + // Listen for messages from left sidebar + useEffect(() => { + const handleLeftSidebarPrompt = (event: CustomEvent) => { + handlePromptClick(event.detail.prompt); + }; + + window.addEventListener('leftSidebarPrompt' as any, handleLeftSidebarPrompt); + + return () => { + window.removeEventListener('leftSidebarPrompt' as any, handleLeftSidebarPrompt); + }; + }, []); + return (
{/* Hero Section */} @@ -59,7 +73,7 @@ const ChatInterface: React.FC = ({ onPromptSelect, isExpande isExpanded ? 'max-w-4xl mx-auto' : 'max-w-2xl mx-auto' }`}>
-

+

Build an MCP server and become part of the new world

@@ -68,19 +82,19 @@ const ChatInterface: React.FC = ({ onPromptSelect, isExpande

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

+
+

How can I help you today?

-
+
{prompts.map((prompt, index) => ( ))}
diff --git a/src/components/LeftSidebar.tsx b/src/components/LeftSidebar.tsx index 9153d8d..f0af448 100644 --- a/src/components/LeftSidebar.tsx +++ b/src/components/LeftSidebar.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button } from '@/components/ui/button'; import { useTheme } from '../contexts/ThemeContext'; -import { FiMenu, FiMessageSquare, FiExternalLink, FiHelpCircle, FiUsers, FiDollarSign, FiZap } from 'react-icons/fi'; +import { FiMenu, FiX, FiHelpCircle, FiUsers, FiDollarSign, FiZap, FiExternalLink } from 'react-icons/fi'; interface LeftSidebarProps { onPromptSelect: (prompt: string, content: any) => void; @@ -30,7 +30,7 @@ const LeftSidebar: React.FC = ({ onPromptSelect }) => { @@ -38,62 +38,67 @@ const LeftSidebar: React.FC = ({ onPromptSelect }) => { {/* Sidebar */}
-
-
-
-

- Quick Actions +
+
+ {/* Header */} +
+

+ Quick Start

{/* Suggested Questions */} -
-

- Suggested Questions -

-
- {suggestedQuestions.map((question, index) => ( - - ))} +
+
+

+ Explore Features +

+
+ {suggestedQuestions.map((question, index) => ( + + ))} +
-
- {/* Website Link */} -
-

- Resources -

- + {/* Website Link */} +
+

+ Resources +

+ +
diff --git a/src/components/SidebarPanel.tsx b/src/components/SidebarPanel.tsx index 55aa92f..cf6a49c 100644 --- a/src/components/SidebarPanel.tsx +++ b/src/components/SidebarPanel.tsx @@ -16,16 +16,16 @@ const SidebarPanel: React.FC = ({ isOpen, content, onClose }) isOpen ? 'translate-x-0' : 'translate-x-full' }`} > -
-
-
-

+
+
+
+

{content?.title || 'Details'}

diff --git a/src/components/content/HowToEarnContent.tsx b/src/components/content/HowToEarnContent.tsx index eefcd68..191343a 100644 --- a/src/components/content/HowToEarnContent.tsx +++ b/src/components/content/HowToEarnContent.tsx @@ -1,110 +1,71 @@ import React from 'react'; -import { Card } from '@/components/ui/card'; -import { Button } from '@/components/ui/button'; +import { FiDollarSign, FiShare2, FiCloud, FiTrendingUp } from 'react-icons/fi'; const HowToEarnContent = () => { return (
-
-

- Monetize Your AI Creations -

-

- Turn your MCP servers into revenue-generating assets +

+

+ Monetization Opportunities +

+

+ Turn your MCP servers and AI tools into revenue streams through our comprehensive monetization platform.

-
- -
-
- - - -
-

- Token-Based Revenue -

+
+
+
+ +

Token-Based Revenue

-

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

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

-
-
- 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

+
+ $0.01 - $1.00 per API call
- -
- -

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

+
+
+ +

Revenue Sharing

+
+

+ Get a percentage of revenue from users who discover and use your tools through the platform. +

+
+ Up to 70% revenue share +
+
+ +
+
+ +

Cloud Hosting

+
+

+ Host your MCP servers on our infrastructure and earn from usage-based pricing models. +

+
+ Scale automatically with demand +
+
+ +
+
+ +

Premium Features

+
+

+ Offer premium versions of your tools with advanced features and priority support. +

+
+ Subscription tiers available +
+
); diff --git a/src/components/content/WhatCanHelpContent.tsx b/src/components/content/WhatCanHelpContent.tsx index 42ee5a5..bfc79df 100644 --- a/src/components/content/WhatCanHelpContent.tsx +++ b/src/components/content/WhatCanHelpContent.tsx @@ -1,108 +1,60 @@ import React from 'react'; -import { Card } from '@/components/ui/card'; +import { FiCpu, FiDatabase, FiGlobe, FiSettings } from 'react-icons/fi'; 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 +

+

+ Platform Capabilities +

+

+ Comprehensive tools and services to build, deploy, and monetize your AI-powered 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

-
+
+
+
+ +

AI Model Integration

+

+ Connect to any LLM provider including OpenAI, Anthropic, Google, and open-source models. +

- + +
+
+ +

Data Source Integration

+
+

+ Connect databases, APIs, files, and real-time data streams to your AI applications. +

+
+ +
+
+ +

Global Deployment

+
+

+ Deploy your MCP servers globally with automatic scaling and load balancing. +

+
+ +
+
+ +

Development Tools

+
+

+ Built-in IDE, debugging tools, monitoring, and analytics to streamline your development workflow. +

+
+
); }; diff --git a/src/components/content/WhatIsMCPContent.tsx b/src/components/content/WhatIsMCPContent.tsx index 0bc5559..6681479 100644 --- a/src/components/content/WhatIsMCPContent.tsx +++ b/src/components/content/WhatIsMCPContent.tsx @@ -1,86 +1,50 @@ import React from 'react'; -import { Card } from '@/components/ui/card'; +import { FiCode, FiZap, FiLink, FiServer } from 'react-icons/fi'; 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. +

+
+

+ Model Context Protocol (MCP) +

+

+ MCP is a standardized protocol that enables seamless communication between AI language models and external data sources, tools, and services.

-
- -
-
- - - -
-

- Standardized Protocol -

+
+
+
+ +

Server Architecture

-

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

+ Build robust MCP servers that act as bridges between AI models and your data sources, APIs, and tools.

- - - -
-
- - - -
-

- 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

-
-
- + +
+
+ +

Universal Integration

+
+

+ Connect any AI chatbot to your custom tools, databases, and services through standardized protocols. +

+
+ +
+
+ +

Real-time Capabilities

+
+

+ Enable AI models to access live data, execute functions, and interact with external systems in real-time. +

+
+
); }; diff --git a/src/components/content/WhoIsThisForContent.tsx b/src/components/content/WhoIsThisForContent.tsx index cb87716..175ef33 100644 --- a/src/components/content/WhoIsThisForContent.tsx +++ b/src/components/content/WhoIsThisForContent.tsx @@ -1,98 +1,60 @@ import React from 'react'; -import { Card } from '@/components/ui/card'; +import { FiCode, FiUsers, FiTrendingUp, FiStar } from 'react-icons/fi'; 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 +

+

+ Who Can Benefit from MCP? +

+

+ Our platform is designed for anyone looking to leverage AI in their workflow, regardless of technical background.

-
- {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
-
+
+
+
+ +

Developers

+

+ Build sophisticated MCP servers with full control over functionality, data access, and integration patterns. +

- + +
+
+ +

Non-Technical Users

+
+

+ Create powerful AI-driven applications using our no-code tools and pre-built templates. +

+
+ +
+
+ +

Entrepreneurs

+
+

+ Monetize your MCP servers and AI tools through our token-based marketplace and revenue sharing. +

+
+ +
+
+ +

Content Creators

+
+

+ Build interactive AI experiences for your audience with custom chatbots and automated workflows. +

+
+
); };