@nitrostack/widgets ⚡

The visual SDK for NitroStack — Build interactive, data-rich UI outputs for your MCP tools.

@nitrostack/widgets allows you to go beyond plain text tool outputs. Use the power of React to build beautiful, interactive components (Widgets) that render directly in supported MCP clients and NitroStudio.

✨ Key Features

• ⚛️ React Powered: Build interactive UI logic using the React ecosystem you already know.
• 📊 Rich Visualization: Render charts, maps, and complex data tables instead of raw JSON.
• 🎮 Interactive Elements: Add buttons, forms, and triggers that call back to your MCP server.
• 🔌 seamless Integration: Attaches directly to tool results using the @Widget() decorator.
• 🧪 Visual Preview: Instantly preview and debug your widgets using NitroStudio.

📦 Installation

npm install @nitrostack/widgets react react-dom

🚀 Quick Start

Define a widget in your NitroStack server:

// On the Server
@Tool({ name: 'get_user_profile' })
@Widget({ 
  id: 'user-card', 
  title: 'User Profile',
  path: '/widgets/user-profile' 
})
async getUser() {
  return { name: 'Alice', role: 'Admin' };
}

Then create the React component:

// In your Widgets project
import { useWidgetData } from '@nitrostack/widgets';

export const UserCard = () => {
  const { data, loading } = useWidgetData<UserData>();

  if (loading) return <div>Loading...</div>;

  return (
    <div className="p-4 border rounded">
      <h3>{data.name}</h3>
      <p>{data.role}</p>
    </div>
  );
};

🎨 NitroStudio

NitroStudio is the best way to develop widgets. It automatically runs your server and providing a hot-reloading preview environment where you can see your widgets respond to real tool data in real-time.

Download NitroStudio

📖 Useful Links

• GitHub Repository
• Documentation
• Blog & Tutorials
• NPM Package

Built with ⚡ by the NitroStack Team.