The Model Context Protocol (MCP) is becoming the standard way for AI models to interact with external tools.
But building an MCP server from scratch usually means:
- Setting up the MCP SDK
- Defining JSON schemas
- Wiring transports
- Registering tools
- Writing test scripts
Before you even ship your first tool, you're already dealing with infrastructure.
NitroStack eliminates that complexity. It provides a batteries-included TypeScript framework that lets developers build production-ready MCP servers using a simple decorator-based architecture.
Paired with NitroStudio, you also get a visual environment to test tools, inspect outputs, and interact with AI models that call your MCP server.
In this tutorial, you'll:
- Scaffold an MCP server using NitroStack CLI
- Explore the generated Pizza Shop tools
- Connect the project to NitroStudio
- Execute tools visually
- Test AI chat calling your MCP tools
By the end, you'll have a working MCP server running locally.
Prerequisites
Ensure your development environment meets the following requirements.
Node.js
Node.js >= 18.0.0
Recommended versions:
- Node 18
- Node 20
- Node 22
Check your version:
node -v
npm
npm >= 9.0.0
Verify your installation:
npm -v
Code Editor
Any modern editor works. Recommended options:
- VS Code
- Cursor
- WebStorm
Step 1 — Install NitroStack CLI
Install the NitroStack CLI globally.
npm install -g @nitrostack/cli
Confirm the installation:
nitrostack-cli --help
If the command prints the CLI help menu, the installation was successful.
Step 2 — Initialize a New MCP Project
Create a new project using the CLI.
nitrostack-cli init pizza-shop-finder
The CLI will walk you through a few setup prompts.
Select a Template
When prompted to choose a template, select:
Advanced Template
Pizza Shop Finder with Maps and Widgets
This template includes:
- Example MCP tools
- Widgets for UI rendering
- Pizza data
- Map integration
It provides a complete working project out of the box.
Enter Project Description
Provide a description when prompted.
Example:
An MCP app for pizza shops where consumers can find and purchase their favorite pizza through AI models
Enter Author Name
Enter your name as the author.
Example:
Abhishek Dutta
Once completed, the CLI scaffolds the project automatically.
Your MCP server project is now ready.
Step 3 — Open the Project in Your Editor
Open the newly created project folder in your editor.
Example using VS Code:
code pizza-shop-finder
Your project structure will look similar to this:
NitroStack organizes functionality using a module-based architecture, keeping tools, services, and logic clearly separated.
Step 4 — Inspect the MCP Tools
Open the tools file:
src/modules/pizza/pizza.tools.ts
Inside, you'll find tools defined using NitroStack decorators.
Example:
@Tool({
name: "show_pizza_list",
description: "Shows available pizzas"
})
The @Tool decorator automatically:
- Registers the function as an MCP tool
- Generates the JSON schema
- Exposes it to MCP clients
At this stage, you don’t need to modify anything.The template already contains fully functional tools.
Step 5 — Download NitroStudio
Next, install NitroStudio to test the server.
Open:
Download the installer for your platform.
Available builds:
- macOS
- Windows
- Linux
In this tutorial, we are using macOS.
Install the application and launch it.
Step 6 — Connect Your Project to NitroStudio
When NitroStudio opens, you'll see the Launcher Page.
Click:
Add Server
Select:
Nitro Project
Studio automatically detects local NitroStack projects.
Choose:
pizza-shop-finder
Then click Connect.
NitroStudio now launches your MCP server and connects to it automatically.
Step 7 — Explore the App Canvas
After connecting, Studio opens the App Canvas.
This view displays everything registered in your MCP server:
- Tools
- Prompts
- Resources
- Widgets
The canvas provides a high-level overview of your MCP application.
Step 8 — Execute a Tool
Open the Tools section from the left navigation.
You will see a list of tools included in the template.
Examples:
- show_pizza_list
- find_pizza_shop
- order_pizza
Select:
show_pizza_list
This opens the Tool Executor panel.
NitroStudio automatically generates a form based on the tool’s JSON schema.
Click:
Execute
The tool runs immediately.
You should see:
- A JSON result viewer
- A widget rendering the result visually
The response should return a list of pizzas.
Step 9 — Test the AI Chat
Now open the Chat section in NitroStudio.
This is the primary interface for interacting with your MCP server using AI.
NitroStudio currently supports models from:
- Gemini
- OpenAI
Type the following message:
Show me the pizza list
Press Enter.
What Happens Behind the Scenes
NitroStudio executes the following workflow automatically:
The user sends a message
The LLM analyzes the request
The model decides to call a tool
NitroStudio executes the tool via MCP
The tool result is returned to the model
The model generates the final response
A widget renders if the tool supports UI
Inspect Tool Execution
When the AI calls a tool, NitroStudio shows the full execution flow.
You will see:
Tool Call
show_pizza_list
Arguments
{}
Tool Result
Displayed using:
- JSON viewer
- Widget renderer
This makes debugging MCP tool behavior extremely transparent.
What You Just Built
In just a few minutes, you:
- Scaffolded an MCP server using NitroStack
- Explored prebuilt tools from the Pizza Shop template
- Connected the server to NitroStudio
- Executed tools visually
- Interacted with your server using AI chat
All without writing MCP infrastructure code.
Why Developers Use NitroStack
Traditional MCP development requires:
- Manual SDK wiring
- Schema management
- Server configuration
- Tool registration
NitroStack replaces that complexity with a declarative model.
You define tools like this:
@Tool(...)
The framework handles everything else.
Next Steps
From here, you can extend your MCP server with:
- Authentication (JWT or API keys)
- Long-running tasks
- Custom widgets
- Database integration
- Rate limiting
NitroStack includes built-in support for all of these capabilities.
Abhishek Dutta
Author