Tutorial: Creating the UI Kitchen Sink Extension

This tutorial shows how to create an extension called ui-kitchen-sink that demonstrates all available UI components and methods in the Moises platform. This extension serves as a comprehensive example showcasing different ways to integrate with the Moises Studio interface.

Step 1: Creating the Extension

First, run the command to create a new extension from the official boilerplate:

npm create @moises.ai/extension ui-kitchen-sink

This command will:

Create a new ui-kitchen-sink folder
Install all necessary dependencies
Set up the basic extension structure

Step 2: Configuring the Extension

Navigate to the extension folder and open the app/ui-kitchen-sink/page.js to configure initMoisesExtension:

import { initMoisesExtension } from '@moises.ai/extension';

const useMoisesExtension = initMoisesExtension({
  id: 'ui-kitchen-sink',
  name: 'UI Kitchen Sink',
  description: 'A comprehensive example extension for the Moises platform',
  author: 'Your Name',
  version: '1.0.0'
});

Step 3: Implementing the UI Extension

Accessing the Moises API and UI Components

The UI Kitchen Sink extension demonstrates how to use both the Moises API and UI components. The useMoisesExtension hook returns three important properties:

moises: Contains the API with all available methods
isConnected: Verifies if the extension has successfully connected
SidebarLayout: A pre-built layout component for sidebar extensions

export default function Page() {
  const { moises, isConnected, SidebarLayout } = useMoisesExtension();

  return (
    <SidebarLayout width="600" title="Kitchen Sink">
      {/* Your UI content here */}
    </SidebarLayout>
  );
}

Setting up Multiple Integration Points

This extension demonstrates how to integrate with different parts of the Moises Studio interface:

"use client";

import { useEffect } from "react";
import { initMoisesExtension } from "@moises.ai/extension";

const useMoisesExtension = initMoisesExtension({
  id: "ui-kitchen-sink",
  name: "UI Kitchen Sink",
  description: "A comprehensive example extension for the Moises platform",
  author: "Your Name",
  version: "1.0.0",
});

export default function Page() {
  const { moises, isConnected, SidebarLayout } = useMoisesExtension();

  useEffect(() => {
    if (!isConnected) return;

    // Add extension to the footer menu
    moises.link.footerButton({ label: "Kitchen Sink", icon: "UserIcon" }, () => {
      moises.ui.open();
    });

    // Add extension to the track context menu
    moises.link.trackContextMenu({ label: "Alert Kitchen Sink" }, async ({ trackId }) => {
      moises.ui.alert({
        title: "Kitchen Sink",
        description: `Open the kitchen sink for track ${trackId}`,
      });
    });

    moises.link.trackContextMenu({ label: "Open Kitchen Sink" }, async ({ trackId }) => {
      moises.ui.open()
    });

    // Add extension to the toolbar
    moises.link.tollbarButton({ label: "Kitchen Sink", icon: "UserIcon" }, async () => {
      moises.ui.confirm({
        title: "Kitchen Sink",
        description: "Open the kitchen sink",
      });
    });
  }, [isConnected, moises]);

  return null
}

Understanding the Integration Methods

moises.link Methods

The extension demonstrates three different integration points:

`moises.link.footerButton`

Adds a button to the footer area of the Moises Studio interface:

moises.link.footerButton({ label: "Kitchen Sink", icon: "UserIcon" }, () => {
  moises.ui.open();
});

First Parameter: Configuration object with label (button text) and icon (icon name)
Second Parameter: Callback function executed when the button is clicked
Usage: Opens the extension's UI when clicked

`moises.link.trackContextMenu`

Adds items to the track context menu (right-click menu on tracks):

moises.link.trackContextMenu({ label: "Alert Kitchen Sink" }, async ({ trackId }) => {
  moises.ui.alert({
    title: "Kitchen Sink",
    description: `Open the kitchen sink for track ${trackId}`,
  });
});

First Parameter: Configuration object with label
Second Parameter: Callback function that receives track context (trackId)
Usage: Shows an alert with track information or opens the extension

`moises.link.tollbarButton`

Adds a button to the main toolbar:

moises.link.tollbarButton({ label: "Kitchen Sink", icon: "UserIcon" }, async () => {
  moises.ui.confirm({
    title: "Kitchen Sink",
    description: "Open the kitchen sink",
  });
});

First Parameter: Configuration object with label and icon
Second Parameter: Callback function executed when clicked
Usage: Shows a confirmation dialog

UI Components and Layout

SidebarLayout Component

The SidebarLayout component provides a pre-built layout for sidebar extensions:

<SidebarLayout
  width="600"
  title="Kitchen Sink"
>
  {/* Your content here */}
</SidebarLayout>

width: Sets the sidebar width in pixels
title: Sets the sidebar header title

Using moises.ui Methods in the Interface

The extension demonstrates how to use the UI methods within the sidebar interface. Here's how to implement the interactive buttons that showcase each UI method:

First, make sure to import the necessary design system components:

import { Flex, Heading, Button } from "@moises.ai/design-system";

Then, implement the UI with buttons that demonstrate each method:

