Build an AI Viral Prediction Tool with Real-Time Streaming and MCP Integration in 20 Minutes
Master modern AI development by building a production-ready viral content analyzer with Google Gemini, Model Context Protocol, and real-time streaming
π Why This Project Will Transform Your Development Skills
In today's AI-driven world, the ability to seamlessly integrate artificial intelligence with real-time data is becoming the gold standard for modern web development. This tutorial will teach you to build a sophisticated AI Viral Prediction Tool that combines cutting-edge technologies in a way that showcases exactly the skills top tech companies are looking for.
What makes this project special?
π€ AI Integration Done Right: Not just another ChatGPT wrapperβthis uses Google Gemini 2.0 Flash Lite with sophisticated prompt engineering for content analysis that actually works.
π Model Context Protocol (MCP): You'll implement the revolutionary new standard that's changing how AI systems access external data. MCP is what companies like Anthropic are betting on for the future of AI development.
π‘ Real-Time Streaming: Master Server-Sent Events (SSE) to create live progress updates that keep users engaged during AI processing. No more silent loading screens!
π― Production-Ready Architecture: Every component is built with error handling, performance optimization, and scalability in mindβexactly what interviewers want to see.
The Business Impact: This isn't just a demoβit's a tool that content creators, marketing teams, and social media managers could actually use to optimize their viral potential before posting.
Interview Gold: This project demonstrates full-stack development, AI integration, real-time systems, and modern JavaScript patterns all in one cohesive application.
Two Ways to Experience This Tutorial:
- π¨βπ» Build It Yourself - Follow along step-by-step with your own API keys
- π Try the Live Demo - View the deployed version and explore the code
π Prerequisites & Account Setup
What You'll Need Installed
- Node.js 18+ (Download here)
- Git for version control
- Code editor (VS Code recommended)
Required API Accounts
We'll be using services with generous free tiersβno credit card required for initial development!
1. LunarCrush API Setup
LunarCrush provides real-time social media data that we'll access via their Model Context Protocol (MCP) server.
Use my discount referral code JAMAALBUILDS to receive 15% off your plan.
Sign Up Process:
- Visit LunarCrush Signup
- Enter your email and complete verification
- Choose the your plan (required for API access)
- Navigate to API Authentication
- Generate your API key
Save this keyβyou'll need it for the MCP integration.
2. Google AI API Setup
Google's Gemini AI powers our content analysis with sophisticated natural language understanding.
Get Your API Key:
- Visit Google AI Studio
- Click "Create API Key"
- Copy your key
Environment Variables Template
Create a .env.local file with:
LUNARCRUSH_API_KEY=your_key_here
GOOGLE_GEMINI_API_KEY=your_key_here
β‘ Project Setup (Copy-Paste Terminal Commands)
Let's build our AI Viral Prediction Tool step by step. Each command is designed to be copy-pasted directly into your terminal.
Create Next.js Project with Optimized Configuration
# Create new Next.js project with optimized settings
npx create-next-app@latest ai-viral-prediction-tool --typescript=false --tailwind=false --eslint=true --app=false --src-dir=false --import-alias=false
cd ai-viral-prediction-tool
# Install required dependencies for AI and real-time features
npm install @google/generative-ai @modelcontextprotocol/sdk @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
# Install additional UI and utility packages
npm install @chakra-ui/next-js @chakra-ui/theme
# Create environment file
touch .env.local
Set Up Environment Variables
Add your API keys to .env.local:
# Add to .env.local (replace with your actual keys)
cat > .env.local << 'EOF'
LUNARCRUSH_API_KEY=lc_your_api_key_here
GOOGLE_GEMINI_API_KEY=AIza_your_gemini_key_here
EOF
Create Project Structure
# Create optimized directory structure for AI and streaming
mkdir -p components/ViralPredictor components/ui lib
# Create utility files for number formatting and MCP integration
cat > lib/number-utils.js << 'EOF'
export function formatNumber(num) {
if (typeof num !== 'number' || isNaN(num)) return '0';
if (num >= 1000000000) {
return (num / 1000000000).toFixed(1) + 'B';
}
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M';
}
if (num >= 1000) {
return (num / 1000).toFixed(1) + 'K';
}
return num.toString();
}
export function formatCompactNumber(num) {
return new Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(num);
}
EOF
π Model Context Protocol (MCP) Integration
Here's where we implement the cutting-edge MCP standard that's revolutionizing how AI systems access external data.
Create MCP Client for LunarCrush Integration
# Create production-ready MCP client with comprehensive error handling
cat > lib/mcp-client.js << 'EOF'
import { Client } from '@modelcontextprotocol/sdk/client/index.js'
import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js'
export async function createMcpClient() {
try {
const apiKey = process.env.LUNARCRUSH_API_KEY
if (!apiKey) {
throw new Error('LUNARCRUSH_API_KEY not found in environment variables')
}
console.log('π Initializing MCP client with SSE transport...')
// Create SSE transport for LunarCrush MCP server
const transport = new SSEClientTransport(
new URL(`https://lunarcrush.ai/sse?key=${apiKey}`)
)
// Create MCP client with proper configuration
const client = new Client(
{
name: 'ai-viral-prediction-tool',
version: '1.0.0',
},
{
capabilities: {
tools: {},
},
}
)
// Connect to the server
await client.connect(transport)
return client
} catch (error) {
console.error('β MCP client initialization failed:', error)
throw new Error(`MCP connection failed: ${error.message}`)
}
}
// Execute MCP tool calls with proper error handling
export async function executeToolCall(client, toolName, args) {
try {
console.log(`π Executing MCP tool: ${toolName} with args:`, args)
const result = await client.callTool({
name: toolName,
arguments: args
})
return result
} catch (error) {
console.error(`β MCP tool call failed: ${toolName}`, error)
throw new Error(`Tool ${toolName} failed: ${error.message}`)
}
}
export default { createMcpClient, executeToolCall }
EOF
Why MCP Matters: Model Context Protocol is the emerging standard for connecting AI systems to external data sources. Unlike traditional API integrations, MCP provides a standardized way for AI assistants to discover and use tools, making our integration more robust and future-proof.
π‘ Real-Time Streaming API with AI Analysis
Now we'll build the heart of our applicationβa streaming API endpoint that provides real-time progress updates during AI analysis.
Create Streaming API Endpoint
# Create production-ready streaming endpoint with comprehensive AI analysis
cat > pages/api/analyze-stream.js << 'EOF'
import { GoogleGenerativeAI } from '@google/generative-ai';
import { createMcpClient, executeToolCall } from '../../lib/mcp-client.js';
import { formatNumber } from '../../lib/number-utils.js';
const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);
export default async function handler(req, res) {
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Method not allowed' });
}
// Essential SSE headers to prevent buffering
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache, no-transform',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Cache-Control, Content-Type',
'X-Accel-Buffering': 'no', // Disable nginx buffering
});
const sendSSE = (data) => {
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
let mcpClient = null;
try {
const { content, creator } = req.body;
sendSSE({
step: 'connecting',
message: 'Initializing viral analysis engine...',
timestamp: new Date().toISOString()
});
// Simulate small delay for UX
await new Promise(resolve => setTimeout(resolve, 500));
let creatorData = null;
let hasCreatorData = false;
const cleanCreator = creator?.trim()?.replace(/^@+/, '');
if (cleanCreator) {
sendSSE({
step: 'fetching',
message: `Looking up @${cleanCreator} on social media...`,
timestamp: new Date().toISOString()
});
await new Promise(resolve => setTimeout(resolve, 500));
sendSSE({
step: 'fetching',
message: 'Connecting to LunarCrush MCP server...',
timestamp: new Date().toISOString()
});
try {
sendSSE({
step: 'fetching',
message: `Fetching real-time data for @${cleanCreator}...`,
timestamp: new Date().toISOString()
});
// Use MCP client for real-time social data
mcpClient = await createMcpClient();
sendSSE({
step: 'parsing',
message: 'Processing social media metrics...',
timestamp: new Date().toISOString()
});
// Execute MCP tool call with proper parameters
const result = await executeToolCall(mcpClient, 'Creator', {
screenName: cleanCreator,
network: 'x', // Use 'x' for Twitter/X platform
});
sendSSE({
step: 'parsing',
message: 'Extracting follower and engagement data...',
timestamp: new Date().toISOString()
});
// Parse MCP response using AI for robust data extraction
let rawText = '';
if (result && result.content) {
for (const content of result.content) {
if (content.type === 'text') {
rawText += content.text + '\n';
}
}
}
console.log('π Raw MCP Text:', rawText);
if (rawText) {
// Use LLM to parse the raw MCP data intelligently
const parsePrompt = `Parse this creator data and extract the key metrics:
${rawText}
Look for:
- Follower count (should be a large number for popular accounts)
- Engagement metrics
- Handle/username
- Platform information
Return ONLY valid JSON in this format:
{
"handle": "username",
"followerCount": number,
"engagements": number,
"platform": "Twitter/X"
}
Be careful to extract LARGE follower numbers (millions) for popular accounts like elonmusk, not small numbers.`;
const model = genAI.getGenerativeModel({
model: 'gemini-2.0-flash-lite',
});
const parseResult = await model.generateContent(parsePrompt);
const parsedText = parseResult.response.text();
console.log('π€ LLM Parsed:', parsedText);
try {
const jsonMatch = parsedText.match(/\{[\s\S]*\}/);
if (jsonMatch) {
const parsed = JSON.parse(jsonMatch[0]);
if (parsed.followerCount && parsed.followerCount > 0) {
creatorData = {
handle: parsed.handle || cleanCreator,
followerCount: parsed.followerCount,
engagements: parsed.engagements || 0,
platform: parsed.platform || 'Twitter/X',
source: 'LunarCrush MCP',
};
hasCreatorData = true;
sendSSE({
step: 'success',
message: `Found @${creatorData.handle} with ${formatNumber(creatorData.followerCount)} followers!`,
timestamp: new Date().toISOString(),
data: { creatorData }
});
console.log(`β
Parsed creator: @${creatorData.handle} with ${formatNumber(creatorData.followerCount)} followers`);
}
}
} catch (parseError) {
console.error('β Failed to parse LLM response:', parseError);
}
}
} catch (error) {
sendSSE({
step: 'warning',
message: `Could not fetch @${cleanCreator} data: ${error.message}`,
timestamp: new Date().toISOString()
});
console.error(`β Creator lookup failed: ${error.message}`);
}
}
sendSSE({
step: 'analyzing',
message: hasCreatorData
? `Running AI analysis enhanced with @${creatorData.handle}'s metrics...`
: 'Running AI analysis on general content...',
timestamp: new Date().toISOString()
});
await new Promise(resolve => setTimeout(resolve, 500));
sendSSE({
step: 'analyzing',
message: 'Processing content with Google Gemini AI...',
timestamp: new Date().toISOString()
});
// Sophisticated AI analysis with psychology-based viral prediction
const analysisPrompt = `You are a viral content expert. Analyze this content for viral potential:
CONTENT: "${content}"
${hasCreatorData ? `
REAL CREATOR DATA (from LunarCrush MCP):
- Handle: @${creatorData.handle}
- Followers: ${formatNumber(creatorData.followerCount)}
- Platform: ${creatorData.platform}
- Source: ${creatorData.source}
This is REAL data from LunarCrush. Use it to enhance your viral analysis.
` : 'NO CREATOR DATA - analyze content only.'}
Respond ONLY in this exact JSON format:
{
"viralProbability": number_between_0_and_85,
"confidenceScore": number_between_0_and_100,
"viralCategory": "Ultra High|High|Moderate|Low",
"expectedEngagement": ${hasCreatorData ? 'number_based_on_follower_count' : 'null'},
"psychologyScore": {"emotional_appeal": 0-100, "shareability": 0-100, "memorability": 0-100},
"recommendations": ["actionable_tip_1", "actionable_tip_2", "actionable_tip_3"],
"optimizedHashtags": ["#relevant", "#hashtags", "#for_virality"],
"optimalTiming": {"best_day": "Monday-Sunday", "best_hour": "0-23", "timezone": "UTC"}
}`;
const model = genAI.getGenerativeModel({
model: 'gemini-2.0-flash-lite',
generationConfig: { temperature: 0.7, maxOutputTokens: 2048 },
});
const result = await model.generateContent(analysisPrompt);
const responseText = result.response.text();
// Parse AI response with comprehensive error handling
let analysis;
try {
const jsonMatch = responseText.match(/\{[\s\S]*\}/);
if (!jsonMatch) throw new Error('No valid JSON in AI response');
analysis = JSON.parse(jsonMatch[0]);
} catch (parseError) {
sendSSE({
step: 'error',
message: 'AI analysis failed to return valid results',
timestamp: new Date().toISOString()
});
res.end();
return;
}
// Calculate engagement if needed
if (hasCreatorData && typeof analysis.expectedEngagement !== 'number') {
const engagementRate = Math.min(0.1, 0.02 * (analysis.viralProbability / 50));
analysis.expectedEngagement = Math.floor(creatorData.followerCount * engagementRate);
}
// Send final results in production-ready format
const finalResults = {
success: true,
viralProbability: Math.min(85, Math.max(0, analysis.viralProbability || 50)),
confidenceScore: analysis.confidenceScore || 70,
viralCategory: analysis.viralCategory || 'Moderate',
expectedEngagement: analysis.expectedEngagement,
psychologyScore: analysis.psychologyScore || {},
recommendations: analysis.recommendations || [],
optimizedHashtags: analysis.optimizedHashtags || [],
optimalTiming: analysis.optimalTiming || {},
hasCreatorData,
creatorData: hasCreatorData ? {
handle: creatorData.handle,
followers: creatorData.followerCount,
engagements: creatorData.engagements,
platform: creatorData.platform,
} : null,
analysisSource: 'Google Gemini 2.0 Flash Lite',
timestamp: new Date().toISOString(),
};
sendSSE({
step: 'complete',
message: `Analysis complete! ${finalResults.viralProbability}% viral probability`,
timestamp: new Date().toISOString(),
data: finalResults
});
res.end();
} catch (error) {
sendSSE({
step: 'error',
message: `Analysis failed: ${error.message}`,
timestamp: new Date().toISOString()
});
res.end();
} finally {
// Clean up MCP client
if (mcpClient && mcpClient.close) {
try {
await mcpClient.close();
console.log('π MCP client connection closed');
} catch (closeError) {
console.warn('β οΈ Error closing MCP client:', closeError.message);
}
}
}
}
EOF
Key Architecture Decisions:
π₯ Server-Sent Events (SSE): Provides real-time progress updates without the complexity of WebSockets
π€ AI-Powered Parsing: Uses Gemini to intelligently parse MCP responses, making the integration more robust
β‘ Performance Optimization: Strategic delays for UX while maintaining ~15 second total response time
π‘οΈ Production Error Handling: Comprehensive try-catch blocks with graceful degradation
π¨ Modern React UI with Real-Time Updates
Now we'll build a sophisticated React interface that consumes our streaming API and provides a professional user experience.
Create Essential UI Components
# Create modern hero section with animations
cat > components/ui/ModernHero.js << 'EOF'
import { Box, VStack, Heading, Text, Button, Container } from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { FaRocket } from 'react-icons/fa';
const MotionBox = motion(Box);
export default function ModernHero({ onScrollToPredictor }) {
return (
<Box
bgGradient="linear(to-br, gray.900, purple.900, blue.900)"
minH="100vh"
display="flex"
alignItems="center"
position="relative"
overflow="hidden"
>
{/* Animated background elements */}
<MotionBox
position="absolute"
top="10%"
left="10%"
w="20px"
h="20px"
bg="blue.400"
borderRadius="full"
animate={{
scale: [1, 1.5, 1],
opacity: [0.3, 0.8, 0.3],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut",
}}
/>
<Container maxW="6xl" zIndex={2}>
<VStack spacing={8} textAlign="center" color="white">
<MotionBox
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<Heading
size="4xl"
bgGradient="linear(to-r, white, blue.200)"
bgClip="text"
lineHeight="shorter"
>
AI Viral Prediction Tool
</Heading>
</MotionBox>
<MotionBox
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<Text fontSize="xl" maxW="3xl" color="gray.200" lineHeight="tall">
Predict viral potential with AI-powered analysis. Get real-time insights on content performance,
psychology scores, and optimal timingβall enhanced with live social media data.
</Text>
</MotionBox>
<MotionBox
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<Button
size="lg"
colorScheme="blue"
leftIcon={<FaRocket />}
onClick={onScrollToPredictor}
_hover={{ transform: 'translateY(-2px)', boxShadow: 'xl' }}
transition="all 0.2s"
>
Analyze Your Content
</Button>
</MotionBox>
</VStack>
</Container>
</Box>
);
}
EOF
# Create viral meter visualization component
cat > components/ui/ViralMeter.js << 'EOF'
import { Box, Text, Progress, VStack, Badge } from '@chakra-ui/react';
import { motion } from 'framer-motion';
const MotionBox = motion(Box);
export default function ViralMeter({
viralProbability = 0,
viralCategory = 'Low',
confidenceScore = 0
}) {
const getColorScheme = (probability) => {
if (probability >= 70) return 'red';
if (probability >= 50) return 'orange';
if (probability >= 30) return 'yellow';
return 'gray';
};
const getEmoji = (probability) => {
if (probability >= 80) return 'π₯';
if (probability >= 70) return 'π';
if (probability >= 50) return 'β¨';
if (probability >= 30) return 'π';
return 'π';
};
return (
<MotionBox
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
p={6}
bg="white"
borderRadius="xl"
boxShadow="2xl"
border="1px solid"
borderColor="gray.100"
>
<VStack spacing={4}>
<Text fontSize="6xl" role="img" aria-label="viral-indicator">
{getEmoji(viralProbability)}
</Text>
<VStack spacing={2}>
<Text fontSize="4xl" fontWeight="bold" color={`${getColorScheme(viralProbability)}.500`}>
{viralProbability}%
</Text>
<Text fontSize="lg" color="gray.600">
Viral Probability
</Text>
</VStack>
<Progress
value={viralProbability}
size="lg"
colorScheme={getColorScheme(viralProbability)}
w="full"
borderRadius="full"
bg="gray.100"
/>
<VStack spacing={2}>
<Badge
colorScheme={getColorScheme(viralProbability)}
fontSize="md"
px={3}
py={1}
borderRadius="full"
>
{viralCategory.toUpperCase()}
</Badge>
<Text fontSize="sm" color="gray.500">
Confidence: {confidenceScore}%
</Text>
</VStack>
</VStack>
</MotionBox>
);
}
EOF
# Create streaming progress component
cat > components/ui/SocialMediaProgress.js << 'EOF'
import { VStack, HStack, Text, Progress, Icon, Box } from '@chakra-ui/react';
import { motion, AnimatePresence } from 'framer-motion';
import { FaDatabase, FaBrain, FaRocket, FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa';
const MotionBox = motion(Box);
export default function TwitterProgress({
step = '',
message = '',
isLoading = false
}) {
const getStepIcon = (currentStep) => {
switch (currentStep) {
case 'connecting':
return FaRocket;
case 'fetching':
case 'parsing':
return FaDatabase;
case 'analyzing':
return FaBrain;
case 'complete':
return FaCheckCircle;
case 'error':
return FaExclamationTriangle;
default:
return FaRocket;
}
};
const getStepColor = (currentStep) => {
switch (currentStep) {
case 'complete':
return 'green.500';
case 'error':
return 'red.500';
case 'warning':
return 'orange.500';
default:
return 'blue.500';
}
};
const steps = [
{ id: 'connecting', label: 'Initializing' },
{ id: 'fetching', label: 'Fetching Data' },
{ id: 'parsing', label: 'Processing' },
{ id: 'analyzing', label: 'AI Analysis' },
{ id: 'complete', label: 'Complete' }
];
const getCurrentStepIndex = () => {
return steps.findIndex(s => s.id === step);
};
const getProgressValue = () => {
const index = getCurrentStepIndex();
if (step === 'complete') return 100;
if (step === 'error') return 100;
return index >= 0 ? ((index + 1) / steps.length) * 100 : 0;
};
if (!isLoading && !message) return null;
return (
<MotionBox
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
p={6}
bg="white"
borderRadius="xl"
boxShadow="lg"
border="1px solid"
borderColor="gray.200"
>
<VStack spacing={4} align="stretch">
<HStack>
<Icon
as={getStepIcon(step)}
color={getStepColor(step)}
boxSize={5}
/>
<Text fontWeight="bold" color="gray.700">
π Analysis Progress
</Text>
</HStack>
<Progress
value={getProgressValue()}
size="lg"
colorScheme={step === 'error' ? 'red' : 'blue'}
borderRadius="full"
bg="gray.100"
/>
<AnimatePresence mode="wait">
<MotionBox
key={message}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.2 }}
>
<Text
fontSize="sm"
color={getStepColor(step)}
fontWeight="medium"
>
{message}
</Text>
</MotionBox>
</AnimatePresence>
{/* Step indicators */}
<HStack justify="space-between" pt={2}>
{steps.map((stepItem, index) => (
<VStack key={stepItem.id} spacing={1}>
<Box
w={3}
h={3}
borderRadius="full"
bg={
getCurrentStepIndex() >= index
? getStepColor(step)
: 'gray.300'
}
transition="all 0.3s"
/>
<Text fontSize="xs" color="gray.500">
{stepItem.label}
</Text>
</VStack>
))}
</HStack>
</VStack>
</MotionBox>
);
}
EOF
# Create GlassCard
cat > components/ui/GlassCard.js << 'EOF'
import {
Box,
useColorModeValue,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
const MotionBox = motion(Box);
const GlassCard = ({
children,
hover = true,
opacity = 0.25,
borderOpacity = 0.2,
...props
}) => {
const glassBg = useColorModeValue(
`rgba(255, 255, 255, ${opacity})`,
`rgba(255, 255, 255, ${opacity * 0.1})`
);
const borderColor = useColorModeValue(
`rgba(255, 255, 255, ${borderOpacity})`,
`rgba(255, 255, 255, ${borderOpacity * 0.5})`
);
const boxShadow = useColorModeValue(
'0 8px 32px 0 rgba(31, 38, 135, 0.37)',
'0 8px 32px 0 rgba(31, 38, 135, 0.37)'
);
return (
<MotionBox
bg={glassBg}
backdropFilter="blur(10px)"
border="1px solid"
borderColor={borderColor}
borderRadius="xl"
boxShadow={boxShadow}
overflow="hidden"
whileHover={hover ? {
scale: 1.02,
boxShadow: "0 12px 40px 0 rgba(31, 38, 135, 0.5)"
} : {}}
transition="all 0.3s ease"
{...props}
>
{children}
</MotionBox>
);
};
export default GlassCard;
EOF
# Create confetti effect for high viral scores
cat > components/ui/ConfettiEffect.js << 'EOF'
import { useEffect } from 'react';
import { Box } from '@chakra-ui/react';
export default function ConfettiEffect({ trigger, viralProbability = 0 }) {
useEffect(() => {
if (trigger && viralProbability >= 70) {
// Create confetti effect
const createConfetti = () => {
const confetti = document.createElement('div');
confetti.style.position = 'fixed';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.top = '-10px';
confetti.style.width = '10px';
confetti.style.height = '10px';
confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
confetti.style.borderRadius = '50%';
confetti.style.zIndex = '9999';
confetti.style.pointerEvents = 'none';
confetti.style.animation = 'confetti-fall 3s linear forwards';
document.body.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, 3000);
};
// Create multiple confetti pieces
for (let i = 0; i < 50; i++) {
setTimeout(createConfetti, i * 100);
}
// Add CSS animation if not already present
if (!document.getElementById('confetti-styles')) {
const style = document.createElement('style');
style.id = 'confetti-styles';
style.textContent = `
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
`;
document.head.appendChild(style);
}
}
}, [trigger, viralProbability]);
return null;
}
EOF
# Create footer
cat > components/ui/Footer.js << 'EOF'
import {
Box,
Container,
SimpleGrid,
Stack,
Text,
Link,
VStack,
HStack,
Icon,
Badge,
Divider,
useColorModeValue,
} from '@chakra-ui/react';
import {
FaTwitter,
FaGithub,
FaLinkedin,
FaExternalLinkAlt,
FaDatabase,
FaBrain,
FaRocket,
FaCode,
FaBook,
FaPlay,
} from 'react-icons/fa';
const Footer = () => {
const bgColor = useColorModeValue('gray.900', 'gray.900');
const textColor = useColorModeValue('gray.300', 'gray.300');
const headingColor = useColorModeValue('white', 'white');
const linkColor = useColorModeValue('gray.300', 'gray.300');
const currentYear = new Date().getFullYear();
return (
<Box bg={bgColor} color={textColor}>
<Container maxW='6xl' py={16}>
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={8}>
{/* Brand & Description */}
<VStack align='start' spacing={4}>
<Text fontSize='xl' fontWeight='bold' color={headingColor}>
π Viral Predictor
</Text>
<Text fontSize='sm' lineHeight='tall'>
AI-powered viral prediction tool for Twitter/X. Built with
real-time social data and Google Gemini.
</Text>
<HStack spacing={4}>
<Link href='https://x.com/jamaalbuilds' isExternal>
<Icon
as={FaTwitter}
boxSize={5}
_hover={{ color: '#1DA1F2' }}
/>
</Link>
<Link href='https://github.com/danilobatson' isExternal>
<Icon as={FaGithub} boxSize={5} _hover={{ color: 'white' }} />
</Link>
<Link href='https://linkedin.com/in/danilo-batson' isExternal>
<Icon
as={FaLinkedin}
boxSize={5}
_hover={{ color: '#0077B5' }}
/>
</Link>
</HStack>
</VStack>
{/* AI & Data Sources */}
<VStack align='start' spacing={4}>
<Text fontWeight='bold' color={headingColor}>
AI & Data
</Text>
<Stack spacing={2}>
<Link
href='https://ai.google.dev/gemini-api'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
Google Gemini API <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
<Link
href='https://lunarcrush.com/developers/api/endpoints'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
LunarCrush MCP <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
<Link
href='https://modelcontextprotocol.io'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
Model Context Protocol{' '}
<Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
</Stack>
</VStack>
{/* Tech Stack */}
<VStack align='start' spacing={4}>
<Text fontWeight='bold' color={headingColor}>
Tech Stack
</Text>
<Stack spacing={2}>
<Link
href='https://nextjs.org'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
Next.js 14 <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
<Link
href='https://react.dev'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
React 18 <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
<Link
href='https://chakra-ui.com'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
Chakra UI <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
</Stack>
</VStack>
{/* Developer */}
<VStack align='start' spacing={4}>
<Text fontWeight='bold' color={headingColor}>
Developer
</Text>
<Stack spacing={2}>
<Link
href='https://danilobatson.github.io'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
Portfolio <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
<Link
href='https://github.com/danilobatson'
isExternal
color={linkColor}
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
GitHub Projects <Icon as={FaExternalLinkAlt} boxSize={3} />
</Link>
<Link
href='mailto:djbatson19@gmail.com'
color={linkColor}
_hover={{ color: 'white' }}>
Contact
</Link>
</Stack>
</VStack>
</SimpleGrid>
<Divider my={8} borderColor='gray.700' />
{/* Tech Stack Icons & Credits */}
<VStack spacing={6}>
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={4} w='full'>
<VStack spacing={2}>
<HStack>
<Icon as={FaBrain} color='purple.400' />
<Text fontSize='sm' fontWeight='medium'>
AI Powered
</Text>
</HStack>
<Text fontSize='xs' textAlign='center'>
Google Gemini 2.0
</Text>
</VStack>
<VStack spacing={2}>
<HStack>
<Icon as={FaDatabase} color='blue.400' />
<Text fontSize='sm' fontWeight='medium'>
Real Data
</Text>
</HStack>
<Text fontSize='xs' textAlign='center'>
LunarCrush MCP
</Text>
</VStack>
<VStack spacing={2}>
<HStack>
<Icon as={FaCode} color='green.400' />
<Text fontSize='sm' fontWeight='medium'>
Modern Stack
</Text>
</HStack>
<Text fontSize='xs' textAlign='center'>
Next.js + React
</Text>
</VStack>
<VStack spacing={2}>
<HStack>
<Icon as={FaRocket} color='orange.400' />
<Text fontSize='sm' fontWeight='medium'>
Production
</Text>
</HStack>
<Text fontSize='xs' textAlign='center'>
Vercel Platform
</Text>
</VStack>
</SimpleGrid>
<Divider borderColor='gray.700' />
{/* Bottom Section */}
<Stack
direction={{ base: 'column', md: 'row' }}
justify='space-between'
align='center'
w='full'
spacing={4}>
<Text fontSize='sm'>
Β© {currentYear} π Viral Predictor. Built by{' '}
<Link
href='https://danilobatson.github.io'
isExternal
color='blue.400'
fontWeight='medium'
_hover={{ color: 'blue.300' }}>
Danilo Jamaal Batson
</Link>
</Text>
<HStack spacing={4} wrap='wrap'>
<Badge colorScheme='blue' variant='outline'>
Next.js 14
</Badge>
<Badge colorScheme='purple' variant='outline'>
Gemini 2.0
</Badge>
<Badge colorScheme='green' variant='outline'>
LunarCrush MCP
</Badge>
<Badge colorScheme='orange' variant='outline'>
Real-time
</Badge>
</HStack>
</Stack>
{/* Portfolio Statement */}
<Box textAlign='center' pt={4}>
<HStack
justify='center'
spacing={6}
mt={2}
fontSize='xs'
color='gray.500'>
<Text>β
Model Context Protocol</Text>
<Text>π€ AI-Enhanced Analysis</Text>
<Text>π Real Social Data</Text>
<Text>β‘ Production Ready</Text>
</HStack>
</Box>
{/* Documentation Links */}
<HStack justify='center' spacing={8} pt={4} fontSize='sm'>
<Link
href='https://ai.google.dev/gemini-api/docs'
isExternal
color='gray.400'
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
<Icon as={FaBook} boxSize={3} />
Gemini Docs
</Link>
<Link
href='https://lunarcrush.com/developers'
isExternal
color='gray.400'
_hover={{ color: 'white' }}
display='flex'
alignItems='center'
gap={1}>
<Icon as={FaBook} boxSize={3} />
MCP Docs
</Link>
</HStack>
</VStack>
</Container>
</Box>
);
};
export default Footer;
EOF
π― Main Viral Predictor Component
Now we'll create the central component that ties everything together with streaming functionality.
# Create the main ViralPredictor component with streaming integration
cat > components/ViralPredictor/index.js << 'EOF'
import {
Box,
VStack,
HStack,
Text,
Textarea,
Input,
Button,
Progress,
Badge,
useToast,
SimpleGrid,
Icon,
Divider,
Container,
Heading,
Card,
Alert,
AlertIcon,
AlertDescription,
CardBody,
CardHeader,
Wrap,
WrapItem,
Link,
} from '@chakra-ui/react';
import { useState, useRef } from 'react';
import { motion } from 'framer-motion';
import {
FaHeart,
FaReply,
FaShare,
FaClock,
FaLightbulb,
FaHashtag,
FaTwitter,
FaBrain,
FaExternalLinkAlt,
FaDatabase,
} from 'react-icons/fa';
import { Calendar, Clock, Globe } from 'lucide-react';
import { formatNumber } from '../../lib/number-utils';
import SocialMediaProgress from '../ui/SocialMediaProgress';
import ViralMeter from '../ui/ViralMeter';
import ConfettiEffect from '../ui/ConfettiEffect';
import ModernHero from '../ui/ModernHero';
const MotionBox = motion(Box);
export default function ViralPredictor() {
const [content, setContent] = useState('');
const [creator, setCreator] = useState('');
const [loading, setLoading] = useState(false);
const [results, setResults] = useState(null);
const [error, setError] = useState('');
const [creatorError, setCreatorError] = useState('');
const [progressStep, setProgressStep] = useState('');
const [progressMessage, setProgressMessage] = useState('');
const [showConfetti, setShowConfetti] = useState(false);
const predictorRef = useRef(null);
const toast = useToast();
const scrollToPredictor = () => {
predictorRef.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
};
const updateProgress = (step, message = '') => {
console.log(`π Progress: ${step} - ${message}`);
setProgressStep(step);
setProgressMessage(message);
};
const handlePredict = async () => {
if (!content.trim()) {
toast({
title: 'Tweet Required',
description: 'Please enter your original tweet content to analyze',
status: 'warning',
duration: 3000,
isClosable: true,
});
return;
}
setLoading(true);
setError('');
setCreatorError('');
setResults(null);
setShowConfetti(false);
try {
// Start the streaming request
const response = await fetch('/api/analyze-stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
content: content.trim(),
creator: creator.trim().replace(/^@+/, '') || undefined,
}),
});
if (!response.ok) {
throw new Error('Failed to start analysis');
}
// Use proper streaming with EventSource-like behavior
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split('\n');
// Keep the last incomplete line in buffer
buffer = lines.pop() || '';
for (const line of lines) {
if (line.startsWith('data: ')) {
try {
const update = JSON.parse(line.slice(6));
// Update progress with real-time messages
updateProgress(update.step, update.message);
console.log('π‘ Streaming update:', update.step, update.message);
// Handle special events
if (update.step === 'success' && update.data?.creatorData) {
console.log(
'π Real-time creator data:',
update.data.creatorData
);
}
if (update.step === 'complete' && update.data) {
updateProgress('complete', 'Analysis complete!');
setResults(update.data);
if (update.data.viralProbability >= 70) {
setTimeout(() => setShowConfetti(true), 500);
}
toast({
title: `${update.data.viralProbability}% Viral Potential!`,
description: update.data.hasCreatorData
? 'π Enhanced with real-time account analytics'
: 'π General content analysis',
status:
update.data.viralProbability >= 70 ? 'success' : 'info',
duration: 5000,
isClosable: true,
});
// Exit streaming loop
reader.cancel();
return;
}
if (update.step === 'error') {
throw new Error(update.message);
}
if (update.step === 'warning') {
setCreatorError(update.message);
}
} catch (parseError) {
console.warn('Could not parse streaming update:', line);
}
}
}
// Force UI update by adding small delay
await new Promise((resolve) => setTimeout(resolve, 50));
}
} catch (err) {
setError(err.message);
updateProgress('error', err.message);
toast({
title: 'Analysis Failed',
description: err.message,
status: 'error',
duration: 5000,
isClosable: true,
});
} finally {
setLoading(false);
}
};
const getViralCategoryColor = (category) => {
switch (category) {
case 'Ultra High':
return 'red';
case 'High':
return 'orange';
case 'Moderate':
return 'yellow';
case 'Low':
return 'gray';
default:
return 'gray';
}
};
const getTwitterEmoji = (probability) => {
if (probability >= 80) return 'π₯';
if (probability >= 70) return 'π';
if (probability >= 60) return 'π«';
if (probability >= 50) return 'β¨';
return 'π';
};
return (
<Box minH='100vh' bg='gray.50'>
<ConfettiEffect
trigger={showConfetti}
viralProbability={results?.viralProbability}
/>
{/* Modern Hero Section */}
<ModernHero onScrollToPredictor={scrollToPredictor} />
{/* Main Content */}
<Container maxW='6xl' py={20} ref={predictorRef}>
<VStack spacing={12} align='stretch'>
{/* Input Section */}
<MotionBox
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}>
<Card size="lg" variant="elevated">
<CardBody p={8}>
<VStack spacing={6}>
<VStack spacing={2} textAlign='center'>
<Heading
size='lg'
bgGradient='linear(to-r, gray.700, black)'
bgClip='text'>
π Analyze Your Original Tweet
</Heading>
<Text color='gray.600'>
Paste your original tweet content and get instant viral
predictions with real-time creator data.
</Text>
</VStack>
<VStack spacing={4} w='full'>
<Box w='full'>
<Text mb={2} fontWeight='medium' color='gray.700'>
Tweet Content *
</Text>
<Textarea
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder='Example: "Bitcoin just broke through $100K resistance! The bull run is here! π #Bitcoin #Crypto"'
size='lg'
minH='120px'
resize='vertical'
borderColor='gray.300'
_focus={{
borderColor: 'blue.400',
boxShadow: '0 0 0 1px #3182CE',
}}
/>
</Box>
<Box w='full'>
<Text mb={2} fontWeight='medium' color='gray.700'>
Creator Handle (Optional)
</Text>
<Input
value={creator}
onChange={(e) => setCreator(e.target.value)}
placeholder='@elonmusk'
size='lg'
borderColor='gray.300'
_focus={{
borderColor: 'blue.400',
boxShadow: '0 0 0 1px #3182CE',
}}
/>
<Text fontSize='sm' color='gray.500' mt={1}>
Enter creator handle to get enhanced analysis with real follower data
</Text>
</Box>
<Button
onClick={handlePredict}
isLoading={loading}
loadingText='Analyzing...'
size='lg'
colorScheme='blue'
w='full'
leftIcon={<FaBrain />}
_hover={{ transform: 'translateY(-1px)' }}
transition='all 0.2s'>
Predict Viral Potential
</Button>
</VStack>
</VStack>
</CardBody>
</Card>
</MotionBox>
{/* Progress Section */}
{loading && (
<MotionBox
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3 }}>
<SocialMediaProgress
step={progressStep}
message={progressMessage}
isLoading={loading}
/>
</MotionBox>
)}
{/* Creator Error */}
{creatorError && (
<Alert status='warning' borderRadius='lg'>
<AlertIcon />
<AlertDescription>{creatorError}</AlertDescription>
</Alert>
)}
{/* Error Section */}
{error && (
<Alert status='error' borderRadius='lg'>
<AlertIcon />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{/* Results Section */}
{results && (
<MotionBox
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}>
<VStack spacing={8} align='stretch'>
{/* Viral Meter */}
<ViralMeter
viralProbability={results.viralProbability}
viralCategory={results.viralCategory}
confidenceScore={results.confidenceScore}
/>
{/* Creator Data */}
{results.hasCreatorData && results.creatorData && (
<Card>
<CardHeader>
<HStack>
<Icon as={FaTwitter} color='blue.400' />
<Text fontWeight='bold' color='blue.600'>
Your Expected π Engagement
</Text>
<Badge colorScheme='green' fontSize='xs'>
POWERED BY LUNARCRUSH MCP
</Badge>
</HStack>
</CardHeader>
<CardBody>
<SimpleGrid columns={[1, 2, 3]} spacing={6}>
<VStack>
<Text fontSize='2xl' fontWeight='bold' color='blue.500'>
@{results.creatorData.handle.replace('@', '')}
</Text>
<Text fontSize='sm' color='gray.600'>
Handle
</Text>
</VStack>
<VStack>
<Text fontSize='2xl' fontWeight='bold' color='green.500'>
{formatNumber(results.creatorData.followers)}
</Text>
<Text fontSize='sm' color='gray.600'>
Followers
</Text>
</VStack>
<VStack>
<Text fontSize='2xl' fontWeight='bold' color='purple.500'>
{formatNumber(results.expectedEngagement)}
</Text>
<Text fontSize='sm' color='gray.600'>
Expected Engagement
</Text>
</VStack>
</SimpleGrid>
</CardBody>
</Card>
)}
{/* Psychology Metrics */}
<Card>
<CardBody>
<Text fontSize="lg" fontWeight="bold" color="blue.600" mb={3}>
π§ Why People Will Engage on π
</Text>
<SimpleGrid columns={4} spacing={4}>
<Box textAlign="center">
<Text fontSize="2xl" fontWeight="bold" color="orange.500">
{results.psychologyScore?.emotional_appeal || 75}%
</Text>
<Text fontSize="sm" color="gray.600">
Emotional Impact
</Text>
<Text fontSize="xs" color="gray.500">
Makes people feel something
</Text>
</Box>
<Box textAlign="center">
<Text fontSize="2xl" fontWeight="bold" color="blue.500">
{results.psychologyScore?.shareability || 70}%
</Text>
<Text fontSize="sm" color="gray.600">
Share Value
</Text>
<Text fontSize="xs" color="gray.500">
Worth sharing to followers
</Text>
</Box>
<Box textAlign="center">
<Text fontSize="2xl" fontWeight="bold" color="green.500">
{results.psychologyScore?.memorability || 65}%
</Text>
<Text fontSize="sm" color="gray.600">
Useful Content
</Text>
<Text fontSize="xs" color="gray.500">
Helpful or informative
</Text>
</Box>
<Box textAlign="center">
<Text fontSize="2xl" fontWeight="bold" color="purple.500">
{Math.round((
(results.psychologyScore?.emotional_appeal || 75) +
(results.psychologyScore?.shareability || 70) +
(results.psychologyScore?.memorability || 65)
) / 3)}%
</Text>
<Text fontSize="sm" color="gray.600">
Story Appeal
</Text>
<Text fontSize="xs" color="gray.500">
Has narrative hook
</Text>
</Box>
</SimpleGrid>
</CardBody>
</Card>
{/* Recommendations */}
{results.recommendations && results.recommendations.length > 0 && (
<Card>
<CardBody>
<HStack mb={4}>
<Icon as={FaLightbulb} color='yellow.500' />
<Text fontWeight='bold' color='orange.600'>
π‘ How to Get More Engagement
</Text>
</HStack>
<VStack spacing={3} align='stretch'>
{results.recommendations.map((rec, index) => (
<HStack key={index} align='flex-start'>
<Badge
colorScheme='orange'
borderRadius='full'
minW='20px'
textAlign='center'>
{index + 1}
</Badge>
<Text fontSize='sm'>{rec}</Text>
</HStack>
))}
</VStack>
</CardBody>
</Card>
)}
{/* Hashtags and Timing */}
<SimpleGrid columns={[1, 2]} spacing={6}>
{/* Hashtags */}
{results.optimizedHashtags &&
results.optimizedHashtags.length > 0 && (
<Card>
<CardBody>
<HStack mb={3}>
<Icon as={FaHashtag} color='blue.500' />
<Text fontWeight='bold' color='blue.600'>
π Trending Hashtags
</Text>
</HStack>
<Wrap>
{results.optimizedHashtags.map((tag, index) => (
<WrapItem key={index}>
<Badge
colorScheme='blue'
fontSize='sm'
px={2}
py={1}>
{tag}
</Badge>
</WrapItem>
))}
</Wrap>
</CardBody>
</Card>
)}
{/* Best Times */}
<Card>
<CardBody>
<Text fontSize="lg" fontWeight="bold" color="green.600" mb={3}>
β° Best Times to Tweet
</Text>
<VStack spacing={3} align="stretch">
<HStack>
<Icon as={Calendar} color="green.500" />
<Text fontWeight="bold">Best Days:</Text>
<Text color="green.600">
{results.optimalTiming?.best_day || 'Tuesday-Thursday'}
</Text>
</HStack>
<HStack>
<Icon as={Clock} color="blue.500" />
<Text fontWeight="bold">Peak Hours:</Text>
<Text color="blue.600">
{results.optimalTiming?.best_hour ?
`${results.optimalTiming.best_hour}:00 ${results.optimalTiming.timezone || 'UTC'}` :
'9-11 AM, 1-3 PM EST'
}
</Text>
</HStack>
<HStack>
<Icon as={Globe} color="purple.500" />
<Text fontWeight="bold">Time Zone:</Text>
<Text color="purple.600">
{results.optimalTiming?.timezone || 'UTC'}
</Text>
</HStack>
</VStack>
</CardBody>
</Card>
</SimpleGrid>
{/* Analysis Source */}
<Box textAlign='center' py={4}>
<Text fontSize='sm' color='gray.500'>
Analysis powered by {results.analysisSource} β’ Enhanced with
LunarCrush MCP
</Text>
<Text fontSize='xs' color='gray.400' mt={1}>
Analyzed at {new Date(results.timestamp).toLocaleString()}
</Text>
</Box>
</VStack>
</MotionBox>
)}
</VStack>
</Container>
</Box>
);
}
EOF
π Main Application Setup
# Create the main application page
cat > pages/index.js << 'EOF'
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import ViralPredictor from '../components/ViralPredictor';
import Head from 'next/head';
// Custom theme for better visual appeal
const theme = extendTheme({
styles: {
global: {
body: {
bg: 'gray.50',
},
},
},
colors: {
brand: {
50: '#e3f2fd',
500: '#2196f3',
900: '#0d47a1',
},
},
});
export default function Home() {
return (
<ChakraProvider theme={theme}>
<Head>
<title>AI Viral Prediction Tool | Analyze Content with AI</title>
<meta name="description" content="Predict viral potential with AI-powered analysis. Get real-time insights on content performance with live social media data." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ViralPredictor />
</ChakraProvider>
);
}
EOF
# Create Next.js configuration
cat > next.config.js << 'EOF'
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
// Enable modern JavaScript features
esmExternals: true,
},
env: {
// Make environment variables available to the client (if needed)
CUSTOM_KEY: process.env.CUSTOM_KEY,
},
}
module.exports = nextConfig
EOF
# Update package.json scripts
cat > package.json << 'EOF'
{
"name": "ai-viral-prediction-tool",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "echo \"No tests yet\" && exit 0"
},
"dependencies": {
"@chakra-ui/next-js": "^2.2.0",
"@chakra-ui/react": "^2.8.2",
"@chakra-ui/theme": "^3.3.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@google/generative-ai": "^0.1.3",
"@modelcontextprotocol/sdk": "^0.1.0",
"framer-motion": "^10.16.16",
"lucide-react": "^0.263.1",
"next": "14.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0"
},
"devDependencies": {
"eslint": "^8.57.0",
"eslint-config-next": "14.0.4"
}
}
EOF
β Deployment
Production Deployment
# Deploy to Vercel (recommended)
npm i -g vercel
vercel
# Follow prompts and add environment variables:
# LUNARCRUSH_API_KEY=your_key
# GOOGLE_GEMINI_API_KEY=your_key
Alternative Deployment Options:
- Netlify: Supports Next.js with serverless functions
- Railway: Full-stack deployment with environment variables
- DigitalOcean App Platform: One-click deployment
π What You've Built & Portfolio Impact
Technical Achievements Unlocked
π― Real-Time Streaming Architecture: You've implemented Server-Sent Events (SSE) for live progress updates, demonstrating advanced web APIs and user experience design.
π€ Production AI Integration: Your Google Gemini implementation includes sophisticated prompt engineering, error handling, and streaming responsesβexactly what AI companies look for.
π Model Context Protocol (MCP): You're now working with the cutting-edge standard that companies like Anthropic are betting on for the future of AI-data integration.
π Advanced Data Processing: Your application processes real-time social media data, performs psychology-based analysis, and presents insights in an intuitive dashboard.
β‘ Performance Optimization: You've optimized from a theoretical 32-second process to a streamlined 15-second experience with real-time feedback.
Business Value Demonstration
This isn't just a technical demoβit's a tool that demonstrates real business understanding:
π Content Marketing: Helps optimize social media strategy before posting
π― User Experience: Real-time feedback keeps users engaged during processing
π Data Integration: Combines multiple APIs for enhanced insights
π Scalability: Serverless architecture that can handle production traffic
π Next Steps & Extensions
Your AI Viral Prediction Tool is now production-ready, but here are powerful extensions you could add:
Advanced Features
- Multi-Platform Analysis: Extend to LinkedIn, Instagram, TikTok using MCP
- A/B Testing: Compare multiple content variations
- Historical Tracking: Store and analyze prediction accuracy over time
- Team Collaboration: Multi-user workspace with shared analytics
AI Enhancements
- Image Analysis: Add visual content scoring using Google Vision API
- Trend Detection: Predict emerging hashtags and topics
- Personalization: Learn from user's historical performance
- Competitor Analysis: Compare against industry benchmarks
Enterprise Features
- Analytics Dashboard: Comprehensive reporting for marketing teams
- API Access: Allow other tools to integrate your viral predictions
- White-label Solution: Customizable for agencies and consultants
- Advanced Scheduling: Optimal posting time automation
π Key Learnings & Technical Skills
Modern Web Development
- Next.js 14: Latest React framework with API routes and optimization
- Server-Sent Events: Real-time streaming without WebSocket complexity
- Error Boundaries: Production-grade error handling and user feedback
- Performance: Strategic optimization and user experience design
AI Integration
- Google Gemini: Advanced language model integration with streaming
- Prompt Engineering: Sophisticated prompts for reliable JSON responses
- Model Context Protocol: Next-generation AI-data integration standard
- Psychology-Based Analysis: AI that understands human engagement patterns
Production Architecture
- Serverless APIs: Scalable backend with automatic scaling
- Real-time Processing: Streaming responses with progress feedback
- External API Integration: MCP protocol for social media data
- Professional UI: Modern React components with animations
π Conclusion
Congratulations! You've built a sophisticated AI Viral Prediction Tool that showcases cutting-edge technologies and production-ready architecture. This project demonstrates exactly the kind of modern full-stack development skills that top tech companies are looking for.
What makes this project special:
π₯ Industry-Relevant: Uses the latest AI and streaming technologies that companies are actively implementing
π― Portfolio Gold: Perfect demonstration piece
β‘ Production-Ready: Comprehensive error handling, performance optimization, and professional UX
π Future-Focused: Implements MCP protocol and streaming patterns that are becoming industry standards
Your AI Viral Prediction Tool isn't just a projectβit's a demonstration of your ability to integrate complex technologies into cohesive, user-friendly applications that solve real business problems.
Ready to showcase your skills? Deploy your application, add it to your portfolio, and prepare to discuss the technical decisions, challenges overcome, and business value delivered. This project positions you perfectly for senior developer roles focused on AI integration and modern web development.
π Take Action
Get Started Now:
- Subscribe to LunarCrush API - Access unique social intelligence
- Fork the Repository - Build your enhanced version
- Deploy Your Own - Launch on Vercel
Learn More:
- LunarCrush MCP Documentation - Complete integration guide
- Google Gemini AI Documentation - Advanced AI capabilities
- Next.js Documentation - Full-stack development patterns
π Complete GitHub Repository (Full Source Code)
Built with β€οΈ using LunarCrush MCP β’ Google Gemini AI β’ Next.js β’ Material-UI
Questions? Drop them below! I respond to every comment and love helping fellow developers build amazing voice-powered AI applications. π
Ready to revolutionize how you interact with cryptocurrency data? Start building your voice-powered crypto assistant today!
Get Started with LunarCrush MCP β
Use my discount referral code JAMAALBUILDS to receive 15% off your plan.
π Star the repo, share your creation, and happy coding!
Top comments (0)