Skip to content

VLCode_Quick_Start_and_Panel_Guide.md

Latest commit

 

History

History
127 lines (76 loc) · 4.38 KB

VLCode_Quick_Start_and_Panel_Guide.md

File metadata and controls

127 lines (76 loc) · 4.38 KB

VLCode Quick Start and Panel Guide

Public snapshot updated on 2026-04-14 for VLCode Lite 1.33.7 and VL 4.1.

This guide is the fastest way to understand what the current VLC runtime looks like, how to launch it locally, and what each major panel is for.

1. Quick Start

Prerequisites

  • Node.js 18+
  • a local VLC checkout
  • a supported login or local model/provider setup for the AI and platform-connected flows in your environment

Start the Local IDE

git clone https://github.com/VisualLogic-AI/VL-Code.git
cd VL-Code
npm install
npm run dev

Open http://127.0.0.1:4000.

2. Public Assets That Match This Runtime

The matching public language and sample assets live here:

Recommended first imports:

  • VL_CourseScheduler_WithCaseJsonMap.zip
  • VL_HabitCheckin_WithCaseJsonMap.zip
  • VL_MediaShelf_WithCaseJsonMap.zip
  • VL_ShoppingList_WithCaseJsonMap.zip
  • VL_VoteMini_WithCaseJsonMap.zip

3. First Five Minutes in VLC

  1. Start the shell and confirm the workspace opens on port 4000.
  2. Import one of the public sample packs from VisualLogic.ai-VL.
  3. Open Code mode to inspect the file tree and source.
  4. Switch to Flow to see workflow orchestration and runtime structure.
  5. Switch to Map to inspect references and project-level metadata.
  6. Open Visual, Logic, and Data to inspect the embedded editor panels.
  7. Use the AI assistant and detail log together when generating or adjusting files.

4. Core Shell Modes

Code

The main editing view for VL source files, with the project tree on the left and the current file open in the center.

Code mode

Flow

The host-native workflow and orchestration view. This is where users can understand execution structure, node relationships, and runtime progress at a glance.

Flow mode

Map

The structural overview mode for apps, sections, services, components, and their relationships.

Map mode

AI Assistant + Detail Log

The AI assistant is the main operator-facing panel, while the detail log carries the verbose workflow and tool trace.

AI assistant and detail log

5. Embedded Editor Panels

These panels run inside the embedded VxEditor layer and are what make VLC feel like both a code IDE and a graphical editor.

Visual Panel

Canvas-style editing for layout, object placement, and immediate structural inspection.

Visual panel

Logic Panel

Visual event and handler inspection for interaction logic and action flow.

Logic panel

Data Panel

Database-oriented inspection for schema, tables, and field settings.

Data panel

Service Logic Panel

Service-side logic inspection for backend behavior and handler wiring.

Service logic panel

Theme Panel

Theme token and styling inspection for visual system tuning.

Theme panel

6. How the Layout Is Organized

VLC currently behaves as a two-layer shell:

  • Host layer: file tree, code editor, map, flow, AI assistant, detail log
  • Embedded layer: visual stage, logic editor, data browser, object tree, properties

That split is intentional. Users can move between source-first work and panel-first work without leaving the same runtime shell.

7. Notes for Public Readers

  • The current public shell starts on port 4000.
  • Compile, preview, and deploy actions require VisualLogic platform access in addition to the local IDE.
  • The 2026-04-14 screenshots in this guide come from the current host shell.
  • Several embedded panel screenshots are taken from the latest stable regression artifacts (2026-04-03) so the public gallery shows fully populated panel states while the headless capture path for bridge-backed views is still being hardened.