• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
jjg

jjg

multiplayer-prompting

Public
Like
multiplayer-prompting
Home
Code
15
.vscode
.vt
backend
docs
frontend
shared
.vtignore
AGENTS.md
ARCHITECTURE.md
DEPLOYMENT.md
QUICKSTART.md
README.md
deno.json
index.ts
schema.ts
Environment variables
Branches
1
Pull requests
Remixes
History
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
…
Viewing readonly version of main branch: v17
View latest version
README.md

🎴 Vibe-Draft

A Multiplayer Prompting Sandbox for Val Town

Vibe-Draft is a collaborative, real-time "Cards Against Humanity" style experience for vibe-coding. Up to 10 developers join a session and take turns playing cards that influence an AI prompt. Each card modifies the tone, role, token limits, or adds custom instructions. The result is a living, evolving prompt that generates creative AI responses based on the collective vibe.

🎮 How It Works

  1. Create/Join a Session: Players enter a session ID and their name
  2. Take Turns: Each player gets 5 cards in their hand
  3. Play Cards: On your turn, play a card to influence the vibe:
    • Role Cards: Change the AI persona (Rust Wizard, UX Visionary, Code Pirate, etc.)
    • Tone Cards: Adjust the communication style (ELI5, Academic, Meme Lord, etc.)
    • Token Limit Cards: Control response length (Brief, Epic, Tweet-sized)
    • Custom Cards: Add your own freeform instructions
    • Image Cards: Upload visual context
    • Remove Cards: Undo moves or clear certain card types
  4. Generate: Hit "Generate Vibe" to see what the AI creates with the current stack
  5. Repeat: The next player takes their turn!

🏗️ Architecture

Backend (/backend)

  • index.ts: Main Hono app with API routes and SSE hub
  • sse-hub.ts: Server-Sent Events for real-time multiplayer updates
  • vibe-engine.ts: Synthesizes prompt stack into OpenAI calls
  • database/:
    • schema.ts: SQLite table definitions
    • queries.ts: Database operations for sessions, players, and cards

Frontend (/frontend)

  • index.html: Main HTML template
  • index.tsx: React app entry point
  • style.css: Custom styles and animations
  • components/:
    • App.tsx: Main application component
    • CardDeck.tsx: Player's hand of cards
    • PromptStack.tsx: Visual stack of played cards
    • VibeOutput.tsx: AI-generated responses
    • PlayerList.tsx: Active players and spectators

Shared (/shared)

  • types.ts: TypeScript interfaces shared between frontend/backend
  • cards.ts: Predefined card deck with 20+ cards

🚀 Features

Real-Time Multiplayer

  • SSE-Powered: No WebSockets needed! Uses Server-Sent Events for instant updates
  • Up to 10 Active Players: More can spectate
  • Turn-Based: Clear turn indicators and game flow
  • Live Updates: See cards played in real-time

Card System

  • 20+ Predefined Cards: Roles, tones, token limits, and style modifiers
  • Wild Cards: Create custom instructions on the fly
  • Image Context: Upload images for visual prompting (coming soon)
  • Remove/Undo: Fix mistakes or clear card types

AI Integration

  • OpenAI GPT-4o-mini: Fast, cost-effective generation
  • Dynamic Prompts: Each card stack creates a unique system prompt
  • Token Control: Cards can set response length limits
  • Visual Context: Support for image-based prompting

Beautiful UI

  • Glassmorphism Design: Modern, translucent interface
  • Smooth Animations: Card plays, stack updates, turn changes
  • Gradient Background: Purple-pink aesthetic
  • Responsive: Works on desktop and tablet

📦 Database Schema

Sessions Table

  • id: Unique session identifier
  • created_at: Timestamp
  • current_turn: Index of current player
  • max_players: Max active players (default 10)
  • status: waiting | active | completed

Players Table

  • session_id: Foreign key to sessions
  • name: Player display name
  • avatar: Emoji avatar
  • is_active: Active player vs spectator
  • turn_order: Turn sequence
  • last_seen: Heartbeat timestamp

Prompt Stack Table

  • session_id: Foreign key to sessions
  • player_name: Who played the card
  • card_type: role | tone | token-limit | custom | image | remove
  • content: Card content/instruction
  • image_url: Optional image URL (blob storage)
  • timestamp: When card was played

Vibe Results Table

  • session_id: Foreign key to sessions
  • prompt: Generated system prompt
  • response: AI response
  • token_count: Tokens used
  • timestamp: When generated

🎯 Game Flow

1. Player joins session → Assigned turn order → Draws 5 cards
2. Wait for turn → Turn indicator appears
3. Play a card → Card added to stack → Turn advances
4. Any player can hit "Generate" → OpenAI synthesizes vibe
5. AI response displayed → Continue playing cards
6. Repeat until satisfied or chaos ensues! 🎉

🔧 Val Town Specifics

