Overview
Creating an interface for a agent enables you to transform complex agents into user-friendly interfaces that anyone can interact with. This powerful feature converts your AI agents into accessible interfaces with custom input fields, professional styling, and flexible sharing options, making your automation tools available to end users without requiring technical knowledge.
Getting Started: Interface Creation Process
Accessing Interface Creation
From Agent Management:
Navigate to Agents: Access your agents list from the main navigation
Select Target Agent: Choose the agent you want to convert into a interface
Context Menu: Click the three-dot menu (⋯) next to your desired agent
Create Interface Option: Select "Create interface" from the dropdown menu
Available Agent Actions:
Rename: Modify agent identification
Share: Direct agent sharing options
Open in new tab: Launch agent in separate window
Create interface: Convert agent to interactive interface
Duplicate: Create agent copies
Delete: Remove agents permanently
Initial Interface Setup
Interface Creation Dialog:
Creation Context: "You're crafting an interface based on the '[AGENT_NAME]' existing agent"
Interface Naming: "Enter Interface Name" field for custom interface identification
Creation Process: "Continue" button to proceed with interface generation
Agent Integration: Automatic linking between interface and underlying agent
Interface Configuration
Main Editor Layout
Components:
Interface Name Display: Shows current interface name (e.g., "TEST") in header
Status Indicators:
Internal/External Toggle: Controls interface accessibility
Publication Status: "Unpublished" badge indicates draft state
Action Buttons: Preview, Share, and Publish options for interface management
Settings Access: Configuration gear icon for advanced options
Component Palette
Available Interface Elements:
Content Components
Title: Main headings and interface titles
Short Text: Brief text content and descriptions
Image: Visual elements and branding assets
List: Organized information display
Interactive Elements
Input: User data collection fields
Output: Results display areas
Submit: Interface submission controls
Component Management:
Drag-and-Drop: Intuitive component placement
Visual Preview: Real-time interface appearance
Component Editing: Click-to-configure interface elements
Interface Component Configuration
Title Component Setup
Basic Title Configuration:
Primary Title: Main interface heading field
Title Editing: Click-to-edit title text
Header Hierarchy: Automatic formatting for interface structure
Advanced Title Options:
Title Field: Primary heading configuration
Subtitle (Optional): Secondary descriptive text
Description (Optional): Detailed interface explanation
Flexible Content: All fields support dynamic content
Image Component Configuration
Image Upload System:
Upload Interface: "Click here to upload an Image" prompt
Testing Instructions: "To test this, enter preview mode or publish your interface"
Visual Integration: Images enhance interface appearance and branding
Format Support: Multiple image formats accepted
Image Configuration Options:
Title (Optional): Image caption or heading
Subtitle (Optional): Additional image description
Upload Management: Easy image replacement and removal
Preview Testing: Visual validation before publishing
Input Component Configuration
Input Field Setup:
Field Name: Custom field identification (e.g., "Name")
Question Text: "Add question here" placeholder for user prompts
Input Type Selection: Dropdown control for field type specification
Input Type Options:
Dropdown: Selection from predefined options
Text Input: Free-form text entry
Multiple Choice: Radio button selections
Checkboxes: Multiple selection options
File Upload: Document and media submission
Dropdown Configuration:
Option Management: "Option 1", "Add Option 2" for choice creation
Option Removal: X button for deleting unwanted choices
Data Source: "Choose Input Node" for agent integration
Validation Warning: "No input selected" alerts for incomplete configuration
Advanced Input Settings:
Content Instructions: "Input your content that you want to run through your AI agent"
Testing Guidance: "To test this, enter preview mode or publish your interface"
Data Input Selection: "Please select which 'Data Input' to use for this input field"
Node Connection: "Choose Data Input Node" for agent linking
Data Input Integration
Input Node Selection:
Choose Input Dialog: Modal for selecting data sources
Node Description: "Select the Input API node that meets your interface's data needs"
Integration Process: "It will provide the required input when your interface is published"
Available Options: Multiple "Data Input" nodes for selection
Save Configuration: Confirm input node assignments
Output Component Configuration
Output Display Setup:
Title and Subtitle: Standard header configuration options
Output Preview: "Your output will be displayed in text format here once you submit your interface"
Testing Instructions: Preview and publish guidance for validation
Node Selection: "Choose Output Node" for result display configuration
Output Node Integration:
Choose Output Dialog: Modal for selecting result sources
Node Description: "Select the Output node that meets your interface's data needs"
Result Display: "It will provide the required output when your interface is published"
Available Options: Multiple "Data Output" nodes for selection
Save Configuration: Confirm output node assignments
Interface Submission Configuration
Submit Button Setup
Basic Submit Configuration:
Submit Button: Standard interface submission control
Advanced Settings: Gear icon for detailed configuration options
Submission Handling: Automatic agent execution upon interface submission
Advanced Submission Settings
Agent Selection Options:
Submit to All Agents: Universal submission to all available agents
Specific Agent Selection: Choose target agent from dropdown (e.g., "TEST")
Targeted Processing: Route submissions to specific agents
File Management Options:
Remove Uploaded Files: "Submitted file uploads will be removed following each agent run"
Retain Uploaded Files: "Submitted file uploads will be saved in the system after agent is run"
Storage Management: Control file persistence and system storage
Configuration Persistence:
Save Settings: Confirm submission configuration
Processing Rules: Define how interface data flows into agents
Resource Management: Control file storage and cleanup policies
Interface Styling and Customization
Interface Style Settings
Layout Configuration:
Horizontal Toggle: Enable/disable horizontal layout
Vertical Toggle: Enable/disable vertical layout
Gap Settings: Spacing control with numeric values (e.g., "16")
Background Color: Custom color selection with color picker
Visual Customization:
Background Image: "Click here to upload an Image" for custom backgrounds
Color Schemes: Professional appearance customization
Spacing Control: Fine-tune element positioning
Layout Flexibility: Adapt interfaces to different screen sizes
Text and Typography
Font Configuration:
Font Selection: Dropdown with options like "Roboto"
Font Size: Adjustable sizing (e.g., "20px") with dropdown control
Text Styling: Bold, italic, and underline options
Text Alignment: Left, center, right, and justify alignment options
Color Management:
Text Color: Custom color codes (e.g., "
#475467") with color pickerColor Palette: Predefined color options including:
Dark Colors: Black, dark gray variations
Neutral Colors: Light gray, medium gray
Accent Colors: Green, yellow, red, blue variations
Highlight Colors: Purple, violet options
Custom Colors: Full color picker for unlimited options
Modal and Interface Styling
Modal Configuration:
Modal Size: Dropdown selection (e.g., "100%") for interface dimensions
Background Color: Custom modal background (
#ffffff)Background Palette: Predefined background color options
Border Radius: Adjustable corner rounding (e.g., "4px")
Professional Appearance:
Consistent Styling: Uniform appearance across all interface elements
Brand Integration: Custom colors and fonts for brand consistency
Responsive Design: Automatic adaptation to different devices
Visual Hierarchy: Clear organization of interface elements
Interface Publishing and Sharing
Publication Status Management
Status Indicators:
Internal Badge: Blue "Internal" indicator for restricted access
Unpublished Badge: Orange "Unpublished" status for draft interfaces
Publication Control: Clear visibility of current interface state
Publishing Options
Access Control Selection:
Internal Publishing: "Only available to FluxPrompt users who can complete and submit the interface"
External Publishing: "Available to anyone with whom you share the link. Also accessible to FluxPrompt users"
Default Selection: Internal publishing selected by default for security
Publishing Process:
Continue Button: Proceed with selected publishing option
Publication Confirmation: System generates interface URL upon publishing
Access Management: Control who can view and submit interfaces
Interface Sharing System
Share Link Generation:
Copy Published Interface Link: Direct URL copying for easy sharing
Generated URL: Automatic creation of interface access links
Link Format: Professional URLs for external sharing
URL Management:
Copy Link Button: One-click URL copying with link icon
Link Validation: Automatic URL generation and validation
Access Testing: Verify interface accessibility through generated links
Publication Control
Publishing Actions:
Publish Button: Make interfaces live and accessible
Unpublish Option: Remove interfaces from public access
Publication Toggle: Easy switching between published and draft states
Version Control: Manage interface updates and revisions
Interface-to-Agent Connection
Data Flow Integration:
Input Mapping: Interface fields automatically connect to agent inputs
Output Display: Agent results display in interface output sections
Processing Pipeline: Seamless data flow from interface submission to agent execution
Result Delivery: Automatic presentation of agent outputs to interface users
Best Practices and Optimization
Interface Design Guidelines
User Experience Optimization:
Clear Instructions: Provide helpful guidance for each interface field
Logical Flow: Organize interface elements in intuitive sequences
Visual Hierarchy: Use titles, subtitles, and descriptions effectively
Input Validation: Configure appropriate input types for data quality
Publishing Strategy
Access Control Planning:
Internal Interfaces: Use for sensitive or organization-specific agents
External Interfaces: Deploy for customer-facing or public agents
Security Considerations: Choose appropriate access levels based on data sensitivity
Testing Process: Always preview interfaces before publishing
Performance Optimization
Efficient Interface Configuration:
Minimal Complexity: Include only necessary interface elements
Fast Loading: Optimize images and content for quick interface loading
Clear CTAs: Make submission buttons prominent and action-oriented
Error Handling: Provide clear feedback for interface validation issues
Integration Best Practices
Agent Connection:
Data Mapping: Ensure interface inputs match agent requirements
Output Configuration: Set up appropriate output displays for results
File Management: Choose appropriate file retention policies
Testing Validation: Thoroughly test interface-to-agent connections before publishing
Creating interfaces for agents transforms complex AI agents into accessible, user-friendly interfaces that enable both technical and non-technical users to leverage powerful automation capabilities through intuitive interface-based interactions.