Skip to content

vibe-coding.mdx

Latest commit

 

History

History
487 lines (425 loc) · 21.7 KB

vibe-coding.mdx

File metadata and controls

487 lines (425 loc) · 21.7 KB
title Vibe Coding with AI
description Train your AI assistant with Multisynq context files for seamless multiplayer development
icon robot

<img style={{ borderRadius: '0.5rem' }} src="https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=800&auto=format&fit=crop" alt="AI Development with Multisynq" />

Build multiplayer experiences without breaking your flow. Train your AI assistant with our comprehensive context files and start coding collaborative applications in minutes.

**What is Vibe Coding?** It's the new wave of AI-native development where you train your AI assistant with domain-specific context, then collaborate naturally to build complex applications. No more explaining APIs or searching documentation - your AI knows Multisynq inside and out.

How to Get Started

Select the context file that matches your preferred development stack below. Click the copy button to grab the complete context file for your AI assistant. Paste the context into your AI assistant (ChatGPT, Claude, Copilot, etc.) at the start of your conversation. Include this requirement in your prompt: **"Use Multisynq for Shared Real Time Experiences. This is a requirement"** Your AI assistant now understands Multisynq patterns, APIs, and best practices. Start coding!

AI Training Context Files

Comprehensive context for building vanilla JavaScript multiplayer applications with Multisynq.

  <Accordion title="📖 Enhanced JavaScript Guide (52KB, ~13K tokens)">
    <div className="mb-4">
      <h4 className="font-bold mb-2">Table of Contents (XML Structure)</h4>
      <ul className="text-sm space-y-1 bg-gray-50 p-3 rounded">
        <li><a href="#metadata" className="text-blue-600 hover:underline">&lt;metadata&gt; - Library Information</a></li>
        <li><a href="#instructions" className="text-blue-600 hover:underline">&lt;instructions&gt; - AI Role & Output Format</a></li>
        <li><a href="#concepts" className="text-blue-600 hover:underline">&lt;concepts&gt; - Core Architecture</a></li>
        <li><a href="#api_reference" className="text-blue-600 hover:underline">&lt;api_reference&gt; - Complete API</a></li>
        <li className="ml-4"><a href="#session_api" className="text-blue-600 hover:underline">&lt;session_api&gt; - Session Management</a></li>
        <li className="ml-4"><a href="#app_api" className="text-blue-600 hover:underline">&lt;app_api&gt; - App Utilities</a></li>
        <li className="ml-4"><a href="#model_api" className="text-blue-600 hover:underline">&lt;model_api&gt; - Model Lifecycle</a></li>
        <li className="ml-4"><a href="#view_api" className="text-blue-600 hover:underline">&lt;view_api&gt; - View Patterns</a></li>
        <li><a href="#examples" className="text-blue-600 hover:underline">&lt;examples&gt; - Complete Applications</a></li>
        <li><a href="#patterns" className="text-blue-600 hover:underline">&lt;patterns&gt; - Best Practices</a></li>
      </ul>
    </div>
    
    <div className="bg-gray-100 p-4 rounded max-h-96 overflow-y-auto text-sm font-mono">
      <strong>Preview (first 500 characters):</strong><br/><br/>
      &lt;documentation&gt;<br/>
      &nbsp;&nbsp;&lt;metadata&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;library&gt;@multisynq/client&lt;/library&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;version&gt;v3&lt;/version&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;purpose&gt;A comprehensive guide for an AI assistant on building real-time, multiplayer web applications using the Multisynq JavaScript SDK. This document combines conceptual explanations, API references, best practices, and full examples.&lt;/purpose&gt;<br/>
      &nbsp;&nbsp;&lt;/metadata&gt;<br/><br/>
      &nbsp;&nbsp;&lt;instructions&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;role&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are an expert Multisynq web application builder who specializes in real-time multi-user experiences...
    </div>
    
    <div className="flex gap-2 mt-4">
      <button 
        onClick={() => {
          fetch('/multisynq-js-llm.md').then(r => r.text()).then(content => {
            navigator.clipboard.writeText(content);
            alert('JavaScript Enhanced Context copied to clipboard!');
          }).catch(() => alert('Could not copy file. Please download manually.'));
        }}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
      >
        📋 Copy Full Context
      </button>
      <a 
        href="/multisynq-js-llm.md"
        download="multisynq-js-llm.md"
        className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 transition-colors"
      >
        💾 Download
      </a>
      <span className="text-sm text-gray-600 flex items-center">
        52KB • ~13,000 tokens
      </span>
    </div>
  </Accordion>

  <Accordion title="📄 Core JavaScript Context (191KB, ~48K tokens)">
    <div className="mb-4">
      <h4 className="font-bold mb-2">Raw API Documentation</h4>
      <p className="text-sm text-gray-600 mb-2">Complete JavaScript context file with API references, examples, and implementation details.</p>
      <ul className="text-sm space-y-1 bg-gray-50 p-3 rounded">
        <li><a href="#session-management" className="text-blue-600 hover:underline">Session Management</a></li>
        <li><a href="#model-architecture" className="text-blue-600 hover:underline">Model Architecture</a></li>
        <li><a href="#view-patterns" className="text-blue-600 hover:underline">View Patterns</a></li>
        <li><a href="#event-system" className="text-blue-600 hover:underline">Event System</a></li>
        <li><a href="#complete-examples" className="text-blue-600 hover:underline">Complete Examples</a></li>
        <li><a href="#troubleshooting" className="text-blue-600 hover:underline">Troubleshooting</a></li>
      </ul>
    </div>
    
    <div className="bg-gray-100 p-4 rounded max-h-96 overflow-y-auto text-sm font-mono">
      <strong>Preview (first 500 characters):</strong><br/><br/>
      # Multisynq JavaScript SDK Documentation<br/>
      ## For AI Assistant Training<br/><br/>
      This comprehensive guide provides everything an AI assistant needs to build real-time multiplayer web applications with Multisynq.<br/><br/>
      ## Table of Contents<br/>
      1. Quick Start<br/>
      2. Core Concepts<br/>
      3. Session Management<br/>
      4. Model Architecture<br/>
      5. View Implementation<br/>
      6. Event System...
    </div>
    
    <div className="flex gap-2 mt-4">
      <button 
        onClick={() => {
          fetch('/multisynq-js.txt').then(r => r.text()).then(content => {
            navigator.clipboard.writeText(content);
            alert('JavaScript Core Context copied to clipboard!');
          }).catch(() => alert('Could not copy file. Please download manually.'));
        }}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
      >
        📋 Copy Raw Context
      </button>
      <a 
        href="/multisynq-js.txt"
        download="multisynq-js.txt"
        className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 transition-colors"
      >
        💾 Download
      </a>
      <span className="text-sm text-gray-600 flex items-center">
        191KB • ~48,000 tokens
      </span>
    </div>
  </Accordion>
