Interface Tour

The VULK editor is where you build, preview, and deploy your apps. Here is a complete walkthrough of every part of the interface.

Editor Layout

The editor has three main panels:

Chat Panel (Left)

This is where you interact with VULK's AI. You can:

• Describe what you want to build in plain language
• Upload images, screenshots, or Figma designs as context
• Attach files to provide reference material
• Use voice input (microphone button) to dictate prompts
• See the generation progress in real-time as files are created

The chat history is preserved — you can scroll up to see previous generations and edits.

Preview Panel (Center)

A live, interactive preview of your running app:

• Responsive controls — Toggle between desktop, tablet, and mobile views
• Reload — Force a fresh reload of the preview
• Open in new tab — Test your app in a full browser window
• URL bar — Shows the preview URL for sharing

The preview runs on a real Vite server. Everything is interactive — buttons, forms, navigation, and API calls all work.

Files Panel (Right)

Browse and edit your project files directly:

• File tree showing your complete project structure
• Click any file to view its contents
• Syntax-highlighted code editor
• Create, rename, or delete files manually

Top Bar

Chat Input Features

The chat input at the bottom of the chat panel includes:

• Text input — Describe what you want in natural language
• File upload — Attach images, screenshots, PDFs, or code files
• Voice input — Click the microphone to dictate your prompt
• Model selector — Choose which AI model to use (plan dependent)

Effective Prompting Tips

• Be specific: "Add a dashboard with a bar chart showing monthly revenue" works better than "Add analytics"
• Reference elements by name: "Change the navbar background to dark"
• Ask for multiple features: "Add user settings page with profile editing, password change, and notification preferences"
• Use "change", "update", or "edit" for modifications to existing code
• Upload a screenshot of a design you want to replicate

Dashboard

Before entering the editor, the dashboard shows:

• My Projects — All your projects with status, last edited date, and preview thumbnails
• Pin projects — Pin frequently used projects to the top
• Search — Find projects by name
• Create new — Start a new project from the dashboard

Settings

Access your account settings from the sidebar. VULK has comprehensive settings organized into sections:

Account & Personal

• Account — Profile, preferences, connected accounts, security, privacy
• Billing — Current plan, credits, transactions, upgrade options
• Notifications — Email preferences by category

Workspace

• General — AI model defaults, code style, framework preferences, theme
• Teams — Team management, member invites, roles
• Domains — Custom domain configuration with DNS setup wizard

Developer

• API Keys — Provider keys (BYOM) and public API keys with permissions
• Integrations — Connected services (GitHub, Figma, etc.) and MCP setup
• Webhooks — HTTP notifications for project events
• Chat Platforms — Connect Telegram and other messaging apps

Build & Deploy

• App Signing — iOS and Android code signing credentials

Security & Enterprise

• Security — Session management, IP whitelist, timeout settings
• SSO — SAML/OIDC configuration (Business plan)
• Audit Log — Full activity log with filtering
• White Label — Custom branding and colors
• Analytics — Project and usage statistics
• SLA — Service level agreement details (Business plan)

Keyboard Shortcuts