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 Bundle#

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

neo-ui create bundle

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 (bundle: 3001, proxy: 5555) are already in use. On a clean machine you do 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
│  neo-ui dev           # Start dev server
│  neo-ui build         # Build for production
│  neo-ui create dashboard
│
└─ Project "my-dashboards" created successfully!

Step 2: Start the Development Server#

cd my-dashboards
neo-ui dev

Two servers start in parallel:

┌─────────────────────────────────────────────┐
│  Neo Dev Server                             │
│                                             │
│  Neo App                                    │
│  Neo app running with your bundles          │
│  http://localhost:5555/                     │
│                                             │
│  Bundle                                     │
│  Dev server serving your bundles            │
│  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. The development server handles authentication automatically, and you 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:

neo-ui 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 Bundle Manifest

Using shared libraries and navigation

Building Dashboard Components

UI components, icons, and styling

Styling and Components

Browsing all components interactively

neo-catalog.squirro.com

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