1"use strict";(self.webpackChunkcodemie_docs=self.webpackChunkcodemie_docs||[]).push([[5609],{16800:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/flowchart_with_notes-3e1b052bd5e25c870ae14f570707ea43.png"},19919:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/tool-node-configuration-9c316d1ce99b59f363b71ff2092989b5.png"},28453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>l});var s=i(96540);const o={},t=s.createContext(o);function r(e){const n=s.useContext(t);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(t.Provider,{value:n},e.children)}},37213:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/visual-editor-advanced-config-ef36fb61ad25ecf8937a49653a448155.png"},56131:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/image48-473aeda09df9f76dde1f5d75c2dfde60.png"},78939:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/visual-editor-basic-config-eb72016b143bb300fbb8551f7e5472e3.png"},90472:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"user-guide/workflows/create-workflow","title":"Create Workflow","description":"Step-by-step guide to creating custom workflows using the Visual Workflow Editor in AI/Run CodeMie","source":"@site/docs/user-guide/workflows/create-workflow.md","sourceDirName":"user-guide/workflows","slug":"/user-guide/workflows/create-workflow","permalink":"/user-guide/workflows/create-workflow","draft":false,"unlisted":false,"editUrl":"https://github.com/codemie-ai/docs/tree/main/docs/user-guide/workflows/create-workflow.md","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"id":"create-workflow","title":"Create Workflow","sidebar_label":"Create Workflow","pagination_prev":"user-guide/workflows/workflows-overview","pagination_next":"user-guide/workflows/subworkflows","sidebar_position":2,"description":"Step-by-step guide to creating custom workflows using the Visual Workflow Editor in AI/Run CodeMie"},"sidebar":"deploymentGuideSidebar","previous":{"title":"Workflows Overview","permalink":"/user-guide/workflows/workflows-overview"},"next":{"title":"Sub-workflows","permalink":"/user-guide/workflows/subworkflows"}}');var o=i(74848),t=i(28453);const r={id:"create-workflow",title:"Create Workflow",sidebar_label:"Create Workflow",pagination_prev:"user-guide/workflows/workflows-overview",pagination_next:"user-guide/workflows/subworkflows",sidebar_position:2,description:"Step-by-step guide to creating custom workflows using the Visual Workflow Editor in AI/Run CodeMie"},l="Create Workflow",a={},d=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Creating a New Workflow",id:"creating-a-new-workflow",level:2},{value:"Building Workflows with the Visual Editor",id:"building-workflows-with-the-visual-editor",level:2},{value:"Visual Editor Interface",id:"visual-editor-interface",level:2},{value:"Left Sidebar: Nodes Palette",id:"left-sidebar-nodes-palette",level:3},{value:"Bottom Left: View Controls",id:"bottom-left-view-controls",level:3},{value:"Upper Right: Workflow Actions & Configuration",id:"upper-right-workflow-actions--configuration",level:3},{value:"Workflow Configuration Menu",id:"workflow-configuration-menu",level:3},{value:"Working with Nodes",id:"working-with-nodes",level:2},{value:"Adding and Configuring Nodes",id:"adding-and-configuring-nodes",level:3},{value:"Smart Configuration Validation",id:"smart-configuration-validation",level:4}
1,{value:"Assistant Integrations and Saving",id:"assistant-integrations-and-saving",level:4},{value:"Duplicating Nodes",id:"duplicating-nodes",level:3},{value:"Connecting Nodes",id:"connecting-nodes",level:3},{value:"Connection Rules",id:"connection-rules",level:4},{value:"Deleting Nodes and Connections",id:"deleting-nodes-and-connections",level:3},{value:"Assistant State",id:"assistant-state",level:3},{value:"Tool State",id:"tool-state",level:3},{value:"Selecting Tools",id:"selecting-tools",level:4},{value:"Custom State",id:"custom-state",level:3},{value:"Transform State",id:"transform-state",level:3},{value:"Node Type Comparison",id:"node-type-comparison",level:3},{value:"Complete Workflow Example",id:"complete-workflow-example",level:3},{value:"Viewing Your Workflow",id:"viewing-your-workflow",level:2},{value:"Visual workflow view",id:"visual-workflow-view",level:3},{value:"YAML configuration view",id:"yaml-configuration-view",level:3},{value:"Editor layout keys in the YAML",id:"editor-layout-keys-in-the-yaml",level:3},{value:"Saving and Running Workflows",id:"saving-and-running-workflows",level:2},{value:"Save Options",id:"save-options",level:3},{value:"Testing Your Workflow",id:"testing-your-workflow",level:3},{value:"Accessing Your Workflows",id:"accessing-your-workflows",level:3},{value:"Best Practices",id:"best-practices",level:2},{value:"Start Simple",id:"start-simple",level:3},{value:"Use Descriptive Names",id:"use-descriptive-names",level:3},{value:"Organize with Beautify",id:"organize-with-beautify",level:3},{value:"Test Incrementally",id:"test-incrementally",level:3},{value:"Use the Undo Feature",id:"use-the-undo-feature",level:3},{value:"Real-World Workflow Example",id:"real-world-workflow-example",level:2},{value:"Next Steps",id:"next-steps",level:2}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"create-workflow",children:"Create Workflow"})}),"\n",(0,o.jsx)(n.p,{children:"This guide shows you how to create workflows in AI/Run CodeMie using the Visual Workflow Editor\u2014the easiest and fastest way to build automated processes."}),"\n",(0,o.jsx)(n.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,o.jsx)(n.p,{children:"Before creating a workflow, ensure you have:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"A clear understanding of the workflow's purpose and desired outcome"}),"\n",(0,o.jsx)(n.li,{children:"Assistants configured for the tasks your workflow will perform"}),"\n",(0,o.jsx)(n.li,{children:"Any required integrations set up (Jira, Confluence, Git, etc.)"}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"creating-a-new-workflow",children:"Creating a New Workflow"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["Go to the ",(0,o.jsx)(n.strong,{children:"Workflows"})," section in the left sidebar"]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["Click ",(0,o.jsx)(n.strong,{children:"+ Create Workflow"}),":"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Create Workflow button",src:i(56131).A+"",width:"1948",height:"1250"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"building-workflows-with-the-visual-editor",children:"Building Workflows with the Visual Editor"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.strong,{children:"Visual Workflow Editor"})," is a drag-and-drop interface that makes building workflows intuitive and visual. Instead of writing YAML code, you design workflows graphically."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Visual Workflow Editor",src:i(92968).A+"",width:"3584",height:"1836"})}),"\n",(0,o.jsx)(n.admonition,{title:"Learn by Watching",type:"tip",children:(0,o.jsxs)(n.p,{children:["Watch this ",(0,o.jsx)(n.a,{href:"https://youtu.be/zacMZpM5MNU?si=dML07SgqFmL56TjQ",children:"video walkthrough of the Visual Workflow Editor"})," to see all features in action."]})}),"\n",(0,o.jsx)(n.h2,{id:"visual-editor-interface",children:"Visual Editor Interface"}),"\n",(0,o.jsx)(n.p,{children:"The Visual Workflow Editor consists of three main areas that help you design and manage workflows efficie
1ntly."}),"\n",(0,o.jsx)(n.h3,{id:"left-sidebar-nodes-palette",children:"Left Sidebar: Nodes Palette"}),"\n",(0,o.jsx)(n.p,{children:"The left sidebar contains all available node types organized by category:"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Control Nodes:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Conditional"}),": Branching logic with if/else conditions"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Switch"}),": Multi-path routing based on values"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Iterator"}),": Loop through collections of data"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Action Nodes:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Assistant"}),": AI-powered processing with assistants"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Tool"}),": External system integrations (Jira, Confluence, etc.)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Custom"}),": Execute custom code or scripts"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Transform"}),": Transform data structures between states"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Other:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Note"}),": Add documentation and comments to your workflow"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"To add a node, simply click on it in the sidebar or drag-and-drop it directly onto the canvas."}),"\n",(0,o.jsx)(n.h3,{id:"bottom-left-view-controls",children:"Bottom Left: View Controls"}),"\n",(0,o.jsx)(n.p,{children:"Visual controls for managing your workflow view:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Zoom In/Out"}),": Adjust the canvas zoom level"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Fit View"}),": Automatically fit the entire workflow in the viewport"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Lock/Unlock"}),": Lock the canvas to prevent accidental changes"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Download Schema"}),": Export the workflow schema as an image"]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"upper-right-workflow-actions--configuration",children:"Upper Right: Workflow Actions & Configuration"}),"\n",(0,o.jsx)(n.p,{children:"This section provides essential tools for managing your workflow:"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Action Buttons:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Cancel"}),": Discard changes and exit without saving"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Save"}),": Save the current workflow configuration"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Save & Run"}),": Save and immediately execute the workflow"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Workflow Tools:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Load Example"}),": Load a pre-built example workflow as a starting point"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Beautify"}),": Automatically organize and align nodes for better visual layout"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Undo"}),": Revert to the previous state (appears after making changes)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"YAML"}),": Switch to YAML editor to view or edit the configuration code"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Workflow Config"}),": Access Basic and Advanced configuration settings"]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"workflow-configuration-menu",children:"Workflow Configuration Menu"}),"\n",(0,o.jsxs)(n.p,{children:["Click the ",(0,o.jsx)(n.strong,{children:"Workflow Config"})," button to access configuration options:"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Basic Tab:"})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Basic Configuration",src:i(78939).A+"",width:"3290",height:"1550"})}),"\n",(0,o.jsx)(n.p,{children:"Configure essential workflow settings:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Project name"}),": Select the project where you want to add the workflow"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Shared with Project"}),": Enable to make your workflow visible to your project team"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Name*"})," (Required): Unique identifier for your workflow"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Description"}),": Brief explanation of the workflow's purpose and features"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Start Hint"}),": Custom text displayed below the prompt input field when users start a workflow execution."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Icon URL"}),": Link to an image (.png or .svg) for the workflow avatar"]}),"\n"]}),"\n",(0,o.jsx)(n.admonition,{title:"Required Fields",type:"info",children:(0,o.jsx)(n.p,{children:"Fields marked with an asterisk (*) are required and must be filled
1in before saving the workflow."})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Advanced Tab:"})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Advanced Configuration",src:i(37213).A+"",width:"3584",height:"1836"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Summarization Settings"}),": Token and message limits for automatic summarization"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Performance Settings"}),": Parallel task execution and recursion depth limits"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Retry Policy"}),": Configure retry attempts and backoff strategy for failed operations"]}),"\n"]}),"\n",(0,o.jsx)(n.admonition,{title:"Configuration Sync",type:"info",children:(0,o.jsx)(n.p,{children:"Changes made in the Visual Editor are automatically reflected in the YAML configuration, and vice versa. Both views stay synchronized in real-time."})}),"\n",(0,o.jsx)(n.h2,{id:"working-with-nodes",children:"Working with Nodes"}),"\n",(0,o.jsx)(n.h3,{id:"adding-and-configuring-nodes",children:"Adding and Configuring Nodes"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Add a Node"}),": Click a node type in the sidebar or drag it to the canvas"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Configure the Node"}),": Click the node to open its configuration window"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Set Parameters"}),": Customize the node's behavior (assistant selection, task prompts, conditions, etc.)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Save Configuration"}),": Click ",(0,o.jsx)(n.strong,{children:"Save"})," to apply your changes"]}),"\n"]}),"\n",(0,o.jsx)(n.h4,{id:"smart-configuration-validation",children:"Smart Configuration Validation"}),"\n",(0,o.jsx)(n.p,{children:"The Visual Editor provides intelligent configuration assistance for Tool and Custom nodes. When you configure a node, the editor dynamically displays input fields that match the argument schema and type requirements of the selected tool or custom function. As you fill in the configuration, the editor visually alerts you to any missing required fields or type mismatches, helping you catch errors before execution."}),"\n",(0,o.jsx)(n.p,{children:"The configuration panel prevents you from saving incomplete or invalid node settings, ensuring that your workflow is ready to run without configuration errors. While the editor generates and updates the YAML configuration automatically in the background, you work primarily with a structured, user-friendly interface that guides you through the setup process. If you need direct control over the configuration, the YAML editor view remains available."}),"\n",(0,o.jsx)(n.h4,{id:"assistant-integrations-and-saving",children:"Assistant Integrations and
1Saving"}),"\n",(0,o.jsx)(n.p,{children:"An assistant node may use tools whose integrations are not pinned by the assistant author. Such integration slots belong to whoever runs the workflow \u2014 resolved automatically or selected personally \u2014 so the workflow author does not have to own an integration for them."}),"\n",(0,o.jsxs)(n.p,{children:["Saving the workflow therefore succeeds even when those slots are empty for the author. The save response lists the affected tools as a ",(0,o.jsx)(n.strong,{children:"warning"}),", not an error: it is a reminder that these tools will depend on each user's own setup at run time. See ",(0,o.jsx)(n.a,{href:"/user-guide/tools_integrations/integrations/#automatic-credentials-lookup",children:"Automatic Credentials Lookup"})," for how a slot is resolved, and ",(0,o.jsx)(n.a,{href:"/user-guide/workflows/assistant-panel-in-executions",children:"Assistant Panel on the Executions Page"})," for selecting a personal integration from a workflow."]}),"\n",(0,o.jsx)(n.h3,{id:"duplicating-nodes",children:"Duplicating Nodes"}),"\n",(0,o.jsx)(n.p,{children:"Quickly duplicate existing nodes with their configuration:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Windows/Linux"}),": Select a node and press ",(0,o.jsx)(n.code,{children:"Ctrl+D"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"macOS"}),": Select a node and press ",(0,o.jsx)(n.code,{children:"Cmd+D"})]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"This creates a copy of the selected node with all its settings, which you can then modify as needed."}),"\n",(0,o.jsx)(n.h3,{id:"connecting-nodes",children:"Connecting Nodes"}),"\n",(0,o.jsx)(n.p,{children:"Connect nodes by dragging from one node's output to another node's input. The editor val
1idates connections in real-time with visual indicators:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Green connections"}),": Valid and properly configured"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Red connections"}),": Incomplete or incorrect (needs fixing)"]}),"\n"]}),"\n",(0,o.jsx)(n.h4,{id:"connection-rules",children:"Connection Rules"}),"\n",(0,o.jsx)(n.p,{children:"Follow these rules to maintain logical consistency:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Start node"}),": Can connect only to action nodes (Assistant, Tool, Custom, Transform)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Conditional and Switch nodes"}),": Must connect to at least one execution node"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Iterator nodes"}),": Act as containers for child execution nodes"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Action nodes"}),": Can route to any other node type"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"End node"}),": Can be connected from any node to mark workflow completion"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"The system automatically organizes the node layout, validates links, and generates the corresponding YAML configuration in the background."}),"\n",(0,o.jsx)(n.h3,{id:"deleting-nodes-and-connections",children:"Deleting Nodes and Connections"}),"\n",(0,o.jsx)(n.p,{children:"Remove nodes or connections through their configuration windows:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsx)(n.li,{children:"Click on the node or connection"}),"\n",(0,o.jsxs)(n.li,{children:["In the configuration window, click the ",(0,o.jsx)(n.strong,{children:"Delete"})," button"]}),"\n",(0,o.jsx)(n.li,{children:"Confirm the deletion"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"assistant-state",children:"Assistant State"}),"\n",(0,o.jsx)(n.p,{children:"Uses an AI assistant to process or generate content. Assistant nodes handle reasoning, decision-making, and content generation tasks."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Why use Assistant nodes:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Clear, understandable steps with AI-powered processing"}),"\n",(0,o.jsx)(n.li,{children:"Swap or tune assistants independently without changing workflow structure"}),"\n",(0,o.jsx)(n.li,{children:"Accurate tracking of intermediate logic and outputs via context store"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"tool-state",children:"Tool State"}),"\n",(0,o.jsx)(n.p,{children:"Calls external APIs or integrations (Jira, Confluence, GitHub, etc.) for fast, reliable data access."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Why use Tool nodes:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Fast, reliable, automation-friendly access to external systems and data"}),"\n",(0,o.jsx)(n.li,{children:'Separates "data gathering" from "reasoning/decision-making" (handled by assistants)'}),"\n",(0,o.jsxs)(n.li,{children:["Secure use of API credentials via ",(0,o.jsx)(n.code,{children:"integration_alias"})]}),"\n"]}),"\n",(0,o.jsx)(n.h4,{id:"selecting-tools",children:"Selecting Tools"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Tool Selection",src:i(19919).A+"",width:"3584",height:"1832"})}),"\n",(0,o.jsx)(n.p,{children:"When you add a Tool node to your workflow, the configuration panel displays two selection options:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Select Tool"}),' - Shows all previously connected integrations organized by category (Access Management, Azure DevOps, Cloud, Codebase Tools, Project Management, VCS, Data Management, IT Service Management). Your connected tools appear in the "Available Tools" list for quick selection.']}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Select MCP Tool"})," - Shows all configured MCP (Model Context Protocol) servers that you've added. MCP servers enable AI agents to access live data sources like file systems, databases, and APIs."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"Both connected tools and MCP servers are immediately available in the selection list - no additional configuration needed for already set up integrations."}),"\n",(0,o.jsx)(n.h3,{id:"custom-state",children:"Custom State"}),"\n",(0,o.jsx)(n.p,{children:"Executes custom code, scripts, or specialized logic for c
1omplex data processing."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Why use Custom nodes:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Highest flexibility for specialized business logic"}),"\n",(0,o.jsx)(n.li,{children:"Implement algorithms or transformations not available in standard nodes"}),"\n",(0,o.jsx)(n.li,{children:"Bridge gaps between different systems or data formats"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"transform-state",children:"Transform State"}),"\n",(0,o.jsx)(n.p,{children:"Transforms data structures and formats between workflow states using predefined mappings."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Why use Transform nodes:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Fast, deterministic data manipulation"}),"\n",(0,o.jsx)(n.li,{children:"Reshape data without AI processing overhead"}),"\n",(0,o.jsx)(n.li,{children:"Reliable, predictable transformations"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"node-type-comparison",children:"Node Type Comparison"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"Type"}),(0,o.jsx)(n.th,{children:"Flexibility"}),(0,o.jsx)(n.th,{children:"Speed"}),(0,o.jsx)(n.th,{children:"Best For"}),(0,o.jsx)(n.th,{children:"Example Use"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"Assistant"}),(0,o.jsx)(n.td,{children:"High"}),(0,o.jsx)(n.td,{children:"Medium"}),(0,o.jsx)(n.td,{children:"Text, analysis, reasoning"}),(0,o.jsx)(n.td,{children:"Generate summaries"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"Tool"}),(0,o.jsx)(n.td,{children:"Low"}),(0,o.jsx)(n.td,{children:"High"}),(0,o.jsx)(n.td,{children:"API calls, data transfer"}),(0,o.jsx)(n.td,{children:"Post to Jira"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"Custom"}),(0,o.jsx)(n.td,{children:"Highest"}),(0,o.jsx)(n.td,{children:"Varies"}),(0,o.jsx)(n.td,{children:"Specialized logic/scripts"}),(0,o.jsx)(n.td,{children:"Data transformation"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"Transform"}),(0,o.jsx)(n.td,{children:"Medium"}),(0,o.jsx)(n.td,{children:"High"}),(0,o.jsx)(n.td,{children:"Data structure manipulation"}),(0,o.jsx)(n.td,{children:"Format conversion"})]})]})]}),"\n",(0,o.jsx)(n.h3,{id:"complete-workflow-example",children:"Complete Workflow Example"}),"\n",(0,o.jsx)(n.p,{children:"Here's a real-world workflow that demonstrates multiple patterns working together:"}),"\n",(0,o.jsx)(n.p,{children:"This workflow shows:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Linear Flow"}),": Start \u2192 Extract pages \u2192 Generate story"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Iteration"}),": Loops through all extracted pages using an Iterator"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Processing"}),": Each story is categorized"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Conditional Branching"}),": Based on ",(0,o.jsx)(n.code,{children:"be_found"})," condition, routes to different Jira creation paths"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Parallel Paths"}),": Backend (Be) and Frontend (Fe) story creation"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Convergence"}),": Both paths lead to End state"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"This pattern is common for:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Processing collections of data (pages, tickets, documents)"}),"\n",(0,o.jsx)(n.li,{children:"Classifying items and routing them appropriately"}),"\n",(0,o.jsx)(n.li,{children:"Creating tasks in project management systems based on analysis"}),"\n",(0,o.jsx)(n.li,{children:"Multi-step approval or validation workflows"}),"\n"]}),"\n",(0,o.jsx)(n.admonition,{title:"Build Similar Workflows",type:"tip",children:(0,o.jsx)(n.p,{children:"Use the Visual Editor to recreate this pattern for your own use cases. The drag-and-drop interface makes it easy to add iteration, conditionals, and multiple execution paths."})}),"\n",(0,o.jsx)(n.h2,{id:"viewing-your-workflow",children:"Viewing Your Workflow"}),"\n",(0,o.jsx)(n.p,{children:"The Visual Editor provides multiple ways to view and edit your workflow:"}),"\n",(0,o.jsx)(n.h3,{id:"visual-workflow-view",children:"Visual workflow view"}),"\n",(0,o.jsx)(n.p,{children:"The main canvas shows your workflow as a connected graph of nodes. Use the view controls to:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Zoom"}),": Adjust the zoom level to see details or get an overview"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Fit View"}),": Automatically fit the entire workflow in the viewport"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Pan"}
1),": Drag the canvas to navigate large workflows"]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"yaml-configuration-view",children:"YAML configuration view"}),"\n",(0,o.jsxs)(n.p,{children:["Click the ",(0,o.jsx)(n.strong,{children:"YAML"})," button to see the generated YAML configuration. This view shows how your visual design translates to code."]}),"\n",(0,o.jsx)(n.p,{children:"If you need direct control over the workflow configuration, you can switch to YAML editing mode:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["Click the ",(0,o.jsx)(n.strong,{children:"YAML"})," button in the upper right corner"]}),"\n",(0,o.jsx)(n.li,{children:"Edit the YAML configuration directly"}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["When editing an existing workflow, use ",(0,o.jsx)(n.strong,{children:"Version History"})," in the YAML header to browse prior versions, compare changes, and restore a previous configuration. See ",(0,o.jsx)(n.a,{href:"/user-guide/workflows/workflow-version-history",children:"Workflow Version History"})," for details."]}),"\n",(0,o.jsx)(n.admonition,{title:"Configuration Sync",type:"info",children:(0,o.jsx)(n.p,{children:"The Visual Editor and YAML editor are synchronized. Changes made in one view are automatically reflected in the other."})}),"\n",(0,o.jsxs)(n.admonition,{title:"When to Use YAML",type:"tip",children:[(0,o.jsx)(n.p,{children:"Switch to YAML editing when you need features like Jinja templating, complex conditional expressions, or when you want to copy/paste configuration blocks. For most workflow creation tasks, the Visual Editor is faster and easier."}),(0,o.jsxs)(n.p,{children:["For detailed YAML configuration syntax and features, see the ",(0,o.jsx)(n.a,{href:"/user-guide/workflows/configuration/introduction",children:"Workflow YAML Configuration Guide"}),"."]})]}),"\n",(0,o.jsx)(n.h3,{id:"editor-layout-keys-in-the-yaml",children:"Editor layout keys in the YAML"}),"\n",(0,o.jsx)(n.p,{children:"Alongside the execution configuration, the Visual Editor stores the canvas layout in the same\nYAML document:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"meta_states"})})," \u2014 a top-level list holding each node's position, size, and editor node type,\nplus the decision nodes (",(0,o.jsx)(n.code,{children:"switch"}),", ",(0,o.jsx)(n.code,{children:"conditional"}),") that the editor draws as separate boxes"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.code,{children:"next.meta_next_state_id"})})," \u2014 links a transition to the decision node that represents it on\nthe canvas"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"These keys are read only by the editor. The execution engine ignores them, and they have no\neffect on how a workflow runs."}),"\n",(0,o.jsxs)(n.admonition,{title:"Editing YAML outside the editor",type:"warning",children:[(0,o.jsxs)(n.p,{children:["When a workflow is modified through the API, the SDK, the CLI, or an IaC pipeline, the existing\n",(0,o.jsx)(n.code,{children:"meta_states"})," block must be carried through unchanged. Dropping it discards the arrangement\nsomeone laid out by hand."]}),(0,o.jsxs)(n.p,{children:["Writing a workflow from scratch without ",(0,o.jsx)(n.code,{children:"meta_states"})," is safe \u2014 the editor lays the graph out\nautomatically the first time it opens, then saves the resulting positions."]})]}),"\n",(0,o.jsx)(n.h2,{id:"saving-and-running-workflows",children:"Saving and Running Workflows"}),"\n",(0,o.jsx)(n.h3,{id:"save-options",children:"Save Options"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Save"}),": Save the workflow configuration without executing"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Save & Run"}),": Save and immediately execute the workflow to test it"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Cancel"}),": Discard all changes and exit"]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"testing-your-workflow",children:"Testing Your Workflow"}),"\n",(0,o.jsx)(n.p,{children:"After creating your workflow:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["Click ",(0,o.jsx)(n.strong,{children:"Save & Run"})," to test immediately"]}),"\n",(0,o.jsx)(n.li,{children:"Enter required input parameters in the execution dialog"}),"\n",(0,o.jsx)(n.li,{children:"Monitor the execution progress"}),"\n",(0,o.jsx)(n.li,{children:"Review the results and debug if needed"}),"\n",(0,o.jsx)(n.li,{children:"Iterate and improve based on test results"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"accessing-your-workflows",children:"Accessing Your Workflows"}),"\n",(0,o.jsx)(n.p,{children:"After saving, your workflow appears in:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"My Workflows"}),": Shows workflows you created"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"All Workflows"}),": Shows all workflows available to you (including shared ones)"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["Click the ",(0,o.jsx)(n.strong,{children:"Start Execution"})," button on any workflow card to run it."]}),"\n",(0,o.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,o.jsx)(n.h3,{id:"start-simple",children:"Start Simple"}),"\n",(0,o.jsxs)(n.p,{children:["Begin with 2-3 nodes and test thoroughly before adding complexity. Use the ",(0,o.jsx)(n.strong,{children:"Load Example"})," feature to see a working workflow as a starting point."]}),"\n",(0,o.jsx)(n.h3,{id:"use-descriptive-names",children:"Use Descriptive Names"}),"\n",(0,o.jsx)(n.p,{children:"Name nodes and workflows clearly:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\u2705 ",(0,o.jsx)(n.code,{children:"fetch-jira-tickets"}),", ",(0,o.jsx)(n.code,{children:"analyze-requirements"}),", ",(0,o.jsx)(n.code,{children:"generate-report"})]}),"\n",(0,o.jsxs)(n.li,{children:["\u274c ",(0,o.jsx)(n.code,{children:"node1"}),", ",(0,o.jsx)(n.code,{children:"step2"}),", ",(0,o.jsx)(n.code,{children:"process"})]}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"organize-with-beautify",children:"Organize with Beautify"}),"\n",(0,o.jsxs)(n.p,{children:["Use the ",(0,o.jsx)(n.strong,{children:"Beautify"})," button regularly to keep your workflow visually organized and easy to understand."]}),"\n",(0,o.jsx)(n.h3,{id:"test-incrementally",children:"Test Incrementally"}),"\n",(0,o.jsxs)(n.p,{children:["Test each node configuration individually before connecting the complete workflow. Use ",(0,o.jsx)(n.strong,{children:"Save & Run"})," frequently during development."]}),"\n",(0,o.jsx)(n.h3,{id:"use-the-undo-feature",children:"Use the Undo Feature"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.strong,{children:"Undo"})," button appears after making changes. Use it to quickly revert mistakes without starting over."]}),"\n",(0,o.jsx)(n.h2,{id:"real-world-workflow-example",children:"Real-World Workflow Example"}),"\n",(0,o.jsx)(n.p,{children:"Below is a realistic example workflow that extracts, analyzes, and publishes requirements:"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Workflow Execution Logic",src:i(16800).A+"",width:"3483",he
1ight:"1109"})}),"\n",(0,o.jsx)(n.p,{children:"This workflow demonstrates key patterns in action:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Multiple Assistants"}),": Four specialized assistants working together (confluence_extractor, story_generator, story_categorizer, jira_publisher)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Iteration"}),": Processing multiple pages in a loop to generate user stories"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Conditional Logic"}),": Routing to different paths based on story type (Frontend vs Backend)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Human-in-the-Loop"}),": User review and approval checkpoint before creating Jira issues"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"External Integrations"}),": Extracting from Confluence and creating issues in Jira"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Parallel Paths"}),": Processing Frontend and Backend stories simultaneously"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"Workflows enable you to build sophisticated automation that adapts to your data, involves human decision-making when needed, and integrates with your existing tools."}),"\n",(0,o.jsx)(n.h2,{id:"next-steps",children:"Next Steps"}),"\n",(0,o.jsx)(n.p,{children:"Now that you understand the Visual Workflow Editor interface and controls, explore these topics:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"/user-guide/workflows/create-workflow-from-template",children:"Create from Template"})}),": Start with pre-built templates and customize them"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"/user-guide/workflows/subworkflows",children:"Sub-workflows"})}),": Invoke another workflow with an isolated execution context"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"/user-guide/workflows/llm-model-name-in-workflow",children:"LLM Model Configuration"})}),": Configure AI models for workflow states"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"/user-guide/workflows/workflow-templates",children:"Workflow Templates"})}),": Browse available templates for common use cases"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"/user-guide/workflows/configuration/introduction",children:"YAML Configuration Guide"})}),": Deep dive into advanced YAML features"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:(0,o.jsx)(n.a,{href:"/user-guide/workflows/configuration/advanced-features",children:"Advanced Features"})}),": Learn about templating, interruptions, and complex patterns"]}),"\n"]}),"\n",(0,o.jsx)(n.admonition,{title:"Practice Makes Perfect",type:"tip",children:(0,o.jsxs)(n.p,{children:["Try the ",(0,o.jsx)(n.a,{href:"/user-guide/ai-katas/",children:"AI Katas workflow series"})," for hands-on practice building workflows with guided challenges."]})}),"\n",(0,o.jsx)(n.admonition,{title:"Video Tutorial",type:"info",children:(0,o.jsxs)(n.p,{children:["Watch the ",(0,o.jsx)(n.a,{href:"https://youtu.be/zacMZpM5MNU?si=dML07SgqFmL56TjQ",children:"complete video walkthrough"})," to see the Visual Workflow Editor in action with real examples."]})})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},92968:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/visual-editor-controls-d230a768fcd2a1d220590ce9450952da.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.