@nitrostack/cli 1.0.6 → 1.0.7

package/dist/ui/branding.js

@@ -1,59 +1,112 @@
 import chalk from 'chalk';
 import ora from 'ora';
 // ═══════════════════════════════════════════════════════════════════════════
-// NITROSTACK CLI BRANDING
+// OFFICIAL MCP BRANDING (Wekan Enterprise Solutions)
 // ═══════════════════════════════════════════════════════════════════════════
-const ACCENT = '#FF6B35';
-const ACCENT_LIGHT = '#FF8C42';
-const ACCENT_LIGHTER = '#FFA94D';
+// Core Colors
+const SIGNAL_BLUE = '#187CF4'; // Primary
+const SKY_BLUE = '#05A3FD'; // Secondary
+const SUCCESS_MINT = '#2AB5A5'; // Success
+const ERROR_FLAME = '#EF4444'; // Error
+const WARNING_AMBER = '#F59E0B'; // Warning
+const SLATE_INK = '#121217'; // Text Primary (Light Mode Context)
+// Official Links
+export const LINKS = {
+    website: 'https://nitrostack.ai',
+    docs: 'https://docs.nitrostack.ai',
+    studio: 'https://nitrostack.ai/studio',
+};
 export const brand = {
-    accent: chalk.hex(ACCENT),
-    accentBold: chalk.hex(ACCENT).bold,
-    accentLight: chalk.hex(ACCENT_LIGHT),
-    accentLighter: chalk.hex(ACCENT_LIGHTER),
+    signal: chalk.hex(SIGNAL_BLUE),
+    signalBold: chalk.hex(SIGNAL_BLUE).bold,
+    sky: chalk.hex(SKY_BLUE),
+    skyBold: chalk.hex(SKY_BLUE).bold,
+    mint: chalk.hex(SUCCESS_MINT),
+    mintBold: chalk.hex(SUCCESS_MINT).bold,
+    error: chalk.hex(ERROR_FLAME),
+    warning: chalk.hex(WARNING_AMBER),
 };
