Workflows Dashboard Tutorials

Master the AI-powered workflow automation platform. Learn to build agents, create workflows, and leverage RAG for intelligent applications.

Next.js 15 TypeScript Tailwind CSS Socket.IO AI Agents
Open Live Dashboard

Quick Start Guide

1

Access Dashboard

Navigate to the dashboard and explore the main interface.

2

Create an Agent

Build your first AI agent using the agent builder.

3

Build a Workflow

Design an automation workflow in the visual editor.

4

Execute & Monitor

Run your workflow and monitor in real-time.

AI Agents

Discover, deploy, and manage intelligent AI agents. Browse the agent marketplace for pre-built templates or create custom agents for your specific needs.

Overview

AI Agents are autonomous entities that can perform tasks, answer questions, and interact with external systems. Each agent has configurable prompts, tools, and knowledge sources.

🧠 System Prompts

Define agent personality, behavior, and response patterns through customizable system prompts.

🔧 Tool Integration

Connect agents to external APIs, databases, and services through the tool registry.

📚 Knowledge Bases

Link RAG collections to provide agents with domain-specific knowledge.

Creating an Agent

  1. Navigate to Agents - Click "Agents" in the sidebar to access the agent management page.
  2. Click "New Agent" - This opens the agent configuration form.
  3. Configure Basic Settings - Name your agent and add a description.
  4. Set System Prompt - Define the agent's behavior and personality.
  5. Assign Tools - Select tools from the registry to extend capabilities.
  6. Link Knowledge - Connect RAG collections for domain expertise.
  7. Save & Deploy - Your agent is now ready for use!

API Example

TypeScript
// Create a new agent via API
const response = await fetch('/api/agents', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'Customer Support Agent',
    description: 'Handles customer inquiries',
    systemPrompt: 'You are a helpful customer support agent.',
    model: 'qwen-72b',
    tools: ['web_search', 'ticket_system'],
    knowledgeBase: 'product_docs'
  })
});
const agent = await response.json();

Common Use Cases

Use CaseDescriptionTools
Customer SupportHandle inquiries, create ticketsweb_search tickets
Data AnalysisAnalyze data, generate reportssql charts
Content GenerationWrite articles, marketing copysearch images
Code AssistantWrite, review, debug codeexec git
💡 Pro Tip

Start with a clear, specific system prompt. The more context you provide about the agent's role and constraints, the better its performance.

Workflows

Build complex automation pipelines with the visual workflow editor. Chain agents, tools, and conditions to create powerful AI workflows.

Workflow Components

📍 Triggers

Start workflows from webhooks, schedules, or manual triggers.

⚡ Actions

Execute agent calls, API requests, data transformations.

🔀 Conditions

Add branching logic based on data or responses.

🔄 Loops

Iterate over arrays or process batches of data.

Building Your First Workflow

  1. Open Workflow Editor - Navigate to Workflows and click "Create New Workflow".
  2. Add a Trigger - Choose webhook, schedule, or manual trigger.
  3. Drag & Drop Nodes - Add agent calls, tool executions, and data operations.
  4. Connect Nodes - Draw connections between nodes to define the execution flow.
  5. Configure Each Node - Set parameters, map inputs/outputs between nodes.
  6. Add Conditions - Create branches for different scenarios.
  7. Test & Deploy - Run test executions and activate your workflow.

Example: Content Generation Pipeline

JSON
{
  "name": "Content Generation Pipeline",
  "trigger": { "type": "webhook", "path": "/generate-content" },
  "nodes": [
    { "type": "agent", "agentId": "research-agent", "input": "{{trigger.topic}}" },
    { "type": "agent", "agentId": "writer-agent", "input": "{{nodes[0].output}}" },
    { "type": "tool", "toolId": "image-gen", "input": "{{nodes[1].output.title}}" },
    { "type": "webhook", "url": "https://api.example.com/publish", "body": "{{nodes[1].output}}" }
  ]
}
⚠ Important

Always test workflows with sample data before deploying to production. Use the execution engine's debug mode to trace each step.

RAG Collections

Upload documents, create vector collections, and perform semantic search. Power your agents with custom knowledge bases.

How RAG Works

📄 Document Upload

Upload PDFs, Markdown, HTML, or text files. Documents are automatically chunked and processed.

🔱 Vector Embedding

Text is converted to vector embeddings using state-of-the-art models for semantic understanding.

🔍 Semantic Search

Query your knowledge base with natural language and get relevant, contextual results.

Creating a Knowledge Base

  1. Navigate to RAG - Click "RAG Collections" in the sidebar.
  2. Create Collection - Click "New Collection" and give it a name.
  3. Upload Documents - Drag and drop files or use the upload button.
  4. Process Documents - The system chunks and embeds your content.
  5. Test Search - Use the search interface to query your collection.
  6. Link to Agent - Connect the collection to an agent for knowledge retrieval.