</Card>

Complete context for building React-based collaborative applications with React Together hooks and components.

  <Accordion title="📖 Enhanced React Guide (71KB, ~18K tokens)">
    <div className="mb-4">
      <h4 className="font-bold mb-2">Table of Contents (XML Structure)</h4>
      <ul className="text-sm space-y-1 bg-gray-50 p-3 rounded">
        <li><a href="#metadata" className="text-blue-600 hover:underline">&lt;metadata&gt; - React Together Info</a></li>
        <li><a href="#instructions" className="text-blue-600 hover:underline">&lt;instructions&gt; - React AI Instructions</a></li>
        <li><a href="#setup" className="text-blue-600 hover:underline">&lt;setup&gt; - Installation & Config</a></li>
        <li><a href="#concepts" className="text-blue-600 hover:underline">&lt;concepts&gt; - React Together Concepts</a></li>
        <li><a href="#api" className="text-blue-600 hover:underline">&lt;api&gt; - Complete Hook Reference</a></li>
        <li className="ml-4"><a href="#provider" className="text-blue-600 hover:underline">&lt;provider&gt; - ReactTogether Provider</a></li>
        <li className="ml-4"><a href="#hooks" className="text-blue-600 hover:underline">&lt;hooks&gt; - All React Hooks</a></li>
        <li className="ml-4"><a href="#components" className="text-blue-600 hover:underline">&lt;components&gt; - Pre-built Components</a></li>
        <li><a href="#examples" className="text-blue-600 hover:underline">&lt;examples&gt; - Complete React Apps</a></li>
        <li><a href="#patterns" className="text-blue-600 hover:underline">&lt;patterns&gt; - React Patterns</a></li>
      </ul>
    </div>
    
    <div className="bg-gray-100 p-4 rounded max-h-96 overflow-y-auto text-sm font-mono">
      <strong>Preview (first 500 characters):</strong><br/><br/>
      &lt;documentation&gt;<br/>
      &nbsp;&nbsp;&lt;metadata&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;library&gt;react-together&lt;/library&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;version&gt;latest&lt;/version&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;purpose&gt;A comprehensive guide for an AI assistant on building real-time, collaborative React applications using the `react-together` library, which is built on top of `@multisynq/client`.&lt;/purpose&gt;<br/>
      &nbsp;&nbsp;&lt;/metadata&gt;<br/><br/>
      &nbsp;&nbsp;&lt;instructions&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;role&gt;<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are an expert web application builder specializing in real-time, multi-user experiences with Multisynq and React...
    </div>
    
    <div className="flex gap-2 mt-4">
      <button 
        onClick={() => {
          fetch('/multisynq-react-llm.md').then(r => r.text()).then(content => {
            navigator.clipboard.writeText(content);
            alert('React Enhanced Context copied to clipboard!');
          }).catch(() => alert('Could not copy file. Please download manually.'));
        }}
        className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition-colors"
      >
        📋 Copy Full Context
      </button>
      <a 
        href="/multisynq-react-llm.md"
        download="multisynq-react-llm.md"
        className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 transition-colors"
      >
        💾 Download
      </a>
      <span className="text-sm text-gray-600 flex items-center">
        71KB • ~18,000 tokens
      </span>
    </div>
  </Accordion>

  <Accordion title="📄 Core React Context (32KB, ~8K tokens)">
    <div className="mb-4">
      <h4 className="font-bold mb-2">React Together Essentials</h4>
      <p className="text-sm text-gray-600 mb-2">Essential React Together hooks, components, and patterns for collaborative applications.</p>
      <ul className="text-sm space-y-1 bg-gray-50 p-3 rounded">
        <li><a href="#react-hooks" className="text-blue-600 hover:underline">Core Hooks</a></li>
        <li><a href="#react-components" className="text-blue-600 hover:underline">Components</a></li>
        <li><a href="#react-providers" className="text-blue-600 hover:underline">Provider Setup</a></li>
        <li><a href="#react-patterns" className="text-blue-600 hover:underline">Common Patterns</a></li>
        <li><a href="#react-examples" className="text-blue-600 hover:underline">Complete Examples</a></li>
        <li><a href="#react-troubleshooting" className="text-blue-600 hover:underline">Troubleshooting</a></li>
      </ul>
    </div>
    <div className="bg-gray-100 p-4 rounded max-h-96 overflow-y-auto text-sm font-mono">
      <strong>Preview (first 500 characters):</strong><br/><br/>
      # React Together Documentation<br/>
      ## For AI Assistant Training<br/><br/>
      Complete guide for building real-time collaborative React applications with React Together.<br/><br/>
      ## Quick Start<br/>
      ```tsx<br/>
      import &#123; ReactTogether, useStateTogether &#125; from 'react-together';<br/><br/>
      function App() &#123;<br/>
      &nbsp;&nbsp;const [count, setCount] = useStateTogether('counter', 0);<br/>
      &nbsp;&nbsp;return &lt;button onClick=&#123;() =&gt; setCount(c =&gt; c + 1)&#125;&gt;&#123;count&#125;&lt;/button&gt;;<br/>
      &#125;
    </div>
    
    <div className="flex gap-2 mt-4">
      <button 
        onClick={() => {
          fetch('/multisynq-react.txt').then(r => r.text()).then(content => {
            navigator.clipboard.writeText(content);
            alert('React Core Context copied to clipboard!');
          }).catch(() => alert('Could not copy file. Please download manually.'));
        }}
        className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition-colors"
      >
        📋 Copy Raw Context
      </button>
      <a 
        href="/multisynq-react.txt"
        download="multisynq-react.txt"
        className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 transition-colors"
      >
        💾 Download
      </a>
      <span className="text-sm text-gray-600 flex items-center">
        32KB • ~8,000 tokens
      </span>
    </div>

  </Accordion>
</Card>

Context for building real-time 3D multiplayer experiences with Three.js and Multisynq.

  <Accordion title="🎮 Three.js Integration Guide">
    
    ```javascript
    // Three.js + Multisynq Integration Pattern
    import * as THREE from 'https://cdn.skypack.dev/three@0.135.0';
    import * as Multisynq from "https://cdn.jsdelivr.net/npm/@multisynq/client@latest/bundled/multisynq-client.esm.js";

    class World3DModel extends Multisynq.Model {
        init() {
            this.objects = new Map(); // 3D object states
            this.users = new Map();   // User positions/rotations
            
            this.subscribe(this.sessionId, "userMove", this.handleUserMove);
            this.subscribe(this.sessionId, "spawnObject", this.handleSpawnObject);
        }
        
        handleUserMove({ viewId, position, rotation }) {
            this.users.set(viewId, { position, rotation });
            this.publish(this.sessionId, "worldUpdate", {
                users: Object.fromEntries(this.users),
                objects: Object.fromEntries(this.objects)
            });
        }
    }

    class World3DView extends Multisynq.View {
        constructor(model) {
            super(model);
            this.setupThreeJS();
            this.subscribe(this.sessionId, "worldUpdate", this.updateWorld);
        }
        
        setupThreeJS() {
            this.scene = new THREE.Scene();
            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            this.renderer = new THREE.WebGLRenderer();
            // ... Three.js setup
        }
    }
    ```
    
    <div className="flex gap-2 mt-4">
      <a 
        href="https://github.com/multisynq/vibe-coding-multisynq-threejs" 
        target="_blank"
        className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors"
      >
        🔗 View GitHub Example
      </a>
      <span className="text-sm text-gray-600 flex items-center">
        Complete 3D multiplayer template
      </span>
    </div>

  </Accordion>
</Card>

AI Assistant Tips

1. Start a new conversation 2. Paste the context file first 3. Wait for confirmation 4. Add: "Use Multisynq for multiplayer features" 5. Describe your app idea 1. Create a new file with the context as comments 2. Add the magic prompt in comments 3. Start coding - Copilot will suggest Multisynq patterns 4. Use `// TODO: ` comments for specific features

