Skip to content

feat(agentflow): add initial implementation of @flowise/agentflow package#5733

Merged
jocelynlin-wd merged 6 commits intomainfrom
feat/agentflow-sdk-init
Feb 12, 2026
Merged

feat(agentflow): add initial implementation of @flowise/agentflow package#5733
jocelynlin-wd merged 6 commits intomainfrom
feat/agentflow-sdk-init

Conversation

@jocelynlin-wd
Copy link
Contributor

  • Introduced core files including package.json, README.md, and architecture documentation.
  • Added ESLint, Prettier, and TypeScript configurations for code quality and formatting.
  • Implemented basic structure with components, hooks, and utilities for building AI agent workflows.
  • Included example usage and development setup in the examples directory.
  • Established dependency management with pnpm-lock.yaml updates.

This commit lays the groundwork for the agentflow package, enabling further development of features and functionalities.

…kage

- Introduced core files including package.json, README.md, and architecture documentation.
- Added ESLint, Prettier, and TypeScript configurations for code quality and formatting.
- Implemented basic structure with components, hooks, and utilities for building AI agent workflows.
- Included example usage and development setup in the examples directory.
- Established dependency management with pnpm-lock.yaml updates.

This commit lays the groundwork for the agentflow package, enabling further development of features and functionalities.
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @jocelynlin-wd, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request lays the groundwork for the @flowise/agentflow package, introducing its initial implementation as an embeddable React component for AI agent workflow creation. The changes establish a robust Domain-Driven Modular Architecture, ensuring maintainability and scalability. It integrates modern development practices through comprehensive ESLint, Prettier, and TypeScript configurations, alongside a suite of core components, hooks, and utilities. Furthermore, the inclusion of detailed architectural documentation and a rich set of examples aims to accelerate future development and ease integration for consumers.

Highlights

  • Initial Package Implementation: Introduced the foundational @flowise/agentflow package, designed as an embeddable React component for building and visualizing AI agent workflows.
  • Modular Architecture: Established a Domain-Driven Modular Architecture with clear separation of concerns, detailed in ARCHITECTURE.md, to ensure high reusability and testability.
  • Development Tooling: Integrated essential development tools including ESLint, Prettier, and TypeScript configurations for enhanced code quality, formatting, and type safety.
  • Core Functionality: Implemented the basic structure comprising core components, hooks, and utilities necessary for constructing and managing AI agent workflows.
  • Comprehensive Examples: Provided a dedicated examples directory with various usage patterns and a development setup to demonstrate the package's capabilities and facilitate adoption.
