Demo Script — VisionLab· Aptech Vision 2026

1

⏱ 0:00 Landing Page Design

Landing Page & Value Prop

Open the app at the home URL. Point out the hero headline "Code. Collaborate. Conquer." — VisionLabis an AI-powered collaborative coding ecosystem built for modern development teams.

Navigate to / (home page) Scroll through features section Point out the "Aptech Vision 2026" competition badge Click Get Started Free to open login

The landing page uses Tailwind CSS dark theme with a custom void background. All animations are pure CSS.

2

⏱ 0:20 Any Role Auth RBAC Security

Role-Based Login (RBAC)

Demonstrate the three user roles. Each role has different access: Admin → Analytics + all features; Instructor → Workspace + student management; Student → Personal workspace only.

Login as Admin (admin@visioncode.ai / Admin@12345) Show redirect → Analytics Dashboard Logout, login as Student (student@visioncode.ai / Student@12345) Show redirect → Workspace (no admin access)

RBAC is enforced by a custom RoleMiddleware + hasRole() on the User model. Roles: admin, instructor, student.

3

⏱ 0:45 Student Role Monaco IDE Code Execution

Monaco Editor IDE

Open the workspace. Show the full-screen Monaco editor with the custom "vc-dark" theme — violet cursor, syntax highlighting for 12 languages, minimap, and bracket pair colorization.

Navigate to /workspace Click different files in the explorer (Python, JS, PHP…) Click the language badge in the status bar to cycle languages Show the AI sidebar on the right Press Ctrl+` to toggle the output terminal

Monaco Editor v0.47.0 loads from CDN. The custom vc-dark theme uses 10 token colours and 15 custom editor colour overrides.

4

⏱ 1:05 Student Role Piston API Multi-language Execution

Code Execution (Piston API)

Type a simple Python script and press Run. Show the output in the terminal panel. Switch to a JavaScript file and run it too — demonstrating multi-language execution.

Type print("Hello, Aptech Vision 2026!") in the Python file Click the green ▶ Run button (or Ctrl+Enter) Show stdout output in the terminal panel Switch to the JS file, run console.log(2 ** 10) Show exit code badge (green = 0)

Piston API executes code in 60+ languages inside sandboxed containers. The Laravel backend proxies the request on POST /api/code/run.

5

⏱ 1:25 Student Role AI Agent CHAT PLAN AGENT Gemini

AI Agent — 3 Modes

Demonstrate all three AI Agent modes. CHAT answers questions read-only. PLAN produces a step-by-step implementation plan. AGENT proposes a diff and applies it to the file.

CHAT mode: Type "explain this code" → show explanation response PLAN mode: Type "add sorting feature" → show numbered plan AGENT mode: Type "add docstrings to all functions" → show diff overlay Click Approve & Apply to write the patch to the editor Show the patched code in Monaco

With GEMINI_API_KEY set, the agent uses Gemini 2.0 Flash. Without a key it uses intelligent demo responses. AGENT mode always shows a diff overlay before applying.

6

⏱ 1:50 Any Role Reverb WebSocket Presence Multi-cursor

Real-Time Collaboration (Reverb)

Click Collaborate in the topbar. Show the presence channel — live member list with avatars, Reverb connection status, and room management. Open two browser tabs to show real-time sync.

Click the Collaborate button in the topbar Show the Reverb connection status (green dot) Open a second tab with the same workspace URL Type in one tab — show code syncing to the other Show the presence avatar bar updating in real time Show remote cursor decoration in Monaco

Laravel Reverb powers WebSocket presence channels. Echo joins workspace.{roomId} with .here/.joining/.leaving. Cursors broadcast every 80ms.

7

⏱ 2:20 Admin Role Admin Analytics ApexCharts

Analytics Dashboard (Admin)

Log in as Admin and open the Analytics Dashboard. Walk through the KPI cards, activity line chart, language donut, heatmap, and recent sessions table.

Login as Admin (admin@visioncode.ai) Show the 4 KPI cards with delta indicators Point out the 14-day activity chart (Executions · AI · Collabs) Show the language distribution donut Show the 7-day × 24-hour heatmap Show the recent sessions table with role badges

ApexCharts v3.50.0 renders 4 charts: area line, donut, two bar charts. The heatmap is pure CSS with dynamic rgba opacity values from PHP.

8

⏱ 2:45 Laravel 11 SQLite Tailwind Vite

Architecture & Stack

Summarise the full tech stack and architecture decisions. Emphasise the competition-grade quality: real-time collaboration, multi-language AI agent, Monaco IDE, and RBAC — all running on a single Replit.

Show the Tech Stack badges panel at the bottom of Analytics Mention: Laravel 11 + SQLite + Blade + Tailwind + Vite Mention: Monaco Editor + Piston API + Gemini 2.0 Flash Mention: Laravel Reverb (WebSockets) + Echo + Pusher JS Say: "All features are live, not mocked — code actually executes."

"The entire platform runs on a single Replit container with zero paid infrastructure beyond the domain — showcasing efficient full-stack engineering."

VisionLab Demo Script