API Example

TypeScript
// Create a RAG collection and upload documents
const collection = await fetch('/api/rag/collections', {
  method: 'POST',
  body: JSON.stringify({ name: 'Product Documentation' })
});

// Upload a document
const formData = new FormData();
formData.append('file', pdfFile);
await fetch(`/api/rag/collections/${collection.id}/documents`, {
  method: 'POST',
  body: formData
});

// Semantic search
const results = await fetch(`/api/rag/collections/${collection.id}/search`, {
  method: 'POST',
  body: JSON.stringify({ query: 'How do I reset my password?' })
});
💡 Best Practice

Chunk your documents into logical sections before uploading. Smaller, focused chunks improve retrieval accuracy and reduce token usage.

AI Chat

Conversational AI interface with streaming responses. Chat with your agents, ask questions about your documents, and get intelligent responses.

Chat Features

💬 Streaming Responses

Real-time token streaming for natural conversation flow.

📎 File Attachments

Upload images, documents, and files for context-aware responses.

🔄 Context Memory

Conversations maintain context across multiple turns.

🎯 Agent Selection

Choose which agent to chat with or use the default assistant.

Using the Chat Interface

  1. Select an Agent - Choose from your available agents or use the default.
  2. Type Your Message - Enter your question or request in the input field.
  3. Attach Files (Optional) - Upload relevant documents or images.
  4. Send & Receive - Watch the streaming response in real-time.
  5. Continue Conversation - Ask follow-up questions with full context.

API Example

TypeScript
// Send a chat message with streaming
const response = await fetch('/api/chat/stream', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    agentId: 'support-agent',
    message: 'How do I integrate the API?',
    conversationId: 'conv-123',
    attachments: []
  })
});

// Handle streaming response
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = new TextDecoder().decode(value);
  console.log(chunk); // Stream tokens
}

Monitoring

Real-time dashboards showing workflow executions, agent performance, system health, and alerts. Monitor your AI operations at a glance.

Dashboard Metrics

MetricDescriptionAlert Threshold
Execution CountTotal workflow runs per time periodRate limit exceeded
Success RatePercentage of successful executions< 95%
Latency P9595th percentile response time> 5 seconds
Token UsageLLM token consumptionBudget limit
Error RateFailed executions per hour> 10/hour

Monitoring Features

📊 Real-time Charts

Live updating charts for execution metrics and system health.

🔔 Alert Configuration

Set up custom alerts for critical metrics and thresholds.

📈 Historical Data

View trends and analyze performance over time.

🔍 Log Viewer

Search and filter execution logs for debugging.

💡 Pro Tip

Set up alerts for error rate spikes and latency increases. Early detection helps maintain service quality.

Tool Registry

Browse and execute tools from the registry. Connect external APIs, run scripts, and extend your agents' capabilities with custom tools.

Available Tool Types

🌐 HTTP Requests

Make GET, POST, PUT, DELETE requests to any REST API.

🐍 Python Scripts

Execute Python code for data processing and automation.

đŸ—„ïž Database Queries

Run SQL queries against connected databases.

📁 File Operations

Read, write, and manipulate files on the server.

Creating a Custom Tool

TypeScript
// Define a custom tool
const tool = {
  name: 'weather_lookup',
  description: 'Get current weather for a location',
  parameters: {
    type: 'object',
    properties: {
      location: { type: 'string', description: 'City name' }
    },
    required: ['location']
  },
  execute: async (params) => {
    const response = await fetch(
      `https://api.weather.com/current?city=${params.location}`
    );
    return response.json();
  }
};

// Register the tool
await fetch('/api/tools', {
  method: 'POST',
  body: JSON.stringify(tool)
});
⚠ Security Note

Tools run with the permissions of the workflow execution engine. Always validate and sanitize inputs to prevent injection attacks.

Knowledge Graph

Visualize relationships between entities, documents, and concepts. Build and explore knowledge graphs for enhanced AI reasoning.

Graph Components

đŸ”” Nodes

Entities, concepts, documents, and data points represented as nodes.

🔗 Edges

Relationships and connections between nodes with typed edges.

đŸ·ïž Properties

Metadata and attributes attached to nodes and edges.

📊 Visualization

Interactive graph explorer with zoom, pan, and filter.

Use Cases

Use CaseDescription
Entity ResolutionIdentify and merge duplicate entities across data sources
Relationship DiscoveryFind hidden connections between concepts
Knowledge ExplorationNavigate complex information landscapes
Context EnrichmentProvide richer context for AI reasoning

Agent Swarms

Coordinate multiple agents working together. Create swarms for complex tasks requiring collaboration between specialized agents.

Swarm Patterns

🔀 Hierarchical

Lead agent delegates tasks to specialist agents and aggregates results.

🔄 Parallel

Multiple agents work simultaneously on independent subtasks.

🔗 Sequential

Agents pass work through a pipeline, each adding value.