Changelog
  • packages/agentflow/.eslintignore
    • Added configuration to ignore specific files and directories from ESLint checks.
  • packages/agentflow/.eslintrc.js
    • Added ESLint configuration for React, TypeScript, JSX a11y, import sorting, and architectural boundary enforcement.
  • packages/agentflow/.npmignore
    • Added configuration to specify files and directories to be ignored when publishing the npm package.
  • packages/agentflow/.prettierignore
    • Added configuration to ignore specific files and directories from Prettier formatting.
  • packages/agentflow/.prettierrc
    • Added Prettier configuration for consistent code formatting.
  • packages/agentflow/ARCHITECTURE.md
    • Added detailed documentation outlining the Domain-Driven Modular Architecture, directory structure, dependency flow, and development principles.
  • packages/agentflow/README.md
    • Added initial README with package overview, installation instructions, basic usage, development setup, and documentation links.
  • packages/agentflow/examples/.env.example
    • Added an example environment file for configuring Flowise instance URL and API token for examples.
  • packages/agentflow/examples/README.md
    • Added documentation for setting up and running examples, including configuration details and troubleshooting.
  • packages/agentflow/examples/index.html
    • Added the main HTML file for the examples application.
  • packages/agentflow/examples/package.json
    • Added package dependencies and scripts for the examples application.
  • packages/agentflow/examples/src/App.tsx
    • Added the main application component for the examples, featuring a dropdown to switch between different demos.
  • packages/agentflow/examples/src/PropsDisplay.tsx
    • Added a component to display Agentflow component props in an expandable format within the examples.
  • packages/agentflow/examples/src/config.ts
    • Added configuration file for environment variables used in the examples.
  • packages/agentflow/examples/src/demos/AllNodeTypesExample.tsx
    • Added an example showcasing all available node types in a grid layout.
  • packages/agentflow/examples/src/demos/BasicExample.tsx
    • Added a basic usage example demonstrating imperative methods like validate, fitView, getFlow, and clear.
  • packages/agentflow/examples/src/demos/CustomUIExample.tsx
    • Added an example demonstrating how to customize the header and node palette using render props.
  • packages/agentflow/examples/src/demos/DarkModeExample.tsx
    • Added an example showcasing dark mode styling for the Agentflow canvas.
  • packages/agentflow/examples/src/demos/FilteredComponentsExample.tsx
    • Added an example demonstrating how to restrict available node types in the palette.
  • packages/agentflow/examples/src/demos/MultiNodeFlow.tsx
    • Added an example demonstrating a complete multi-node translation agent flow with styled edges.
  • packages/agentflow/examples/src/demos/StatusIndicatorsExample.tsx
    • Added an example demonstrating node status indicators for execution states.
  • packages/agentflow/examples/src/demos/index.ts
    • Added an index file to export all demo components.
  • packages/agentflow/examples/src/main.tsx
    • Added the entry point for the examples application, including theme setup.
  • packages/agentflow/examples/src/vite-env.d.ts
    • Added TypeScript declaration file for Vite environment variables in examples.
  • packages/agentflow/examples/tsconfig.json
    • Added TypeScript configuration for the examples directory.
  • packages/agentflow/examples/vite.config.ts
    • Added Vite configuration for the examples application, including alias resolution and watch settings.
  • packages/agentflow/package.json
    • Added the core package.json for @flowise/agentflow, defining metadata, scripts, dependencies, and peer dependencies.
  • packages/agentflow/src/Agentflow.tsx
    • Added the main Agentflow React component, which orchestrates the canvas, providers, and core functionalities.
  • packages/agentflow/src/AgentflowProvider.tsx
    • Added the root provider component for Agentflow, setting up API, configuration, and state contexts.
  • packages/agentflow/src/atoms/ConfirmDialog.tsx
    • Added a reusable confirmation dialog component with a context provider.
  • packages/agentflow/src/atoms/Input.tsx
    • Added a basic input component for various text, password, and number types.
  • packages/agentflow/src/atoms/MainCard.tsx
    • Added a generic card wrapper component for consistent UI styling.
  • packages/agentflow/src/atoms/NodeInputHandler.tsx
    • Added a component to handle input parameters for nodes, including various input types and handles.
  • packages/agentflow/src/atoms/index.ts
    • Added an index file to export all atom components.
  • packages/agentflow/src/core/index.ts
    • Added an index file to export core framework-agnostic logic.
  • packages/agentflow/src/core/node-catalog/index.ts
    • Added an index file to export node catalog utilities.
  • packages/agentflow/src/core/node-catalog/node-filters.ts
    • Added utility functions for filtering and grouping nodes.
  • packages/agentflow/src/core/node-config/index.ts
    • Added an index file to export node configuration utilities.
  • packages/agentflow/src/core/node-config/node-icon-utils.ts
    • Added utility functions for retrieving node icons and colors.
  • packages/agentflow/src/core/node-config/node-icons.ts
    • Added definitions for Agentflow node icons and their associated colors.
  • packages/agentflow/src/core/types/index.ts
    • Added comprehensive TypeScript type definitions for the entire Agentflow package, including flow data, nodes, edges, validation, and component props.
  • packages/agentflow/src/core/utils/connection-validation.ts
    • Added utility functions for validating connections between nodes, including cycle detection.
  • packages/agentflow/src/core/utils/flow-export.ts
    • Added a utility function to generate export-friendly flow data.
  • packages/agentflow/src/core/utils/index.ts
    • Added an index file to export core utility functions.
  • packages/agentflow/src/core/utils/node-factory.ts
    • Added utility functions for generating unique node IDs, labels, and initializing node data.
  • packages/agentflow/src/core/validation/flow-validation.ts
    • Added functions for validating the overall flow structure, including start node presence and disconnected nodes.
  • packages/agentflow/src/core/validation/index.ts
    • Added an index file to export flow validation utilities.
  • packages/agentflow/src/features/canvas/canvas.css
    • Added core CSS styles for the Agentflow canvas and its components.
  • packages/agentflow/src/features/canvas/components/AgentflowHeader.tsx
    • Added the default header component for the canvas, including save and export actions.
  • packages/agentflow/src/features/canvas/components/ConnectionLine.tsx
    • Added a custom connection line component for ReactFlow, featuring gradient paths and labels.
  • packages/agentflow/src/features/canvas/components/NodeInfoDialog.tsx
    • Added a dialog component to display detailed information about a selected node.
  • packages/agentflow/src/features/canvas/components/NodeModelConfigs.tsx
    • Added a component to display model configuration badges on nodes.
  • packages/agentflow/src/features/canvas/components/NodeStatusIndicator.tsx
    • Added components for displaying node status (e.g., in progress, error) and warning indicators.
  • packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx
    • Added a toolbar component with actions like duplicate, delete, and info for nodes.
  • packages/agentflow/src/features/canvas/components/index.ts
    • Added an index file to export all canvas components.
  • packages/agentflow/src/features/canvas/containers/AgentFlowEdge.tsx
    • Added the ReactFlow edge component for Agentflow, supporting gradient colors and delete functionality.
  • packages/agentflow/src/features/canvas/containers/AgentFlowNode.tsx
    • Added the main ReactFlow node component for Agentflow, displaying node data, status, and actions.
  • packages/agentflow/src/features/canvas/containers/IterationNode.tsx
    • Added a specialized ReactFlow node component for iteration/loop structures, including resizing capabilities.
  • packages/agentflow/src/features/canvas/containers/StickyNote.tsx
    • Added a ReactFlow node component for sticky notes, allowing text input and basic actions.
  • packages/agentflow/src/features/canvas/containers/index.ts
    • Added an index file to export all canvas container components.
  • packages/agentflow/src/features/canvas/hooks/index.ts
    • Added an index file to export all canvas-related hooks.
  • packages/agentflow/src/features/canvas/hooks/useDragAndDrop.ts
    • Added a hook for handling drag-and-drop functionality for nodes onto the canvas.
  • packages/agentflow/src/features/canvas/hooks/useFlowHandlers.ts
    • Added a hook for managing ReactFlow connection and change events, including validation.
  • packages/agentflow/src/features/canvas/hooks/useFlowNodes.ts
    • Added a hook for fetching and filtering available nodes from the API.
  • packages/agentflow/src/features/canvas/index.ts
    • Added the public API for the canvas feature, exporting components, hooks, and utilities.
  • packages/agentflow/src/features/canvas/nodeIcons.tsx
    • Added utility functions for rendering node icons and built-in tool icons.
  • packages/agentflow/src/features/canvas/styled.ts
    • Added styled components for consistent styling within the canvas.
  • packages/agentflow/src/features/generator/GenerateFlowDialog.tsx
    • Added a dialog component for AI-powered flow generation, including prompt input and model selection.
  • packages/agentflow/src/features/generator/SuggestionChips.tsx
    • Added a component for displaying suggested prompts in the flow generation dialog.
  • packages/agentflow/src/features/generator/index.ts
    • Added the public API for the generator feature.
  • packages/agentflow/src/features/node-editor/EditNodeDialog.tsx
    • Added a dialog component for editing node properties and labels.
  • packages/agentflow/src/features/node-editor/index.ts
    • Added the public API for the node editor feature.
  • packages/agentflow/src/features/node-palette/AddNodesDrawer.tsx
    • Added a drawer component for adding nodes to the canvas via drag-and-drop or click.
  • packages/agentflow/src/features/node-palette/StyledFab.tsx
    • Added a styled Floating Action Button component.
  • packages/agentflow/src/features/node-palette/index.ts
    • Added the public API for the node palette feature.
  • packages/agentflow/src/features/node-palette/search.ts
    • Added utility functions for fuzzy searching and grouping nodes in the palette.
  • packages/agentflow/src/index.ts
    • Added the main public API entry point for the @flowise/agentflow package.
  • packages/agentflow/src/infrastructure/api/chatflows.ts
    • Added API functions for interacting with chatflows on the Flowise backend.
  • packages/agentflow/src/infrastructure/api/client.ts
    • Added a configured Axios client for making API requests to the Flowise backend.
  • packages/agentflow/src/infrastructure/api/hooks/useApi.ts
    • Added a generic hook for managing API call state (loading, error, data).
  • packages/agentflow/src/infrastructure/api/index.ts
    • Added an index file to export all API infrastructure components.
  • packages/agentflow/src/infrastructure/api/nodes.ts
    • Added API functions for interacting with nodes on the Flowise backend.
  • packages/agentflow/src/infrastructure/store/AgentflowContext.tsx
    • Added the context and reducer for managing the global state of the Agentflow canvas.
  • packages/agentflow/src/infrastructure/store/ApiContext.tsx
    • Added the context for providing API client instances throughout the application.
  • packages/agentflow/src/infrastructure/store/ConfigContext.tsx
    • Added the context for managing global configuration settings like theme and read-only mode.
  • packages/agentflow/src/infrastructure/store/index.ts
    • Added an index file to export all store infrastructure components.
  • packages/agentflow/src/infrastructure/store/useFlowInstance.ts
    • Added a hook for interacting with the ReactFlow instance and managing flow data.
  • packages/agentflow/src/useAgentflow.ts
    • Added the primary public hook for programmatic access to the Agentflow instance.
  • packages/agentflow/tsconfig.json
    • Added the TypeScript configuration file for the @flowise/agentflow package.
  • packages/agentflow/vite.config.ts
    • Added the Vite build configuration for the @flowise/agentflow package, including library build settings and CSS handling.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces the new @flowise/agentflow package, which is a significant and well-structured addition. The modular architecture laid out in ARCHITECTURE.md is excellent and will greatly help with maintainability. The code is generally of high quality, with good use of modern React features and TypeScript. I've identified a few issues, including some critical dependency problems in package.json, some minor bugs, and opportunities for code deduplication and documentation improvements. Overall, this is a great foundation for the new package.

Copy link
Collaborator

@ginna-baker ginna-baker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not an approver for this repo, but approved if I were. Looks good

@jocelynlin-wd jocelynlin-wd merged commit 4b1b8ba into main Feb 12, 2026
7 checks passed
@jocelynlin-wd jocelynlin-wd deleted the feat/agentflow-sdk-init branch February 12, 2026 00:31
vellanki-santhosh pushed a commit to vellanki-santhosh/Flowise that referenced this pull request Feb 17, 2026
…kage (FlowiseAI#5733)

* feat(agentflow): add initial implementation of @flowise/agentflow package

- Introduced core files including package.json, README.md, and architecture documentation.
- Added ESLint, Prettier, and TypeScript configurations for code quality and formatting.
- Implemented basic structure with components, hooks, and utilities for building AI agent workflows.
- Included example usage and development setup in the examples directory.
- Established dependency management with pnpm-lock.yaml updates.

This commit lays the groundwork for the agentflow package, enabling further development of features and functionalities.

* address gemini review comments and fix format failure from ci/cd

* lint issue from ci/cd

* refactor to remove duplicates in agentflow, lint update

* Track package-lock.json for agentflow examples

* fix whitespace in examples lock file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants