@evup/game-cli

v1.0.15

Published

5 months ago

EvUp Game development CLI with AI-powered game creation and deployment tools

0High
0Medium
0Low

tamnt1707

evup game sdk cli vite template scaffold ai mcp deployment development react vue svelte

@evup/game-cli

Official CLI tool for creating EvUp game projects with automatic SDK setup and configuration.

🚀 Features

Quick Setup: Create new game projects in seconds
Framework Support: React, Vue, and Svelte templates
Auto SDK Integration: Latest @evup/game-sdk automatically installed
Vite Plugin: Auto-configuration with environment-based injection
TypeScript Ready: Full TypeScript support out of the box
Development Mode: Smart detection for workspace vs standalone projects
Web Component Build: Convert any framework game to embeddable web component
Cross-Framework Output: Single command builds React/Vue/Svelte to universal web component

📦 Installation

Global Installation (Recommended)

npm install -g @evup/game-cli

One-time Usage

npx @evup/game-cli create my-game

🛠️ Usage

Create a New Game Project

# Interactive mode - CLI will prompt for options
evup create

# Specify project name
evup create my-awesome-game

# Specify template
evup create my-game --template react-ts
evup create my-game --template vue-ts  
evup create my-game --template svelte-ts

# Create in specific directory
evup create my-game --path ./projects/my-game

# Skip package installation
evup create my-game --no-install

CLI Options

| Option | Short | Description | Default | |--------|-------|-------------|---------| | --template <name> | -t | Template to use | Interactive prompt | | --path <path> | -p | Target directory | Current directory | | --no-install | | Skip package installation | false | | --help | -h | Show help | | | --version | -v | Show version | |

Available Templates

| Template | Framework | Description | |----------|-----------|-------------| | react-ts | React 19 | React with TypeScript and Vite | | vue-ts | Vue 3 | Vue with TypeScript and Vite | | svelte-ts | Svelte 5 | Svelte with TypeScript and Vite |

Build Web Components

Build your EvUp game as a standalone web component that can be embedded anywhere:

# Build web component with required parameters
evup build --game-id=my-game-id --api-key=gep_your_api_key

# Build with custom base URL
evup build --game-id=my-game --api-key=gep_xxx --base-url=https://staging.evup.vn

# Build with version and custom output directory
evup build \
  --game-id=my-game \
  --api-key=gep_xxx \
  --version=2.1.0 \
  --output=components

Build Options

| Option | Short | Description | Required | Default | |--------|-------|-------------|----------|---------| | --game-id <id> | -g | EvUp game ID | ✅ | | | --api-key <key> | -k | EvUp API key | ✅ | | | --base-url <url> | -u | EvUp API base URL | | https://evup.vn | | --version <ver> | -v | Game version | | 1.0.0 | | --source <path> | -s | Source directory | | Current directory | | --output <path> | -o | Output directory | | dist-wc |

Output Structure

dist-wc/
├── evup-game.js      # Web component bundle (ES module)
├── evup-game.css     # Styles (if any)
├── assets/           # Static assets with hash names
│   ├── logo-abc123.png
│   └── fonts-def456.woff2
└── example.html      # Usage example

Web Component Usage

<!DOCTYPE html>
<html>
<head>
  <script src="./evup-game.js"></script>
</head>
<body>
  <evup-game 
    game-id="my-game-id" 
    api-key="gep_your_api_key"
    base-url="https://evup.vn">
  </evup-game>
</body>
</html>

Framework Support

The build command automatically detects and supports:

React projects → React-based web component
Vue projects → Vue custom element
Svelte projects → Svelte custom element
Vanilla projects → Native web component

📁 Generated Project Structure

my-game/
├── src/
│   ├── Game.tsx           # Main game component
│   ├── Game.css           # Game styles (React only)
│   └── main.tsx           # Entry point
├── public/                # Static assets
├── index.html            # HTML template
├── vite.config.ts        # Vite configuration with EvUp plugin
├── tsconfig.json         # TypeScript configuration
├── tsconfig.node.json    # Node TypeScript config
├── package.json          # Dependencies and scripts
├── .env.example          # Environment variables template
├── .gitignore           # Git ignore rules
└── README.md            # Project documentation

⚙️ Automatic Configuration

1. SDK Installation

The CLI automatically installs the latest version of @evup/game-sdk:

{
  "dependencies": {
    "@evup/game-sdk": "latest"
  }
}

2. Vite Plugin Setup

Auto-configures the Vite plugin with environment variable support:

// vite.config.ts (auto-generated)
import { defineConfig, loadEnv } from 'vite'
import { vitePlugin as evUpPlugin } from '@evup/game-sdk/vite-plugin'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      evUpPlugin({
        gameId: env.VITE_EVUP_GAME_ID || 'your-game-id',
        apiKey: env.VITE_EVUP_API_KEY || ''
      })
    ]
  }
})

3. Environment Variables

Creates .env.example with EvUp configuration:

# EvUp Game Configuration
VITE_EVUP_API_KEY=your-api-key-here
VITE_EVUP_GAME_ID=your-game-id-here

4. Framework Integration

Each template includes framework-specific components using the SDK:

React Template

import { useEvUpGame } from '@evup/game-sdk/react'

export function Game() {
  const { loading, error, appConfig, viewportConfig, customConfig } = useEvUpGame()
  
  if (loading) return <div>🎮 Loading game...</div>
  if (error) return <div>❌ Error: {error.message}</div>

  return (
    <div className="game-container">
      <h1>🎮 {appConfig?.name}</h1>
      <p>{appConfig?.description}</p>
    </div>
  )
}

Vue Template

