win4r

OpenAI Agents Workflow Designer

Design community

SOURCE https://github.com/win4r/OpenAI-Agents-Workflow-Designer

Description

OpenAI Agents Workflow Designer is a visual interface that allows users to create OpenAI Agents workflows through a drag-and-drop component approach, and generate corresponding code. This tool simplifies the process of designing complex agent systems with multiple agents, function tools, and runners.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

OpenAI Agents Workflow Designer

video(视频):https://youtu.be/KQULGx6wjco

Demo: https://x.com/AISuperDomain/status/1906739439319257495

我的微信: stoeng

[English](#english) | [中文](#中文)

![OpenAI Agents Workflow Designer](https://img.shields.io/badge/OpenAI-Agents_Workflow_Designer-412991) ![React](https://img.shields.io/badge/React-18+-61DAFB?logo=react&logoColor=white) ![Vite](https://img.shields.io/badge/Vite-Latest-646CFF?logo=vite&logoColor=white) ![ReactFlow](https://img.shields.io/badge/ReactFlow-Latest-ff0072) ![Ant Design](https://img.shields.io/badge/Ant_Design-Latest-0170FE?logo=ant-design&logoColor=white)

🌟 Overview

OpenAI Agents Workflow Designer is a visual interface that allows users to create OpenAI Agents workflows through a drag-and-drop component approach, and generate corresponding code. This tool simplifies the process of designing complex agent systems with multiple agents, function tools, and runners.

✨ Key Features

Visual Workflow Design: Drag and drop components to create agent workflows
Component Configuration: Configure agent names, instructions, function parameters, etc.
Relationship Establishment: Connect components to establish relationships (handoffs, tools, execution)
Code Generation: Generate runnable OpenAI Agents SDK code
Intuitive Interface: User-friendly interface with clear visual cues

🛠️ Technology Stack

Frontend Framework: React 18+
Workflow Editor: React Flow
UI Component Library: Ant Design
State Management: React Hooks
Build Tool: Vite

📋 Installation

# Clone the repository
git clone https://github.com/yourusername/openai-agents-workflow-designer.git
cd openai-agents-workflow-designer

# Install dependencies
npm install

# Start the development server
npm run dev

🚀 Usage Guide

Add Components:
- Drag components from the left panel to the canvas
- Available components: Agent, Runner, F