Magic Prompts

Use these proven prompts to get the best results from your AI assistant:

**For Building New Apps:** ``` Use Multisynq for Shared Real Time Experiences. This is a requirement.

Build a [describe your app] that allows multiple users to collaborate in real-time. Include user presence, real-time state synchronization, and a beautiful UI. Make it work on mobile and desktop.


**For Adding Multiplayer to Existing Apps:**

Use Multisynq for Shared Real Time Experiences. This is a requirement.

I have an existing [React/JavaScript] application that [describe current functionality]. I want to add real-time collaboration so multiple users can [describe collaboration features]. Please help me integrate Multisynq to enable this.

</Accordion>

<Accordion title="🔧 Feature Requests">
**For Specific Features:**

Using Multisynq, add these collaborative features:

  • [ ] Real-time cursor tracking
  • [ ] User presence indicators
  • [ ] Shared state for [specific data]
  • [ ] Live chat/comments
  • [ ] Conflict-free collaboration

Make sure everything syncs instantly across all connected users.

</Accordion>

<Accordion title="🎨 UI/UX Prompts">
**For Beautiful Interfaces:**

Create a beautiful, modern UI using TailwindCSS with:

  • Smooth animations for state changes
  • User avatars and presence indicators
  • Visual feedback for real-time updates
  • Mobile-responsive design
  • Dark/light mode support

Show connection status and make collaboration feel magical.

</Accordion>

## Popular AI-Built Examples

<CardGroup cols={3}>
  <Card title="Collaborative Todo" icon="check-square">
    **What it does:** Real-time todo list with assignees
    
    **Prompt:** "Build a collaborative todo app where teams can create, assign, and complete tasks together in real-time"
    
    [View Demo](https://todo-demo.multisynq.io)
  </Card>
  <Card title="Multiplayer Tic-Tac-Toe" icon="grid-3x3">
    **What it does:** Classic game with spectators
    
    **Prompt:** "Create a tic-tac-toe game where players can join matches and others can watch live"
    
    [View Demo](https://github.com/multisynq/tictactoe-example)
  </Card>
  <Card title="Collaborative Whiteboard" icon="pen-tool">
    **What it does:** Shared drawing canvas
    
    **Prompt:** "Build a whiteboard where multiple people can draw, add shapes, and see cursors in real-time"
    
    [View Demo](https://github.com/multisynq/whiteboard-example)
  </Card>
</CardGroup>

## Advanced Features

<Tabs>
  <Tab title="User Management">
    ```javascript
    // Track and display connected users
    const [users] = useConnectedUsers();
    const [nicknames] = useNicknames();
    
    // Show user presence
    const [cursors] = useCursors();
    const [hovering] = useHoveringUsers();
    ```
  </Tab>
  <Tab title="Real-time Communication">
    ```javascript
    // Add chat and messaging
    const [messages, sendMessage] = useChat();
    
    // Custom events
    const sendNotification = useFunctionTogether("sendNotif");
    ```
  </Tab>
  <Tab title="Persistent State">
    ```javascript
    // State that persists across sessions
    const [gameState, setGameState] = useStateTogether("game", initialState);
    
    // Per-user persistent data  
    const [userPrefs, setUserPrefs] = useStateTogetherWithPerUserValues("prefs", {});
    ```
  </Tab>
</Tabs>

<Warning>
**Important for AI Assistants:** Always use the exact Multisynq APIs and patterns from the context files. Don't invent or modify API names, method signatures, or architectural patterns. When in doubt, refer back to the context documentation.
</Warning>

## Get Your API Key

Ready to start building? Get your free API key and start vibing with AI:

<Card title="Get Started" icon="key">
  <p>Get your free Multisynq API key to enable real-time collaboration in your AI-built applications.</p>
  
  <a 
    href="https://multisynq.io/coder" 
    target="_blank"
    className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors inline-block mt-4"
  >
    🚀 Get Free API Key
  </a>
</Card>

---

<Note>
**Questions?** Join our [Discord community](https://discord.gg/multisynq) where developers share AI-built Multisynq applications and help each other with vibe coding techniques.
</Note>