<script setup lang="ts">
import { useEvUpGame } from '@evup/game-sdk/vue'

const { loading, error, appConfig, viewportConfig, customConfig } = useEvUpGame()
</script>

<template>
  <div class="game-container">
    <div v-if="loading">🎮 Loading game...</div>
    <div v-else-if="error">❌ Error: {{ error.message }}</div>
    <template v-else>
      <h1>🎮 {{ appConfig?.name }}</h1>
      <p>{{ appConfig?.description }}</p>
    </template>
  </div>
</template>

Svelte Template

<script lang="ts">
  import { createEvUpGameStore } from '@evup/game-sdk/svelte'

  const gameStore = createEvUpGameStore()
  const { loading, error, appConfig, viewportConfig, customConfig } = gameStore
</script>

<div class="game-container">
  {#if $loading}
    <div>🎮 Loading game...</div>
  {:else if $error}
    <div>❌ Error: {$error.message}</div>
  {:else}
    <h1>🎮 {$appConfig?.name}</h1>
    <p>{$appConfig?.description}</p>
  {/if}
</div>

🚦 Getting Started

1. Create Your Project

npx @evup/game-cli create my-game

2. Configure Environment

cd my-game
cp .env.example .env

# Edit .env with your EvUp credentials
VITE_EVUP_API_KEY=gep_your_actual_api_key
VITE_EVUP_GAME_ID=your_game_id

3. Start Development

npm run dev

Your game will be available at http://localhost:5173 with live configuration loading!

🤖 MCP Server - AI Integration

The CLI includes a Model Context Protocol (MCP) server that allows AI assistants (Claude, Cursor) to interact with your EvUp game configurations.

Starting the MCP Server

# Start MCP server
evup mcp

# Start with debug logging
evup mcp --debug

MCP Server Features

The MCP server provides 3 core tools for essential game configuration tasks:

🎮 Core Game Configuration Tools (2 tools)

evup_create_sdk - Create SDK instance
evup_get_full_config - Get complete game configuration (includes app, viewport, and custom data)

🔧 Core Custom Fields Tools (1 tool)

evup_get_custom_config - Get custom fields schema and data

Note: Additional utility functions are available internally for validation, caching, and data manipulation, but are not exposed as separate MCP tools to maintain a clean interface.

AI Assistant Integration

Configure Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "evup-sdk": {
      "command": "npx",
      "args": ["@evup/game-cli", "mcp"],
      "env": {
        "EVUP_BASE_URL": "https://evup.vn",
        "EVUP_API_KEY": "your-api-key-here",
        "EVUP_GAME_ID": "your-game-id-here"
      }
    }
  }
}

Restart Claude Desktop
Start using EvUp tools in your conversations:

"Can you get my game configuration and show me the custom fields?"
"Help me validate this custom field value for my game"
"What are the current viewport dimensions for my game?"

Configure Cursor IDE

Install the MCP extension in Cursor
Configure the EvUp MCP server
AI can now help you code with real-time access to your game config

MCP Server Benefits

✅ Real-time Config Access: AI can fetch your live game configuration
✅ Custom Fields Management: AI understands your custom field schemas
✅ Validation Support: AI can validate configurations and field values
✅ Code Generation: AI generates type-safe code based on your config
✅ Development Assistance: AI helps debug config-related issues

Environment Variables for MCP

# Required for MCP server functionality
EVUP_BASE_URL=https://evup.vn
EVUP_API_KEY=gep_your_api_key
EVUP_GAME_ID=your_game_id

🎯 Development Workflow

Local Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Environment Detection

The CLI automatically detects your environment:

Workspace: Uses workspace:* for SDK dependency (monorepo development)
Standalone: Uses latest for SDK dependency (regular projects)

Hot Configuration Reload

Changes to your EvUp dashboard configuration are automatically reflected in your local development environment without restart.

🔧 Advanced Usage

Custom Template Development

The CLI supports extending templates. Each template includes:

Framework-specific dependencies
Optimized Vite configuration
TypeScript setup
ESLint configuration
Pre-configured SDK integration

Workspace Integration

For monorepo development, the CLI detects workspace environments and:

Uses workspace:* for internal dependencies
Configures appropriate build tools
Maintains compatibility with workspace tooling

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

🆘 Support

📧 Email: [email protected]
🌐 Website: https://evup.vn
📖 Documentation: https://docs.evup.vn
🐛 Issues: GitHub Issues

🔗 Related

@evup/game-sdk - Core SDK for game configuration
EvUp Platform - Game configuration dashboard

Made with ❤️ by the EvUp Team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@evup/game-cli

🚀 Features

📦 Installation

Global Installation (Recommended)

One-time Usage

🛠️ Usage

Create a New Game Project

CLI Options

Available Templates

Build Web Components

Build Options

Output Structure

Web Component Usage

Framework Support

📁 Generated Project Structure

⚙️ Automatic Configuration

1. SDK Installation

2. Vite Plugin Setup

3. Environment Variables

4. Framework Integration

React Template

Vue Template

Svelte Template

🚦 Getting Started

1. Create Your Project

2. Configure Environment

3. Start Development

🤖 MCP Server - AI Integration

Starting the MCP Server

MCP Server Features

🎮 Core Game Configuration Tools (2 tools)

🔧 Core Custom Fields Tools (1 tool)

AI Assistant Integration

Configure Claude Desktop

Configure Cursor IDE

MCP Server Benefits

Environment Variables for MCP

🎯 Development Workflow

Local Development

Environment Detection

Hot Configuration Reload

🔧 Advanced Usage

Custom Template Development

Workspace Integration

🤝 Contributing

📄 License

🆘 Support

🔗 Related