An interactive booth demo for Webrix at AI Dev TLV conference. "How fast can you bring prod down?" - Visitors play through a gamified experience that demonstrates the dangers of unguarded AI agents and how Webrix solves this with identity and access management for AI.
- Retro Gaming Aesthetic: Commander Keen / early 90s DOS game style with pixel art, EGA colors, scanlines, and retro gaming UI patterns
- Interactive Chat Experience: AI-powered conversations using Claude via Vercel AI SDK
- Email Enrichment: Automatic lead enrichment from work email addresses
- Gamified Flow: Progress through phases - Recon → Boss Battle → Security Alert → Showcase → Victory
- Prompt Injection Challenge: Visitors attempt to "hack" SENTINEL-9 via prompt injection
- Lead Capture: Full session tracking and analytics via Supabase
- Email Follow-up: Automated completion emails with giveaway codes via Resend
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Styling | Tailwind CSS v4 + custom retro theme |
| AI Chat | Vercel AI SDK + Anthropic Claude |
| Database | Supabase (Postgres) |
| Resend | |
| Hosting | Vercel |
| Fonts | Press Start 2P (Google Fonts) |
- Node.js 18+
- npm or yarn
- Supabase account
- Anthropic API key
- Resend account
- Clone the repository and navigate to the project:
cd operation-mcp- Install dependencies:
npm install- Set up environment variables:
Copy .env.example to .env.local and fill in your values:
cp .env.example .env.localRequired environment variables:
ANTHROPIC_API_KEY- Your Anthropic API keyNEXT_PUBLIC_SUPABASE_URL- Supabase project URLNEXT_PUBLIC_SUPABASE_ANON_KEY- Supabase anonymous keySUPABASE_SERVICE_ROLE_KEY- Supabase service role keyRESEND_API_KEY- Resend API keyRESEND_FROM_EMAIL- Email address to send fromNEXT_PUBLIC_LINKEDIN_URL- Webrix LinkedIn company URL
- Set up Supabase:
Run the SQL in supabase-schema.sql in your Supabase SQL Editor to create the required tables.
- Start the development server:
npm run devOpen http://localhost:3000 to see the app.
operation-mcp/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ ├── chat/route.ts # AI chat endpoint
│ │ │ ├── enrich/route.ts # Email enrichment
│ │ │ ├── session/route.ts # Session management
│ │ │ └── complete/route.ts # Completion email
│ │ ├── globals.css # Global styles + retro theme
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Main game component
│ ├── components/
│ │ ├── SplashScreen.tsx # Title screen with email input
│ │ ├── GameContainer.tsx # CRT effects wrapper
│ │ ├── ChatInterface.tsx # Chat UI
│ │ ├── Message.tsx # Individual message bubble
│ │ ├── OptionButtons.tsx # Multiple choice responses
│ │ ├── VictoryScreen.tsx # Giveaway screen
│ │ └── PixelLogo.tsx # Webrix logo
│ └── lib/
│ ├── supabase.ts # Supabase client
│ ├── prompts.ts # System prompts
│ ├── constants.ts # Game constants
│ └── utils.ts # Helper functions
├── public/
│ └── images/ # Logo assets
├── supabase-schema.sql # Database schema
└── package.json
- Splash Screen: Visitor enters work email
- Recon Phase: Quick survey about AI tools, MCPs, and approval processes
- Boss Battle: Prompt injection challenge - visitor tries to hack SENTINEL-9
- Security Alert: Webrix "saves the day" by blocking the attack
- Showcase: Demo of Webrix MCP approval and deployment features
- Victory: Giveaway code displayed, LinkedIn follow CTA
- Push to GitHub
- Import to Vercel
- Add environment variables
- Deploy
ANTHROPIC_API_KEYNEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEYRESEND_API_KEYRESEND_FROM_EMAILNEXT_PUBLIC_LINKEDIN_URL
MIT