đŸ—łïž Voting

Multiple agents propose solutions, best one is selected.

Creating a Swarm

TypeScript
// Create a research swarm with hierarchical pattern
const swarm = await fetch('/api/swarms', {
  method: 'POST',
  body: JSON.stringify({
    name: 'Research Team',
    pattern: 'hierarchical',
    leadAgent: 'coordinator-agent',
    workers: [
      { agent: 'web-researcher', role: 'web_search' },
      { agent: 'doc-analyzer', role: 'document_analysis' },
      { agent: 'fact-checker', role: 'verification' }
    ],
    aggregation: 'synthesis'
  })
});
💡 Best Practice

Use swarms for tasks that benefit from diverse perspectives or specialized expertise. Simple tasks are often better handled by a single well-prompted agent.

Execution Engine

Run and manage workflow executions. Track step-by-step progress, handle errors, and retry failed executions automatically.

Execution Features

▶ Manual Trigger

Run workflows on-demand with custom input parameters.

⏰ Scheduled Runs

Configure cron-based schedules for automated execution.

🔄 Auto-Retry

Automatic retry with exponential backoff for transient failures.

📊 Step Tracking

Real-time progress updates for each workflow step.

Execution States

StateDescriptionAction
pendingWaiting to startQueue or cancel
runningCurrently executingMonitor progress
completedFinished successfullyView results
failedExecution errorRetry or debug
cancelledUser cancelledRestart if needed

API Example

TypeScript
// Trigger a workflow execution
const execution = await fetch('/api/executions', {
  method: 'POST',
  body: JSON.stringify({
    workflowId: 'content-pipeline',
    input: { topic: 'AI Trends 2026' },
    priority: 'high'
  })
});

// Check execution status
const status = await fetch(`/api/executions/${execution.id}`);
console.log(status.state, status.progress);

// Get execution logs
const logs = await fetch(`/api/executions/${execution.id}/logs`);

Security

Manage API keys, permissions, and access controls. Secure your workflows and agents with role-based access control.

Security Features

🔑 API Key Management

Store and manage API keys securely with encryption at rest.

đŸ‘€ Role-Based Access

Define roles and permissions for users and agents.

📝 Audit Logs

Track all actions and changes for compliance and debugging.

🔐 Secret Vault

Securely store sensitive configuration and credentials.

Managing API Keys

  1. Navigate to Security - Click "Security" in the sidebar.
  2. Go to API Keys - View all stored keys and their usage.
  3. Add New Key - Click "Add Key" and enter the key details.
  4. Assign to Tools - Link keys to tools that need them.
  5. Monitor Usage - Track key usage in the audit logs.
⚠ Security Best Practice

Never hardcode API keys in your workflow definitions. Always use the secret vault and reference keys by name.

Agent Memory

Persistent memory storage for agents. Store conversation history, learned facts, and contextual information for enhanced interactions.

Memory Types

💬 Conversation Memory

Store and retrieve past conversations for context continuity.

📚 Knowledge Memory

Long-term storage of facts and learned information.

🎯 Working Memory

Temporary storage for current task context and state.

🔗 Entity Memory

Track entities and their relationships across interactions.

Memory Operations

TypeScript
// Store a memory
await fetch('/api/memory/store', {
  method: 'POST',
  body: JSON.stringify({
    agentId: 'support-agent',
    type: 'knowledge',
    content: 'User prefers email contact over phone',
    metadata: { source: 'conversation', confidence: 0.95 }
  })
});

// Retrieve relevant memories
const memories = await fetch('/api/memory/search', {
  method: 'POST',
  body: JSON.stringify({
    agentId: 'support-agent',
    query: 'user communication preferences',
    limit: 5
  })
});
💡 Pro Tip

Use entity memory to track user preferences and history. This enables personalized responses without re-asking for information.

Integrations

Connect external services and platforms. Integrate with popular tools and APIs to extend your workflow capabilities.

Available Integrations

IntegrationDescriptionUse Case
📧 GmailEmail automation and managementSend notifications, process inbox
📊 Google SheetsSpreadsheet data operationsLog results, data analysis
💬 SlackTeam messaging integrationAlerts, notifications, commands
🐙 GitHubRepository and issue managementPR reviews, issue tracking
đŸ—„ïž PostgreSQLDatabase operationsData storage, queries
☁ AWS S3Cloud storageFile storage, backups

Setting Up an Integration

  1. Navigate to Integrations - Click "Integrations" in the sidebar.
  2. Browse Available - View all supported integrations.
  3. Select Integration - Click on the integration you want to add.
  4. Configure Credentials - Enter API keys or OAuth credentials.
  5. Test Connection - Verify the integration works correctly.
  6. Use in Workflows - The integration is now available in workflow nodes.
💡 Integration Tip

Use OAuth integrations when available for better security. They provide scoped access without exposing long-lived credentials.