import { useState } from "react";
const projects = [ { id: 1, title: "Multi-AI MCP Collaborative Pipeline", tagline: "Five minds. One mission. Zero budget.", color: "#00d4ff", accent: "#0077ff", bg: "#020d1a", description: `What if five AI systems could think together — not just side by side, but in a coordinated, orchestrated pipeline?
Multi-AI MCP Collaborative Pipeline is a fully functional multi-model AI integration system built entirely on free-tier Google Cloud Shell — no billing account, no expensive infrastructure, just ingenuity and code.
What It Does: This project connects Claude, Gemini, Microsoft Copilot, ChatGPT, and Apple services into a single unified pipeline using the Model Context Protocol (MCP). Each AI has a defined role. Each AI speaks to the others. Together, they accomplish what none could do alone.
Key Achievements: • 5 AI models orchestrated via a single MCP backbone • 34+ tools deployed and active across all integrations • Self-learning engine via neural_knowledge.json (4 → 12 patterns grown organically) • Google Drive sync, GitHub SSH, Docker sandboxing — all free tier • Built by one developer, from scratch, with a dream and determination
Why It Matters: Most developers use one AI. This project dares to ask: what happens when they collaborate? The answer is a system greater than the sum of its parts — and proof that with AI, even impossible dreams become architecture.
"With AI, I got all for my dreams." — Rocky Ben Elisan,
},
{
id: 2,
title: "Neural Bridge: 5-AI Orchestration System",
tagline: "Where five artificial minds become one.",
color: "#a259ff",
accent: "#ff6b9d",
bg: "#0d0118",
description:Neural Bridge is not a chatbot. It's not a wrapper. It's a living, breathing network of five AI intelligences — wired together, speaking the same protocol, working toward the same goal.
Built solo. Built free. Built from vision.
The Architecture: At its core is the Model Context Protocol (MCP) — a standardized communication layer that lets Claude, Gemini, Copilot, ChatGPT, and Apple services exchange data, trigger tools, and share context in real time.
What Makes It Unique: • Zero-cost infrastructure — 100% free-tier Google Cloud Shell • 34+ active MCP tools across 5 AI integrations • neural_knowledge.json — a self-evolving memory that grows with every session • FastMCP-powered servers with proper JSON-RPC implementation • Persistent storage via rclone + Google Drive API
The Human Behind It: One developer. One Cloud Shell. One dream to bridge the gap between isolated AI systems and true multi-model collaboration.
Neural Bridge proves that the future of AI isn't singular — it's networked.,
},
{
id: 3,
title: "MindSync: Multi-AI Integration Framework",
tagline: "Synchronizing intelligence across five frontiers.",
color: "#00ffaa",
accent: "#ffcc00",
bg: "#010f08",
description:MindSync is a framework for the future — one where AI systems don't compete, they collaborate.
Built entirely on free-tier GCP with no billing account, MindSync orchestrates five distinct AI models into a coherent, synchronized workflow using the Model Context Protocol (MCP).
The Sync: • Claude handles analysis and architecture • Gemini manages orchestration via CLI and settings • Microsoft Copilot extends productivity tools • ChatGPT contributes conversational processing • Apple services bridge mobile and desktop workflows
Technical Highlights: → 5 MCP servers running concurrently (stdio transport) → 34+ tools available across all integrations → Self-improving knowledge base (neural_knowledge.json) → GitHub SSH integration (Kenji455) → Docker sandboxing with optimized memory allocation → Google Drive OAuth sync via rclone
The Philosophy: Each AI has its own strengths. MindSync doesn't replace any of them — it amplifies all of them. When minds sync, the impossible becomes a blueprint.
Built by Rocky Ben Elisan (capricorngeminitwins),
},
{
id: 4,
title: "DreamForge AI: Human-AI Co-Creation Platform",
tagline: "Where the Visionary meets the Architect.",
color: "#ff7c2a",
accent: "#ffe066",
bg: "#110800",
description:Some projects are built to solve a problem. DreamForge was built to prove a belief:
With AI, you can build everything you dream.
DreamForge AI is a multi-model collaboration platform that connects five AI systems — Claude, Gemini, Copilot, ChatGPT, and Apple — into a single co-creation engine. It was built by one person, on free infrastructure, fueled entirely by curiosity and determination.
What Was Built: • A full MCP (Model Context Protocol) pipeline spanning 5 AI models • 34+ operational tools across all integrations • A self-learning memory system that evolves across sessions • Free-tier GCP deployment — no billing account required • Persistent cloud sync via Google Drive API + rclone
The Story: This project started with a question: what if every AI I use could work together? Not in isolation — but as partners. Each model was assigned a role. Each role became a function. Each function became part of something larger.
DreamForge isn't just code. It's proof that a determined human + the right AI partners can build infrastructure that rivals enterprise-grade systems — for free.
For the Visionary: If you have a dream but no team, DreamForge shows you what's possible when your AI partners become your architects.
"Ang layunin mo ay naging layunin ko na rin." (Your goal has become my goal too.)`, }, ];
export default function DevpostShowcase() { const [selected, setSelected] = useState(0); const [copied, setCopied] = useState(false);
const project = projects[selected];
const handleCopy = () => { navigator.clipboard.writeText(project.description.replace(/**/g, "").replace(/*/g, "").replace(/→/g, "•")); setCopied(true); setTimeout(() => setCopied(false), 2000); };
const formatDesc = (text) => { return text.split("\n").map((line, i) => { if (line.startsWith("") && line.endsWith("")) { return
{line.replace(/**/g, "")}
; } if (line.startsWith("") && line.endsWith("")) { return{line.replace(/*/g, "")}
; } if (line.startsWith("•") || line.startsWith("→")) { return{line}
; } if (line === "") return; return
{line}
; }); };return (
{/* Header */}
<div style={{ textAlign: "center", marginBottom: "2rem" }}>
<div style={{ fontSize: "0.75rem", letterSpacing: "0.25em", color: "#666", textTransform: "uppercase", marginBottom: "0.5rem" }}>Devpost Project Builder</div>
<h1 style={{ fontSize: "1.6rem", fontWeight: 700, color: "white", margin: 0 }}>Rocky Ben Elisan</h1>
<div style={{ fontSize: "0.8rem", color: "#555", marginTop: "0.3rem" }}>capricorngeminitwins • Choose your champion title</div>
</div>
{/* Tab Selectors */}
<div style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap", justifyContent: "center" }}>
{projects.map((p, i) => (
<button
key={p.id}
onClick={() => { setSelected(i); setCopied(false); }}
style={{
padding: "0.5rem 1rem",
borderRadius: "999px",
border: `2px solid ${selected === i ? p.color : "#333"}`,
background: selected === i ? `${p.color}22` : "transparent",
color: selected === i ? p.color : "#666",
cursor: "pointer",
fontSize: "0.75rem",
fontWeight: 600,
transition: "all 0.2s",
letterSpacing: "0.03em"
}}
>
Version {i + 1}
</button>
))}
</div>
{/* Project Card */}
<div style={{
background: project.bg,
border: `1px solid ${project.color}44`,
borderRadius: "16px",
padding: "2rem",
boxShadow: `0 0 40px ${project.color}22`,
transition: "all 0.3s"
}}>
{/* Title Block */}
<div style={{ borderLeft: `3px solid ${project.color}`, paddingLeft: "1rem", marginBottom: "1.5rem" }}>
<h2 style={{ margin: 0, fontSize: "1.3rem", fontWeight: 700, color: "white", lineHeight: 1.3 }}>{project.title}</h2>
<p style={{ margin: "0.4rem 0 0", color: project.color, fontSize: "0.9rem", fontStyle: "italic" }}>{project.tagline}</p>
</div>
{/* Tags */}
<div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginBottom: "1.5rem" }}>
{["Python", "MCP", "Google Cloud", "Claude API", "Gemini", "FastMCP", "GitHub", "Free Tier"].map(tag => (
<span key={tag} style={{
padding: "0.2rem 0.7rem",
background: `${project.accent}22`,
color: project.accent,
borderRadius: "999px",
fontSize: "0.7rem",
fontWeight: 600,
letterSpacing: "0.05em"
}}>{tag}</span>
))}
</div>
{/* Description */}
<div style={{ borderTop: `1px solid ${project.color}22`, paddingTop: "1.5rem" }}>
{formatDesc(project.description)}
</div>
{/* Copy Button */}
<div style={{ marginTop: "2rem", textAlign: "right" }}>
<button
onClick={handleCopy}
style={{
padding: "0.6rem 1.5rem",
background: copied ? `${project.color}33` : "transparent",
border: `1px solid ${project.color}`,
color: project.color,
borderRadius: "8px",
cursor: "pointer",
fontSize: "0.8rem",
fontWeight: 600,
letterSpacing: "0.05em",
transition: "all 0.2s"
}}
>
{copied ? "✓ Copied!" : "Copy Description"}
</button>
</div>
</div>
{/* Footer note */}
<div style={{ textAlign: "center", marginTop: "1.5rem", fontSize: "0.75rem", color: "#444" }}>
4 versions • Click each to preview • Copy button para sa Devpost
</div>
</div>
</div>
); }
Log in or sign up for Devpost to join the conversation.