@motiadev/workbench

A web-based interface for building, visualizing, and managing Motia workflows.

Overview

@motiadev/workbench provides a powerful visual interface for Motia workflows, offering:

Flow visualization with interactive diagrams
Real-time log monitoring
State inspection and management
API testing capabilities

Installation

npm install @motiadev/workbench
# or
yarn add @motiadev/workbench
# or
pnpm add @motiadev/workbench

Usage

The Workbench is automatically integrated when you run a Motia project in development mode:

npx motia dev

This starts the development server and makes the Workbench available at http://localhost:3000 by default.

Features

Flow Visualization

Visualize your workflows as interactive diagrams, showing the connections between steps and the flow of events through your application.

Log Monitoring

Monitor logs in real-time with filtering capabilities, log level indicators, and detailed log inspection.

State Management

Inspect and manage application state, with support for viewing complex nested objects and state changes over time.

API Testing

Test API endpoints directly from the Workbench interface, with support for different HTTP methods and request bodies.

Components

The package exports several components that can be used to customize the visualization of your workflows:

import { 
  EventNode, 
  ApiNode, 
  NoopNode, 
  BaseNode, 
  BaseHandle 
} from '@motiadev/workbench'

Node Components

EventNode: Visualizes event-based steps
ApiNode: Visualizes API endpoint steps
NoopNode: A placeholder node with no specific functionality
BaseNode: Base component for creating custom node types
BaseHandle: Connection point component for nodes

Customization

You can customize the appearance and behavior of the Workbench by creating custom node components:

import { BaseNode, Position } from '@motiadev/workbench'

export const CustomNode = ({ data, ...props }) => {
  return (
    <BaseNode 
      {...props} 
      title="Custom Node" 
      color="#8B5CF6"
    >
      <div className="p-4">
        {data.customContent}
      </div>
    </BaseNode>
  )
}

Technical Details

Built with React and TypeScript
Uses XY Flow for flow visualization
Styled with Tailwind CSS and shadcn/ui components
Supports real-time updates via WebSockets

License

This package is part of the Motia framework and is licensed under the same terms.