Vibe Tide MCP App

Create, edit, and play Vibe Tide levels directly inside any MCP client that supports MCP Apps.

Overview

Vibe Tide MCP App is an MCP App that brings a full level editor and game player into any MCP-compatible client. Ask Claude to design levels, and watch them appear in an interactive editor where you can tweak tiles, adjust gameplay parameters, and play-test instantly—all without leaving the conversation.

Features:

• Visual grid editor for painting tiles
• Embedded Unity WebGL player to test levels immediately
• Claude can create and modify levels through natural language
• No external URLs or browser tabs needed

Getting Started

Prerequisites

• Node.js 18+
• An MCP client with Apps support (e.g., Claude Desktop)

Installation

Add this to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "vibe-tide": {
      "command": "npx",
      "args": ["-y", "vibe-tide-mcp-app"]
    }
  }
}

Restart Claude Desktop and you're ready to go.

Usage

Once configured, ask Claude to create a level. Here are some example prompts:

"Create a simple vibe tide level with grass, water, and some rock platforms"

"Can you make an easy vibe tide level (40x25) that features grass and water blocks, 1 enemy with lots of coins"

"Can you make a big vibe tide level 80x25 that features grass, yellow blocks, water, fire and rock blocks with 6 enemies and high spawn chance, with lots of coins"

Available tile types: Empty, Grass, Rock, Yellow, Ice, Fire, Spikes, Water

The level editor will appear in the conversation. Use the tabs to:

• Edit — Click tiles to paint, adjust dimensions and game parameters
• Play — Test your level in the embedded Unity game

Available Tools

| Tool | What it does | |------|--------------| | create_level | Generate a new level from a description | | decode_level_from_url | Import a level from an encoded string | | edit_level_tile | Change a single tile | | edit_level_row | Replace an entire row | | edit_entire_level | Replace the full tile grid | | edit_level_metadata | Update name, description, and gameplay settings | | get_tile_reference | Show the tile type legend |

How It Works

The MCP App runs a local server that:

1. Exposes tools Claude can call to manipulate level data
2. Serves a React-based editor UI that renders in the MCP client
3. Hosts the Unity WebGL build for in-app play-testing

The Unity game loads via a blob URL technique that works within typical MCP client security constraints.

Development

To run from source:

git clone https://github.com/banjtheman/vibe_tide_mcp.git
cd vibe_tide_mcp/vibe_tide_mcp_app
npm install
npm run build

Add to your Claude Desktop config:

{
  "mcpServers": {
    "vibe-tide": {
      "command": "npx",
      "args": ["--silent", "tsx", "/path/to/vibe_tide_mcp_app/server.ts"]
    }
  }
}

For hot-reload during UI development:

npm start

This starts the server on http://localhost:3001/mcp with watch mode. You can test with the basic-host example from the MCP ext-apps repo.

Learn More

• MCP Apps Documentation
• MCP Apps Repository