feat: implement visual agent builder with node-based interface#1080
feat: implement visual agent builder with node-based interface#1080Ronit-Raj9 wants to merge 2 commits intokagent-dev:mainfrom
Conversation
- Add visual agent builder using React Flow for drag-and-drop workflow creation - Implement 5 core node types: BasicInfo, LLM, SystemPrompt, Tool, Output - Add bidirectional conversion between form data and visual graph - Create node library, canvas, and properties panel components - Implement real-time validation with error/warning display - Add mode toggle to switch between form and visual builder - Support declarative agents with model and tool configuration - Integrate with existing agent creation workflow and validation Resolves kagent-dev#916 Signed-off-by: Ronit Raj <ronitk964@gmail.com>
|
nice! I'll take a look at the PR -- @Ronit-Raj9 it would be awesome if you could join the community meeting tomorrow and do a demo of this! https://kagent.dev/community |
|
Sure, I will show the demo in community meet tomorrow. |
| }); | ||
|
|
||
| // Builder mode state (only for non-edit mode) | ||
| const [builderMode, setBuilderMode] = useState<'form' | 'visual'>('form'); |
There was a problem hiding this comment.
can you create a type for this: type BuilderMode = 'form | 'visual'`
There was a problem hiding this comment.
sure, I will do that
| // Hide footer when in visual builder mode | ||
| useEffect(() => { | ||
| if (builderMode === 'visual' && !isEditMode) { | ||
| document.body.classList.add('hide-footer'); |
There was a problem hiding this comment.
why not a state variable here instead of directly accessing the dom?
There was a problem hiding this comment.
Will fix this too
| <div className={builderMode === 'visual' && !isEditMode ? "h-full flex flex-col overflow-hidden" : "min-h-screen p-8"}> | ||
| <div className={builderMode === 'visual' && !isEditMode ? "flex-1 flex flex-col overflow-hidden min-h-0" : "max-w-6xl mx-auto"}> | ||
| {/* Header with title and builder mode toggle */} | ||
| <div className={builderMode === 'visual' && !isEditMode ? "flex items-center justify-between px-6 py-4 border-b flex-shrink-0" : "flex items-center justify-between mb-8"}> |
There was a problem hiding this comment.
set a boolean outside of this return (e.g. const isVisualMode = builderMode === 'visual' && !isEditMode) and use that in the class names.
also, use clsx to make it easier to read:
<div className={clsx(
isVisualMode ? "h-full flex flex-col overflow-hidden" : "min-h-screen p-8"
)}>
There was a problem hiding this comment.
Fine, will implement in this way.
2 participants
🎨 Visual Agent Builder - MVP Implementation
Closes #916
📝 Summary
Implements a visual node-based interface for creating and configuring agents with drag-and-drop functionality, real-time validation, and seamless integration with the existing form-based builder.
✨ What's Implemented
Core Components
Node Types (MVP - 5 nodes)
Property Editors
BasicInfoPropertyEditor- Name, namespace, type, descriptionLLMPropertyEditor- Model selection with namespace filteringSystemPromptPropertyEditor- System prompt textareaToolPropertyEditor- Tool selection dialog integrationOutputPropertyEditor- Format and template configurationUtility Libraries
🎯 Key Features
✅ Drag-and-drop node creation from library
✅ Connect nodes with edges to define workflow
✅ Real-time validation with collapsible error/warning panels
✅ Delete functionality via Delete/Backspace keys or floating button
✅ Multi-select support for batch operations
✅ Default template graph (Basic Info → LLM → System Prompt → Output)
✅ Namespace-aware model filtering (only shows models from same namespace)
✅ Bidirectional sync - preserves data when switching between modes
✅ Mini-map and zoom controls for navigation
✅ Keyboard shortcuts for deletion
Scope: Declarative Agents Only
Technical Constraints
🔧 Technical Details
Dependencies Added
Integration Points
Page Integration (
ui/src/app/agents/new/page.tsx)Global Styles (
ui/src/app/globals.css).hide-footerclass for visual builder full-screen modeType Definitions (
ui/src/types/index.ts)MVP_NODE_TYPESconstant for feature gatingLayout (
ui/src/app/layout.tsx)flex flex-col h-screenfor proper visual builder layoutValidation System
State Management
🧪 Testing Recommendations
Known Edge Cases
📸 Screenshots
Add screenshots of:
Node library with all 5 node types
Connected graph with default template
🔄 Migration Notes
No breaking changes - Feature is opt-in:
📚 Documentation Updates Needed
🚀 Future Enhancements
See #916 for full roadmap. Next steps: