Quick Start

Quick Start#

Warning

Project Neo is currently in Technical Preview. Features described in this section may change before general availability.

This guide gets your first custom dashboard running in Project Neo in under 10 minutes. Before starting, complete the Prerequisites page.

Step 1: Create a Project#

Run the following command from the directory where you want the project folder created:

nextgen create project

The CLI prompts you for:

Prompt

What to enter

Project name

Confirm or type a name. Accepted characters are letters, digits, hyphens, underscores, and dots.

Squirro API endpoint

Your instance URL, for example https://your-instance.example.com.

Refresh token

The token from your Squirro profile. For more information, see the Prerequisites page.

The CLI only prompts for ports if the defaults (extension: 3001, proxy: 5555) are already in use. On a clean machine you will not see that prompt.

After answering the prompts, the CLI:

  1. Scaffolds a complete project directory.

  2. Installs all dependencies, including @squirro/nextgen-core.

  3. Writes your credentials to .env.

Expected output:

◆  Next steps
│
│  cd my-dashboards
│  nextgen dev          # Start dev server
│  nextgen build        # Build for production
│  nextgen create dashboard
│
└─ Project "my-dashboards" created successfully!

Step 2: Start the Development Server#

cd my-dashboards
nextgen dev

Two servers start in parallel:

┌─────────────────────────────────────────────┐
│  NextGen Dev Server                         │
│                                             │
│  NextGen App                                │
│  NextGen app running with your extensions   │
│  http://localhost:5555/                     │
│                                             │
│  Extension                                  │
│  Dev server serving your extensions         │
│  http://localhost:3001/                     │
│                                             │
│  API proxy                                  │
│  Squirro API requests proxied               │
│  https://your-instance.example.com          │
│                                             │
│  Watching src/ for changes                  │
└─────────────────────────────────────────────┘

Open http://localhost:5555 in your browser. Authentication is handled automatically by the development server and you will land directly in the Project Neo interface.

Note

The sidebar does not yet have any custom entries because the project has no dashboards yet.

Step 3: Add a Dashboard#

Open a second terminal in the project directory and run:

nextgen create dashboard

The CLI prompts you for:

Prompt

Default

Description

Dashboard name

None

Displayed in the sidebar, for example Analytics.

Route path

analytics

URL segment, auto-derived from the dashboard name.

Lucide icon name

layout-dashboard

Icon shown in the sidebar.

Browse available icons at lucide.dev/icons. Use the kebab-case name shown there.

After confirming, the CLI:

  • Creates src/dashboards/Analytics.tsx.

  • Adds the dashboard entry to src/manifest.ts.

  • Updates src/main.tsx for the development server preview route.

Refresh your browser. The dashboard name now appears in the sidebar. Click it to see the placeholder component.

Step 4: Edit the Dashboard Component#

Open src/dashboards/Analytics.tsx. The scaffolded file already contains a working component using Card, CardHeader, and CardContent from the host component library, with Tailwind utility classes applied. Read the file on disk to see the exact starting point. It is the authoritative reference for the scaffold output.

Make any change, update the heading or add content, and save. The browser reloads automatically within a second.

Note

The projectId prop is injected by the host. It contains the active Squirro project ID and is available in every dashboard component.

Next Steps#

Topic

Guide

Understanding the project structure

Project Structure

Full manifest format reference

The Extension Manifest

Using shared libraries and navigation

Building Dashboard Components

UI components, icons, and styling

Styling and Components

Calling the Squirro API

Squirro API

Translations and host text overrides

Translations

Development server details, live reload, and environment variables

Local Development

Building for production

Building and Deploying

All CLI commands

CLI Reference
Contents