Agentic Studio

The approved graph is converted into a machine-readable JSON decision tree.

{
  "objective": "Process new vendor invoices correctly.",
  "trigger": { "type": "email", "source": "invoices@mycompany.com" },
  "tools": ["gmail", "pdf_reader", "salesforce", "quickbooks", "slack"],
  "tasks": [
    { "id": "A", "task": "Start", "next_task": "B" },
    { "id": "B", "task": "Read Invoice & Extract Data", "agent": "Scanner", "next_task": "C" },
    { "id": "C", "task": "Check PO Valid?", "agent": "Validator", "type": "condition", "if_true": "D", "if_false": "G" },
    { "id": "G", "task": "REJECT Invoice - Bad PO", "agent": "Notifier" },
    { "id": "D", "task": "Check Vendor Status (New/Preferred)", "agent": "Validator", "next_task": "E" },
    { "id": "E", "task": "Route based on Logic", "agent": "Router", "type": "decision_tree",
      "branches": [
        { "condition": "vendor_status == 'New'", "next_task": "H" },
        { "condition": "amount > 20000", "next_task": "J" },
        { "condition": "amount > 5000", "next_task": "I" },
        { "condition": "vendor_status == 'Preferred' && amount <= 5000", "next_task": "F" }
      ]
    },
    { "id": "F", "task": "Auto-Approve & Pay", "agent": "Accountant" },
    { "id": "H", "task": "Approval: vendor-onboarding", "agent": "Notifier", "ui_component": "ApprovalCard" },
    { "id": "I", "task": "Approval: finance", "agent": "Notifier", "ui_component": "ApprovalCard" },
    { "id": "J", "task": "Approval: finance AND @CFO", "agent": "Notifier", "ui_component": "ApprovalCard" }
  ]
}
            

Python agent code and React UI components are generated from the JSON.

# ... (Agents are defined based on JSON) ...
scanner = Agent(role='Scanner', ...)
validator = Agent(role='Validator', ...)
router = Agent(role='Router', ...)
# ...

# --- Tasks ---
task_read_invoice = Task(description="Read Invoice & Extract Data", agent=scanner)
task_check_po = Task(description="Check PO Valid?", agent=validator)
task_reject_invoice = Task(description="REJECT Invoice - Bad PO", agent=notifier)
task_check_status = Task(description="Check Vendor Status", agent=validator)
task_router = Task(description="Route based on Logic", agent=router)
task_auto_pay = Task(description="Auto-Approve & Pay", agent=accountant)
# ... (all other tasks defined)

# --- Hierarchical Crew Definition ---
def get_next_task(manager_agent, task_result):
    # This logic is built from the JSON graph
    # (Simplified for demo)
    if task_result.task.id == 'C':
        if task_result.output.po_valid:
            return 'D' # Go to Check Vendor Status
        else:
            return 'G' # Go to REJECT
    # ...
    return None # End

crew = Crew(
  agents=[scanner, validator, router, accountant, notifier],
  tasks=[...], # All tasks
  process=Process.hierarchical,
  manager_llm=... # A smart model
)
                    

// Generated based on "ui_component": "ApprovalCard"
import React from 'react';

export default function ApprovalCard({ task }) {
  const { invoiceId, amount, vendor } = task.data;

  const handleApprove = () => {
    // call_agent_api(task.id, "approve")
  };

  return (
    <div className="p-4 border rounded-lg shadow-sm">
      <h4 className="font-bold">{task.description}</h4>
      <p>Invoice: {invoiceId}</p>
      <p>Vendor: {vendor}</p>
      <p>Amount: ${amount}</p>
      <div className="flex gap-4 mt-4">
        <button 
          onClick={handleApprove}
          className="bg-green-500 ..."
        >
          Approve
        </button>
        {/* ... */}
      </div>
    </div>
  );
}
                    

Review the auto-generated test plan and run the full test suite before deployment.

All steps are complete. The agent package (code, UI, test results) is ready to be published to the enterprise platform.