Left Sidebar
The left sidebar is your file browser and project navigator. It has three tabs: Pages, Plugins, and Assets.
Main tabs (Pages/Plugins/Assets) with sub-views within each
Pages Tab
The Pages main tab is split into two sections. The top has three sub-views you can toggle between, and the bottom shows the element tree (Layers).
Sub-views (top section)
Pages
All pages and layouts in your app. Click a page to load it in the canvas.
Components
Reusable UI components. Shows components used by the current page and all components in the project.
Logic
API routes, hooks, utilities, contexts, environment variables, and next.config.
Layers (bottom section)
Element Tree
Shows the component hierarchy of the currently selected page. Click elements to select them in the canvas.
Plugins Tab
Manage your project dependencies. View installed packages and their versions.
- View all npm packages in your project
- See current versions
- Dependencies are managed via AI chat or package.json
Assets Tab
Manage images, videos, and other static files in your project.
- Upload new assets
- Browse existing images and files
- Copy asset URLs for use in your app
- Generate images and videos with AI
Tips
- Click a page to view it in the canvas
- Right-click files for additional options
- Create new pages and components via AI chat
- The sidebar auto-refreshes when AI makes changes