Quick guide for deploying Vibe-Draft to Val Town using MCP tools.

• Val Town account
• Val Town MCP tools installed
• OpenAI API key (automatically provided by Val Town)

Using Val Town MCP:

# Create the val project
mcp_valtown_create_val --name "vibe-draft" --privacy "public"

This creates a new val with the identifier <your-username>/vibe-draft.

Upload all files to your val using the MCP tools:

# Create directories
mcp_valtown_create_directory --val "<your-username>/vibe-draft" --path "backend"
mcp_valtown_create_directory --val "<your-username>/vibe-draft" --path "backend/database"
mcp_valtown_create_directory --val "<your-username>/vibe-draft" --path "frontend"
mcp_valtown_create_directory --val "<your-username>/vibe-draft" --path "frontend/components"
mcp_valtown_create_directory --val "<your-username>/vibe-draft" --path "shared"

# Upload backend files
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "backend/index.ts" --fileType "http"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "backend/sse-hub.ts"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "backend/vibe-engine.ts"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "backend/database/schema.ts"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "backend/database/queries.ts"

# Upload frontend files
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/index.html"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/index.tsx"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/style.css"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/components/App.tsx"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/components/CardDeck.tsx"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/components/PromptStack.tsx"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/components/VibeOutput.tsx"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "frontend/components/PlayerList.tsx"

# Upload shared files
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "shared/types.ts"
mcp_valtown_create_file --val "<your-username>/vibe-draft" --path "shared/cards.ts"

Make sure the main backend entry point is set as an HTTP type:

mcp_valtown_set_file_type --val "<your-username>/vibe-draft" --path "backend/index.ts" --fileType "http"

Your app will be available at:

https://<your-username>-vibe-draft.web.val.run/

1. Open the URL in your browser
2. Enter a session ID (e.g., "test-session")
3. Enter your name
4. Click "Join Session"
5. Start playing cards!

Open multiple browser tabs/windows with different names to test multiplayer:

• Tab 1: Session "test-game", Player "Alice"
• Tab 2: Session "test-game", Player "Bob"
• Tab 3: Session "test-game", Player "Charlie"

All players should see updates in real-time via SSE.

mcp_valtown_get_logs --fileId "<backend-index-file-id>"

mcp_valtown_get_traces --fileId "<backend-index-file-id>"

curl https://<your-username>-vibe-draft.web.val.run/api/health

Should return:

{
  "status": "healthy",
  "timestamp": 1234567890
}

SQLite tables are automatically created on first run. To inspect:

mcp_valtown_sqlite_execute --sql "SELECT * FROM sessions_v1" --val "<your-username>/vibe-draft"
mcp_valtown_sqlite_execute --sql "SELECT * FROM players_v1" --val "<your-username>/vibe-draft"
mcp_valtown_sqlite_execute --sql "SELECT * FROM prompt_stack_v1" --val "<your-username>/vibe-draft"

OpenAI API key is automatically provided by Val Town. No manual setup needed!

If you want to use your own API key:

mcp_valtown_add_env_var --val "<your-username>/vibe-draft" --key "OPENAI_API_KEY" --value "sk-..." --description "OpenAI API key"

To update files after deployment:

mcp_valtown_update_file --val "<your-username>/vibe-draft" --path "backend/index.ts" --content "<new-content>"

Max 10 active players. First 10 to join can play, others spectate.

Check browser console for errors. Val Town HTTP vals support SSE natively.

Check that shared/cards.ts is uploaded correctly and importing properly.

Verify OpenAI API key is set (should be automatic). Check Val Town console for API errors.

Tables should auto-create on first run. If issues, check that schema.ts ran successfully in logs.

1. Database Initialization: Comment out initDatabase() after first run for faster cold starts
2. Card Drawing: Cache CARD_DECK in memory instead of re-importing
3. SSE Heartbeat: Adjust keep-alive interval based on needs (currently 30s)
4. Token Limits: Use lower token limits for faster/cheaper responses

• Sessions are public by session ID - anyone with ID can join
• No authentication required (by design for easy multiplayer)
• Consider adding password protection for private games
• Rate limit the generate endpoint to prevent API abuse

Val Town automatically handles:

• Multiple concurrent sessions
• Database connection pooling
• SSE connection management
• Cold start optimization

For very high traffic:

• Consider session cleanup cron job
• Archive old sessions to separate tables
• Add Redis-like caching for active session state

Need Help?

• Val Town Docs: https://docs.val.town
• Val Town Discord: https://discord.gg/valtown
• File Issues: On the val's page

Enjoy your multiplayer prompting sandbox! 🎴✨