return (
  <SidebarLayout
    width="600"
    title="Kitchen Sink"
  >
    <Flex direction="column">
      <Flex direction="column" gap="5">
        <Heading as="h2" size="3">
          Example Actions
        </Heading>

        <Button color="cyan" onClick={() => moises.ui.alert({
          title: "Hello",
          description: "Hello from the extension",
        })}>
          Alert
        </Button>

        <Button color="cyan" onClick={() => moises.ui.close()}>
          Close
        </Button>

        <Button color="cyan" onClick={() => moises.ui.confirm({
          title: "Hello",
          description: "Hello from the extension",
        })}>
          Confirm
        </Button>

        <Button color="cyan" onClick={() => moises.ui.progress({
          title: "Progress",
          duration: 1000,
        })}>
          Progress
        </Button>

        <Button color="cyan" onClick={() => moises.ui.prompt({
          title: "Prompt",
          label: "Write your prompt here"
        })}>
          Prompt
        </Button>
      </Flex>
    </Flex>
  </SidebarLayout>
);

Each button demonstrates a different UI interaction method, allowing users to test and understand how each method works in practice.

Understanding the UI Methods

The extension demonstrates various UI interaction methods. For detailed documentation of each method, refer to the individual API documentation:

moises.ui.open(): Opens the extension's main UI interface
moises.ui.close(): Closes the extension's UI interface
moises.ui.alert(): Shows an alert dialog to the user
moises.ui.confirm(): Shows a confirmation dialog
moises.ui.progress(): Shows a progress indicator
moises.ui.prompt(): Shows an input prompt dialog

Each method is used in the extension's button examples to demonstrate different types of user interactions.

Complete Implementation

Here's the complete implementation with proper imports and structure:

"use client";

import { useEffect } from "react";
import { initMoisesExtension } from "@moises.ai/extension";
import { Flex, Heading, Button } from "@moises.ai/design-system";

const useMoisesExtension = initMoisesExtension({
  id: "ui-kitchen-sink",
  name: "UI Kitchen Sink",
  description: "A comprehensive example extension for the Moises platform",
  author: "You name goes here",
  version: "1.0.0",
});

export default function Page() {
  const { moises, isConnected, SidebarLayout } = useMoisesExtension();

  useEffect(() => {
    if (!isConnected) return;

    // Add extension to the footer menu
    moises.link.footerButton({ label: "Kitchen Sink", icon: "UserIcon" }, () => {
      moises.ui.open();
    });

    // Add extension to the track context menu
    moises.link.trackContextMenu({ label: "Alert Kitchen Sink" }, async ({ trackId }) => {
      moises.ui.alert({
        title: "Kitchen Sink",
        description: `Open the kitchen sink for track ${trackId}`,
      });
    });

    moises.link.trackContextMenu({ label: "Open Kitchen Sink" }, async ({ trackId }) => {
      moises.ui.open()
    });

    // Add extension to the toolbar
    moises.link.tollbarButton({ label: "Kitchen Sink", icon: "UserIcon" }, async () => {
      moises.ui.confirm({
        title: "Kitchen Sink",
        description: "Open the kitchen sink",
      });
    });
  }, [isConnected, moises]);

  return (
    <SidebarLayout
      width="600"
      title="Kitchen Sink"
    >
      <Flex direction="column">
        <Flex direction="column" gap="5">
          <Heading as="h2" size="3">
            Example Actions
          </Heading>

          <Button color="cyan" onClick={() => moises.ui.alert({
            title: "Hello",
            description: "Hello from the extension",
          })}>
            Alert
          </Button>

          <Button color="cyan" onClick={() => moises.ui.close()}>
            Close
          </Button>

          <Button color="cyan" onClick={() => moises.ui.confirm({
            title: "Hello",
            description: "Hello from the extension",
          })}>
            Confirm
          </Button>

          <Button color="cyan" onClick={() => moises.ui.progress({
            title: "Progress",
            duration: 1000,
          })}>
            Progress
          </Button>

          <Button color="cyan" onClick={() => moises.ui.prompt({
            title: "Prompt",
            label: "Write your prompt here"
          })}>
            Prompt
          </Button>
        </Flex>
      </Flex>
    </SidebarLayout>
  );
}

Step 4: Testing the Extension

To test your UI Kitchen Sink extension:

Go to studio.moises.ai/app
Create a new project
Open the context menu and select "Manage Extensions"
Install your local extension using: http://localhost:3000/ui-kitchen-sink

Once installed, you can test all the integration points:

Footer Button: Look for the "Kitchen Sink" button in the footer
Track Context Menu: Right-click on any track to see the Kitchen Sink options
Toolbar Button: Find the Kitchen Sink button in the main toolbar
UI Methods: Click the buttons inside the extension to test different UI interactions

Key Features Demonstrated

This extension showcases:

Multiple Integration Points: Footer, toolbar, and context menu integration
UI Interaction Methods: Alert, confirm, prompt, and progress dialogs
Extension Management: Opening and closing the extension UI
Layout Components: Using pre-built sidebar layout
Design System: Implementing consistent UI with Moises design components

UI kitchen sink