Nitrocloud LogoNitroStack
/quick start

Quick Start

Get your first NitroStack MCP server running in under 2 minutes.

Step 1: Create Your Project

Bash
# Install CLI and create project
npx @nitrostack/cli init my-server

# Enter project directory
cd my-server

This creates a complete starter project with:

  • Sample tools, resources, and prompts
  • Widget components (Next.js)
  • TypeScript configuration
  • Development scripts

Step 2: Start Development

Bash
npm run dev

This starts:

  • MCP Server on stdio transport
  • Widget Server at http://localhost:3001

Step 3: Test Your Server

Connect NitroStudio or any MCP client to test your tools:

Bash
# Using NitroStudio (standalone app)
# 1. Download from nitrostack.ai/studio
# 2. Connect to your project directory
# 3. Chat with AI or test tools manually

Or test with Claude Desktop by adding to your config:

JSON
{
  "mcpServers": {
    "my-server": {
      "command": "node",
      "args": ["dist/index.js"],
      "cwd": "/path/to/my-server"
    }
  }
}

What's in Your Project?

my-server/
├── src/
│   ├── index.ts              # Entry point
│   ├── app.module.ts         # Root module
│   └── modules/
│       └── calculator/       # Sample module
│           ├── calculator.module.ts
│           ├── calculator.tools.ts
│           ├── calculator.resources.ts
│           └── calculator.prompts.ts
├── src/widgets/              # Next.js widgets
│   └── app/
│       └── calculator-result/
├── package.json
└── .env

Example Tool

Typescript
// src/modules/calculator/calculator.tools.ts
import { ToolDecorator as Tool, Widget, z, ExecutionContext } from 'nitrostack';

export class CalculatorTools {
  @Tool({
    name: 'calculate',
    description: 'Perform arithmetic calculations',
    inputSchema: z.object({
      operation: z.enum(['add', 'subtract', 'multiply', 'divide']),
      a: z.number(),
      b: z.number()
    })
  })
  @Widget('calculator-result')
  async calculate(input: any, ctx: ExecutionContext) {
    const { operation, a, b } = input;
    const ops = { add: a + b, subtract: a - b, multiply: a * b, divide: a / b };
    return { result: ops[operation], expression: `${a} ${operation} ${b}` };
  }
}

Example Widget

TSX
// src/widgets/app/calculator-result/page.tsx
'use client';
import { useWidgetSDK } from '@nitrostack/widgets';

export default function CalculatorResult() {
  const { isReady, getToolOutput } = useWidgetSDK();
  
  if (!isReady) return <div>Loading...</div>;
  
  const data = getToolOutput();
  
  return (
    <div className="p-6 bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl text-white text-center">
      <h2 className="text-4xl font-bold">{data.result}</h2>
      <p className="text-lg opacity-90">{data.expression}</p>
    </div>
  );
}

Common Commands

Bash
# Development
npm run dev              # Start dev server

# Build
npm run build            # Build for production
npm start                # Run production server

# CLI Commands
nitrostack-cli dev       # Alternative: use CLI directly
nitrostack-cli build     # Build with CLI
nitrostack-cli generate types  # Generate TypeScript types

Next Steps

Troubleshooting

Port in Use

Bash
nitrostack-cli dev --port 3002

Widget Not Loading

  • Verify widget server: http://localhost:3001
  • Check widget route matches @Widget('name') decorator

TypeScript Errors

Bash
npm install
npm run build

🎉 You're ready! Start building your MCP server.