Storage

  • SQLite: Session state, players, card history
  • Blob Storage: Image uploads (future feature)
  • No Deno KV: Not used per Val Town best practices

Imports

  • React 18.2.0: Pinned consistently across all files
  • Hono: Web framework for API routes
  • OpenAI: Official SDK from Val Town standard library
  • Utilities: readFile, serveFile, parseProject from std/utils

SSE Implementation

// Client connects to /api/sse/:sessionId const eventSource = new EventSource(`/api/sse/${sessionId}`); // Server broadcasts to all connections broadcast(sessionId, { type: "card-played", data: { playerName, stack, vibePreview }, timestamp: Date.now() });

🎨 Card Types Explained

Role Cards 🎭

Transform the AI's persona:

  • Rust Wizard 🦀: Senior Rust engineer
  • UX Visionary 🎨: Award-winning designer
  • Code Pirate 🏴‍☠️: Salty sea programmer
  • Code Poet 📜: Poetic technical writer

Tone Cards 🎨

Adjust communication style:

  • ELI5 👶: Kid-friendly explanations
  • Academic 🎓: Formal scholarly language
  • Meme Lord 💀: Internet culture speak
  • Brutally Honest 🔨: No-nonsense directness

Token Limit Cards 📏

Control response length:

  • Keep It Brief ⚡: Max 50 tokens
  • Epic Response 📚: Up to 500 tokens
  • Tweet It 🐦: 280 characters max

Style Modifiers ✨

  • Geocities Revival 🌐: 1990s nostalgia
  • Cyberpunk Aesthetic 🌃: Dark neon vibes
  • Extreme Minimal ⬜: Dieter Rams style

Special Cards

  • Wild Card 🃏: Custom freeform instruction
  • Show & Tell 📸: Upload image context
  • Undo Last ⏪: Remove previous card
  • Clear Roles 🧹: Remove all role cards

🎓 Usage Tips

For Best Results

  1. Start with a Role: Set the AI's persona first
  2. Add Tone: Fine-tune the communication style
  3. Set Token Limits: Control verbosity
  4. Add Custom Vibes: Get creative with wildcards
  5. Generate Often: See how each card changes the output

Strategic Play

  • Layer Roles: Mix technical + creative personas
  • Contrast Tones: Academic + Meme Lord = chaos
  • Token Control: Brief responses for rapid iteration
  • Remove Wisely: Clear roles to reset persona

Multiplayer Dynamics

  • Collaborate: Build on others' cards
  • Contradict: Play opposing vibes for fun
  • Experiment: Try wild combinations
  • Spectate: Learn by watching (spectators don't play)

🛠️ Development

Project Structure

├── backend/
│   ├── index.ts           # Main Hono app
│   ├── sse-hub.ts         # Real-time updates
│   ├── vibe-engine.ts     # OpenAI integration
│   └── database/
│       ├── schema.ts      # SQLite tables
│       └── queries.ts     # DB operations
├── frontend/
│   ├── index.html         # Main HTML
│   ├── index.tsx          # React entry
│   ├── style.css          # Custom styles
│   └── components/
│       ├── App.tsx
│       ├── CardDeck.tsx
│       ├── PromptStack.tsx
│       ├── VibeOutput.tsx
│       └── PlayerList.tsx
├── shared/
│   ├── types.ts           # TypeScript types
│   └── cards.ts           # Card definitions
└── README.md

API Routes

MethodEndpointDescription
POST/api/session/:id/joinJoin/create session
GET/api/session/:idGet session state
POST/api/session/:id/playPlay a card
POST/api/session/:id/generateGenerate vibe with OpenAI
GET/api/cards/draw/:countDraw random cards
GET/api/cardsGet all cards
GET/api/sse/:idSSE connection

Environment Variables

# Automatically provided by Val Town: # - Deno.env.get('OPENAI_API_KEY') - for OpenAI calls

🎪 Future Enhancements

  • Image Upload: Full support for visual context cards
  • Vote System: Players vote on best vibe
  • Card Combos: Special effects for card combinations
  • Saved Sessions: Resume previous games
  • Custom Decks: Create your own card sets
  • Streaming Responses: Real-time token-by-token output
  • Leaderboards: Track best vibes and players
  • Mobile UI: Touch-optimized card interface

🤝 Contributing

This is a Val Town project! To extend or remix:

  1. Fork the val on Val Town
  2. Modify files in your fork
  3. Test locally or deploy immediately
  4. Share your version!

📄 License

MIT License - Feel free to remix and build upon this!

🙏 Credits

Built with:

  • Val Town: Serverless platform with SQLite + OpenAI
  • Hono: Lightning-fast web framework
  • React 18: UI library
  • Tailwind CSS: Utility-first styling (via Twind)
  • SSE: Real-time updates without WebSockets

Made with 💜 for the Val Town community

"Where vibes become code, and chaos becomes creativity" 🎴✨

FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2026 Val Town, Inc.