+const TOTAL_WIDTH = 68;
+/**
+ * Strips ANSI codes for visual length calculation
+ */
+const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, '');
+/**
+ * Creates a clickable terminal link using OSC 8 escape sequence
+ */
+export function terminalLink(text, url) {
+    // OSC 8 escape sequence: \x1b]8;;url\x1b\\text\x1b]8;;\x1b\\
+    return `\u001b]8;;${url}\u001b\\${text}\u001b]8;;\u001b\\`;
+}
+/**
+ * Creates a line for a box with consistent width and borders
+ */
+function boxLine(content, borderColor = brand.signalBold) {
+    const visualLength = stripAnsi(content).length;
+    const paddingSize = Math.max(0, TOTAL_WIDTH - visualLength - 2);
+    const padding = ' '.repeat(paddingSize);
+    return borderColor('║') + content + padding + borderColor('║');
+}
+/**
+ * Redesigned Banner with Restored ASCII NITRO
+ */
 export const NITRO_BANNER_FULL = `
-${brand.accentBold('╔══════════════════════════════════════════════════════════════════╗')}
-${brand.accentBold('║')}                                                                  ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${brand.accentBold('███╗   ██╗██╗████████╗██████╗  ██████╗ ')}                       ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${brand.accentLight('████╗  ██║██║╚══██╔══╝██╔══██╗██╔═══██╗')}                       ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${brand.accentLighter('██╔██╗ ██║██║   ██║   ██████╔╝██║   ██║')}                       ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${chalk.hex('#FFCC80')('██║╚██╗██║██║   ██║   ██╔══██╗██║   ██║')}                       ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${chalk.hex('#FFE0B2')('██║ ╚████║██║   ██║   ██║  ██║╚██████╔╝')}                       ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${chalk.dim('╚═╝  ╚═══╝╚═╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ')}                       ${brand.accentBold('║')}
-${brand.accentBold('║')}                                                                  ${brand.accentBold('║')}
-${brand.accentBold('║')}   ${chalk.white.bold('S T A C K')}   ${chalk.dim('─────────────────────────────────────────')}   ${brand.accentBold('║')}
-${brand.accentBold('║')}                                                                  ${brand.accentBold('║')}
-${brand.accentBold('╚══════════════════════════════════════════════════════════════════╝')}
+${brand.signalBold('╔' + '═'.repeat(TOTAL_WIDTH - 2) + '╗')}
+${boxLine('')}
+${boxLine('   ' + brand.signalBold('███╗   ██╗██╗████████╗██████╗  ██████╗ '))}
+${boxLine('   ' + brand.signalBold('████╗  ██║██║╚══██╔══╝██╔══██╗██╔═══██╗'))}
+${boxLine('   ' + brand.signalBold('██╔██╗ ██║██║   ██║   ██████╔╝██║   ██║'))}
+${boxLine('   ' + brand.skyBold('██║╚██╗██║██║   ██║   ██╔══██╗██║   ██║'))}
+${boxLine('   ' + brand.skyBold('██║ ╚████║██║   ██║   ██║  ██║╚██████╔╝'))}
+${boxLine('   ' + chalk.dim('╚═╝  ╚═══╝╚═╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ '))}
+${boxLine('')}
+${boxLine('   ' + brand.signalBold('NITROSTACK') + '  ' + chalk.dim('─ Official MCP Framework'))}
+${boxLine('')}
+${brand.signalBold('╚' + '═'.repeat(TOTAL_WIDTH - 2) + '╝')}
 `;
 export function createHeader(title, subtitle) {
-    const paddedTitle = title.padEnd(40);
-    const paddedSubtitle = (subtitle || '').padEnd(40);
-    return `
-${brand.accentBold('┌──────────────────────────────────────────────────────────────────┐')}
-${brand.accentBold('│')}  ${brand.accentBold('NITRO')}${chalk.white.bold('STACK')} ${chalk.dim('━━')} ${chalk.white.bold(paddedTitle)}  ${brand.accentBold('│')}
-${subtitle ? brand.accentBold('│') + '  ' + chalk.dim(paddedSubtitle) + '                        ' + brand.accentBold('│') + '\n' : ''}${brand.accentBold('└──────────────────────────────────────────────────────────────────┘')}
-`;
+    const content = '  ' + brand.signalBold('NITROSTACK') + ' ' + chalk.dim('─') + ' ' + chalk.white.bold(title);
+    const subContent = subtitle ? '  ' + chalk.dim(subtitle) : '';
+    const borderTop = brand.signalBold('┌' + '─'.repeat(TOTAL_WIDTH - 2) + '┐');
+    const borderBottom = brand.signalBold('└' + '─'.repeat(TOTAL_WIDTH - 2) + '┘');
+    const line = (c) => {
+        const visualLength = stripAnsi(c).length;
+        const paddingSize = Math.max(0, TOTAL_WIDTH - visualLength - 2);
+        const padding = ' '.repeat(paddingSize);
+        return brand.signalBold('│') + c + padding + brand.signalBold('│');
+    };
+    let header = `\n${borderTop}\n${line(content)}\n`;
+    if (subtitle) {
+        header += `${line(subContent)}\n`;
+    }
+    header += `${borderBottom}\n`;
+    return header;
 }
 export function createBox(lines, type = 'info') {
     const colors = {
-        success: { border: chalk.green, title: chalk.green.bold },
-        error: { border: chalk.red, title: chalk.red.bold },
-        info: { border: brand.accent, title: brand.accentBold },
-        warning: { border: chalk.yellow, title: chalk.yellow.bold },
+        success: { border: brand.mint, bTop: '┌', bSide: '│', bBot: '└' },
+        error: { border: brand.error, bTop: '┌', bSide: '│', bBot: '└' },
+        info: { border: brand.signal, bTop: '┌', bSide: '│', bBot: '└' },
+        warning: { border: brand.warning, bTop: '┌', bSide: '│', bBot: '└' },
     };
-    const { border } = colors[type];
-    let output = border('┌──────────────────────────────────────────────────────────────────┐\n');
-    for (const line of lines) {
-        const paddedLine = line.padEnd(64);
-        output += border('│') + '  ' + paddedLine + '  ' + border('│') + '\n';
+    const { border, bTop, bSide, bBot } = colors[type];
+    let output = border(bTop + '─'.repeat(TOTAL_WIDTH - 2) + '┐\n');
+    for (let line of lines) {
+        const maxInnerWidth = TOTAL_WIDTH - 6;
+        const visualLength = stripAnsi(line).length;
+        if (visualLength > maxInnerWidth) {
+            line = line.substring(0, maxInnerWidth - 3) + '...';
+        }
+        const finalVisualLength = stripAnsi(line).length;
+        const padding = ' '.repeat(Math.max(0, TOTAL_WIDTH - finalVisualLength - 6));
+        output += border(bSide) + '  ' + line + padding + '  ' + border(bSide) + '\n';
     }
-    output += border('└──────────────────────────────────────────────────────────────────┘');
+    output += border(bBot + '─'.repeat(TOTAL_WIDTH - 2) + '┘');
     return output;
 }
 export function createSuccessBox(title, items) {
     const lines = [
-        chalk.green.bold(`✓ ${title}`),
+        brand.mintBold(`✓ ${title}`),
         '',
         ...items.map(item => chalk.dim(`  ${item}`)),
         '',
@@ -62,15 +115,15 @@ export function createSuccessBox(title, items) {
 }
 export function createErrorBox(title, message) {
     const lines = [
-        chalk.red.bold(`✗ ${title}`),
+        brand.error.bold(`✗ ${title}`),
         '',
-        chalk.white(message.substring(0, 60)),
+        chalk.white(message.substring(0, TOTAL_WIDTH - 10)),
         '',
     ];
     return createBox(lines, 'error');
 }
 export function createInfoBox(items) {
-    const lines = items.map(({ label, value }) => `${chalk.white.bold(label.padEnd(14))} ${chalk.cyan(value)}`);
+    const lines = items.map(({ label, value }) => `${chalk.white.bold(label.padEnd(14))} ${brand.sky(value)}`);
     return createBox(['', ...lines, ''], 'info');
 }
 export class NitroSpinner {
@@ -78,7 +131,7 @@ export class NitroSpinner {
     constructor(text) {
         this.spinner = ora({
             text: chalk.dim(text),
-            color: 'yellow',
+            color: 'blue',
             spinner: 'dots12',
         });
     }
@@ -91,19 +144,19 @@ export class NitroSpinner {
         return this;
     }
     succeed(text) {
-        this.spinner.succeed(text ? chalk.green('✓ ') + chalk.dim(text) : undefined);
+        this.spinner.succeed(text ? brand.mint('✓ ') + chalk.dim(text) : undefined);
         return this;
     }
     fail(text) {
-        this.spinner.fail(text ? chalk.red('✗ ') + chalk.dim(text) : undefined);
+        this.spinner.fail(text ? brand.error('✗ ') + chalk.dim(text) : undefined);
         return this;
     }
     info(text) {
-        this.spinner.info(text ? chalk.blue('ℹ ') + chalk.dim(text) : undefined);
+        this.spinner.info(text ? brand.signal('ℹ ') + chalk.dim(text) : undefined);
         return this;
     }
     warn(text) {
-        this.spinner.warn(text ? chalk.yellow('⚠ ') + chalk.dim(text) : undefined);
+        this.spinner.warn(text ? brand.warning('⚠ ') + chalk.dim(text) : undefined);
         return this;
     }
     stop() {
@@ -113,16 +166,16 @@ export class NitroSpinner {
 }
 export function log(message, type = 'info') {
     const icons = {
-        success: chalk.green('✓'),
-        error: chalk.red('✗'),
-        info: chalk.blue('ℹ'),
-        warning: chalk.yellow('⚠'),
+        success: brand.mint('✓'),
+        error: brand.error('✗'),
+        info: brand.signal('ℹ'),
+        warning: brand.warning('⚠'),
         dim: chalk.dim('·'),
     };
     console.log(`  ${icons[type]} ${type === 'dim' ? chalk.dim(message) : message}`);
 }
 export function divider() {
-    console.log(chalk.dim('  ─────────────────────────────────────────────────────────────'));
+    console.log(chalk.dim('  ' + '─'.repeat(TOTAL_WIDTH - 4)));
 }
 export function spacer() {
     console.log('');
@@ -130,7 +183,23 @@ export function spacer() {
 export function nextSteps(steps) {
     console.log(chalk.white.bold('\n  Next steps:\n'));
     steps.forEach((step, i) => {
-        console.log(chalk.dim(`  ${i + 1}.`) + ' ' + chalk.cyan(step));
+        console.log(chalk.dim(`  ${i + 1}.`) + ' ' + brand.sky(step));
     });
+    // Always promote NitroStudio
+    const studioStep = steps.length + 1;
+    const studioText = brand.signalBold('Download NitroStudio');
+    const urlText = brand.sky(LINKS.studio);
+    const clickableUrl = terminalLink(urlText, LINKS.studio);
+    console.log(chalk.dim(`  ${studioStep}.`) + ' ' + studioText + ' ' + chalk.dim('(') + clickableUrl + chalk.dim(')') + ' ' + chalk.dim('to run your MCP project with a visual client'));
     console.log('');
 }
+export function showFooter() {
+    const website = terminalLink(brand.signal(LINKS.website), LINKS.website);
+    const docs = terminalLink(brand.signal(LINKS.docs), LINKS.docs);
+    const studio = terminalLink(brand.signal(LINKS.studio), LINKS.studio);
+    const content = `${chalk.dim('Website:')} ${website}   ${chalk.dim('Docs:')} ${docs}   ${chalk.dim('Studio:')} ${studio}`;
+    // Center the footer content
+    const visualLength = stripAnsi(content).length;
+    const padding = ' '.repeat(Math.max(0, Math.floor((TOTAL_WIDTH - visualLength) / 2)));
+    console.log('\n' + padding + content + '\n');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitrostack/cli",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "CLI for NitroStack - Create and manage MCP server projects",
   "type": "module",
   "main": "dist/index.js",
@@ -36,7 +36,7 @@
     "scaffold",
     "generator"
   ],
-  "author": "Abhishek Pandit <abhishekpanditofficial@gmail.com>",
+  "author": "Nitrostack Inc <hello@nitrostack.ai>",
   "license": "Apache-2.0",
   "dependencies": {
     "chalk": "^5.3.0",
@@ -59,12 +59,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/abhishekpanditofficial/nitrostack.git",
+    "url": "https://github.com/nitrocloudofficial/nitrostack.git",
     "directory": "typescript/packages/cli"
   },
   "bugs": {
-    "url": "https://github.com/abhishekpanditofficial/nitrostack/issues"
+    "url": "https://github.com/nitrocloudofficial/nitrostack/issues"
   },
   "homepage": "https://nitrostack.ai"
-}
-
+}

package/templates/typescript-oauth/.env.example

@@ -0,0 +1,27 @@
+# OAuth 2.1 MCP Server Configuration
+# =============================================================================
+# TRANSPORT MODE (AUTO-CONFIGURED)
+# =============================================================================
+# When OAuth is configured, the server automatically runs in DUAL mode:
+# - STDIO: For MCP proto¯col communication with Studio/Claude
+# - HTTP: For OAuth metadata endpoints (/.well-known/oauth-protected-resource)
+# Both transports run simultaneously on different channels.
+# =============================================================================
+# REQUIRED: Server Configuration
+# =============================================================================
+# =============================================================================
+# Auth0 Configuration
+# =============================================================================
+# After creating your API and Application in Auth0, fill in these values:
+# Your Auth0 API Identifier (from APIs → MCP Server → Identifier)
+# This MUST match exactly what you set when creating the API
+# This MUST match exactly what you set when creating the API
+RESOURCE_URI=https://mcplocal
+# Your Auth0 tenant domain (authorization server)
+AUTH_SERVER_URL=https://dev-5dt0utuk315713tjm.us.auth0.com
+# Expected token audience (should match RESOURCE_URI)
+TOKEN_AUDIENCE=https://mcplocal
+# Expected token issuer (your Auth0 tenant domain with trailing slash)
+TOKEN_ISSUER=https://dev-5dt0utuk315713tjm.us.auth0.com
+
+DUFFEL_API_KEY=duffel_test_-w0wGDHB0M3DU9k-sBeUbxLqwcibUQqfEbjWDTKNnly

package/templates/typescript-oauth/README.md

@@ -1,263 +1,68 @@
 # ✈️ NitroStack Flight Booking
 
-A production-ready NitroStack template showcasing real-time flight search and booking with **Duffel API** integration. Search flights, view details, select seats, and book - all through beautiful interactive widgets.
+A production-ready template showcasing real-time flight search and booking with **Duffel API** integration. Learn how to build complex, authenticated MCP servers with high-impact visual widgets.
 
 ## ✨ Features
 
-### 🔌 **Duffel API Integration**
-- Real-time flight search across 300+ airlines
-- Live pricing and availability
-- Seat selection with cabin maps
-- Booking and order management
+- **Real-time Search** — Powered by the Duffel API (300+ airlines).
+- **Seat Selection** — Interactive visual cabin maps with seat pickers.
+- **Secure Payments** — Simulated secure booking and confirmation flows.
+- **Advanced Auth** — Optional OAuth 2.1 support for protected MCP servers.
 
-### 🎨 **Interactive Widgets**
-- **Airport Search** - Autocomplete airport selection
-- **Flight Search Results** - Compare flights with prices
-- **Flight Details** - Comprehensive flight information
-- **Seat Selection** - Visual cabin map with seat picker
-- **Order Summary** - Complete booking overview
-- **Payment Confirmation** - Secure payment flow
-
-### 🛠️ **MCP Tools**
-- `search_airports` - Find airports by name/code
-- `search_flights` - Search available flights
-- `show_flight_details` - Detailed flight information
-- `select_seats` - Interactive seat selection
-- `create_booking` - Book flights
-- `get_order` - Retrieve booking details
+---
 
 ## 🚀 Quick Start
 
-### Prerequisites
-
-```bash
-# Install NitroStack CLI globally
-npm install -g nitrostack
-
-# Or use npx
-npx nitrostack --version
-```
-
-### 1. Create Your Project
+### 1. Initialize Your Project
 
 ```bash
-# Create a new project
-nitrostack init my-flight-app --template typescript-oauth
+npx nitrostack init my-flight-app --template typescript-oauth
 cd my-flight-app
-
-# Install all dependencies (root + widgets)
-nitrostack install
 ```
 
-### 2. Get Your Duffel API Key (Free)
-
-[Duffel](https://duffel.com/) provides a free API for flight search and booking:
-
-1. **Sign up** at [duffel.com](https://duffel.com/) (click "Start now" - it's free!)
-2. Create a free account (no credit card required)
-3. Go to your **Dashboard** → **Developers** → **Access tokens**
-4. Click **"Create token"** to generate your API key
-5. Copy the token (starts with `duffel_test_` for sandbox)
-
-> 💡 **Tip**: The test mode (`duffel_test_*` tokens) gives you access to realistic mock data for development. Production tokens (`duffel_live_*`) connect to real airlines.
-
-### 3. Configure Environment
-
-Copy the example environment file and add your Duffel API key:
+### 2. Install Dependencies
 
 ```bash
-cp .env.example .env
+npm run install:all
 ```
 
-Edit `.env` and update:
-
-```env
-# Duffel API Configuration
-DUFFEL_API_KEY=duffel_test_your_api_key_here
-```
-
-### 4. Run Development Server
-
-```bash
-npm run dev
-```
-
-This starts:
-- **MCP Server** - Hot reloads on code changes
-- **Studio** on http://localhost:3000 - Visual testing environment  
-- **Widget Dev Server** on http://localhost:3001 - Hot module replacement
-
-### 5. Test in Studio
-
-Try these prompts in Studio chat:
-- "Search flights from London to New York for next week"
-- "Show me flight details"
-- "I want to select seats"
-- "Show me flights from JFK to LAX"
-
-## 📁 Project Structure
-
-```
-typescript-oauth/
-├── src/
-│   ├── index.ts                 # Main server entry
-│   ├── app.module.ts            # App module
-│   ├── services/
-│   │   └── duffel.service.ts    # Duffel API client
-│   └── modules/
-│       └── flights/
-│           ├── flights.module.ts    # Module definition
-│           ├── flights.tools.ts     # Search & display tools
-│           ├── flights.prompts.ts   # AI prompts
-│           ├── flights.resources.ts # Static resources
-│           └── booking.tools.ts     # Booking tools
-│   └── widgets/
-│       ├── app/
-│       │   ├── airport-search/      # Airport autocomplete
-│       │   ├── flight-search-results/ # Results list
-│       │   ├── flight-details/      # Flight info
-│       │   ├── seat-selection/      # Seat picker
-│       │   ├── order-summary/       # Booking summary
-│       │   └── payment-confirmation/ # Payment widget
-├── .env.example                 # Environment template
-├── OAUTH_SETUP.md              # OAuth configuration guide
-├── package.json
-└── README.md
-```
-
-## 🔧 Commands
-
-```bash
-# Installation
-npm install              # Install all dependencies (root + widgets)
-nitrostack install       # Same as above
+### 3. Get NitroStudio
 
-# Development
-npm run dev              # Start dev server with Studio
-npm run build            # Build TypeScript and widgets for production
-npm start                # Run production server
+Experience the visual seat selection and flight search as your users would see it.
 
-# Upgrade
-npm run upgrade          # Upgrade nitrostack to latest version
+1. **Download NitroStudio**: [nitrostack.ai/studio](https://nitrostack.ai/studio)
+2. **Open Project**: Launch NitroStudio and select your project folder.
 
-# Widget Management
-npm run widget <command> # Run npm command in widgets directory
-npm run widget add <pkg> # Add a widget dependency
-```
-
-## 🔐 OAuth Setup (Optional)
-
-This template includes OAuth 2.1 authentication support. If you want to protect your MCP server with authentication:
-
-1. Read the detailed guide: **[OAUTH_SETUP.md](./OAUTH_SETUP.md)**
-2. Configure Auth0 (or your OAuth provider)
-3. Update your `.env` with OAuth credentials
-
-> **Note**: OAuth is optional for local development. The template works without it using Duffel's test API.
-
-## 📊 Duffel API Features
-
-### Test Mode vs Live Mode
-
-| Feature | Test Mode (`duffel_test_*`) | Live Mode (`duffel_live_*`) |
-|---------|----------------------------|----------------------------|
-| API Access | ✅ Full access | ✅ Full access |
-| Pricing | Mock data | Real prices |
-| Bookings | Simulated | Real bookings |
-| Credit Card | Not charged | Charged |
-| Rate Limits | Generous | Production limits |
-
-### Supported Airlines
-
-Duffel provides access to 300+ airlines including:
-- Major carriers (British Airways, Lufthansa, Emirates, etc.)
-- Low-cost carriers (Ryanair, EasyJet, Spirit, etc.)
-- Regional airlines
-
-### API Capabilities
-
-- **Search**: Real-time availability and pricing
-- **Ancillaries**: Seats, bags, meals
-- **Booking**: Create and manage orders
-- **Changes**: Modify existing bookings
-- **Cancellations**: Cancel and refund
-
-## 🎨 Widget Features
-
-### Airport Search Widget
-- Autocomplete with IATA codes
-- City and airport name search
-- Recent searches
-
-### Flight Search Results Widget
-- Compare multiple flights
-- Filter by stops, price, time
-- Sort options
-- Airline logos
-
-### Flight Details Widget
-- Complete itinerary
-- Fare breakdown
-- Baggage allowance
-- Flight duration and stops
-
-### Seat Selection Widget
-- Visual cabin map
-- Seat categories (standard, extra legroom, etc.)
-- Price per seat
-- Real-time availability
-
-## 🛠️ Customization
-
-### Adding New Airlines
-
-Duffel handles airline integrations automatically. You don't need to configure individual airlines.
-
-### Modifying Search Parameters
-
-Edit `src/modules/flights/flights.tools.ts` to customize:
-- Default passenger counts
-- Cabin class options
-- Date ranges
-- Result limits
-
-### Styling Widgets
-
-Each widget in `src/widgets/app/` can be customized:
-- Edit page.tsx for layout
-- Add custom CSS
-- Modify component styles
+---
 
-## 📚 Resources
+## ⚙️ Configuration
 
-### Duffel Documentation
-- [Duffel API Docs](https://duffel.com/docs/api)
-- [Duffel SDK (Node.js)](https://github.com/duffel/duffel-api-javascript)
-- [Duffel Postman Collection](https://duffel.com/docs/postman)
+### 1. Duffel API Key
 
-### NitroStack Documentation
-- [NitroStack Docs](https://nitrostack.ai/docs)
-- [Widget Development Guide](https://nitrostack.ai/docs/widgets)
+You need a free Duffel API key to see live flight data:
 
-## 💡 Tips
+1. Sign up at [duffel.com](https://duffel.com/).
+2. Copy your **Test Token** from the dashboard.
+3. Create `.env` from the example:
+   ```bash
+   cp .env.example .env
+   ```
+4. Update `DUFFEL_API_KEY` in your `.env`.
 
-- **Use Test Mode**: Start with `duffel_test_*` tokens for development
-- **Check Rate Limits**: Duffel has rate limits - cache searches when possible
-- **Error Handling**: The template includes comprehensive error handling
-- **Responsive Design**: Widgets are mobile-friendly out of the box
+### 2. OAuth (Optional)
 
-## 📚 Next Steps
+For production scenarios requiring user authentication, refer to [OAUTH_SETUP.md](./OAUTH_SETUP.md).
 
-- Try the **Starter Template** - Learn NitroStack basics
-- Try the **Pizza Shop Template** - Interactive maps with Mapbox
-- Read the [Duffel Getting Started Guide](https://duffel.com/docs/guides/getting-started)
+---
 
-## License
+## 🛠️ Commands
 
-MIT
+- `npm run dev` — Start the development ecosystem.
+- `npm run build` — Bundle TypeScript and widgets for deployment.
+- `npm run upgrade` — Keep NitroStack core up to date.
 
 ---
-
-**Built with ❤️ using NitroStack + Duffel API**
-
-Need help? Check [Duffel Support](https://duffel.com/docs) or [NitroStack Docs](https://nitrostack.ai/docs)
+**Official Resources**
+- [Website](https://nitrostack.ai)
+- [Docs](https://docs.nitrostack.ai)
+- [Duffel API](https://duffel.com/docs)

package/templates/typescript-pizzaz/.env.example

@@ -0,0 +1,8 @@
+# Mapbox Configuration (Optional)
+# =============================================================================
+# The map widget uses Mapbox GL for interactive maps. 
+# Get a free API key at: https://www.mapbox.com/
+# =============================================================================
+
+# Your Mapbox Public Token (starts with pk.)
+NEXT_PUBLIC_MAPBOX_TOKEN=pk.your_mapbox_token_here