Implementation:Infiniflow Ragflow CreateAgentForm Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Agent_System, Form_System
Last Updated	2026-02-12 06:00 GMT

Overview

Agent creation form with Zod validation, name field, and optional agent type selection.

Description

This component provides a form for creating new agents with Zod-based schema validation via `react-hook-form`. The form includes a required name field (via the shared `NameFormField` component), optional tag and description fields, and an optional agent type selector rendered as clickable cards (`FlowTypeCards`) that toggle between `FlowType.Agent` and pipeline types. The `FlowTypeCards` sub-component displays each flow type as a card with an icon (BrainCircuit for Agent, Route for Pipeline) and a check mark for the active selection. The form schema combines the shared `NameFormSchema` with optional tag, description, and type fields. On submission, the form calls the `onOk` callback and dismisses the modal via `hideModal` if the callback returns successfully. The `shouldChooseAgent` prop controls whether the type selection cards are displayed.

Usage

Embedded within the `CreateAgentDialog` modal component, used when creating a new agent either from scratch or from a template. The form collects the agent name and optionally the agent type before delegating creation to the parent component's callback.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/agents/create-agent-form.tsx
• Lines: 1-126

Signature

export type CreateAgentFormProps = IModalProps<any> & {
  shouldChooseAgent?: boolean;
};

export const FormSchema: z.ZodObject<{
  name: z.ZodString;
  tag: z.ZodOptional<z.ZodString>;
  description: z.ZodOptional<z.ZodString>;
  type: z.ZodOptional<z.ZodNativeEnum<typeof FlowType>>;
}>;

export type FormSchemaType = z.infer<typeof FormSchema>;

export function CreateAgentForm({
  hideModal,
  onOk,
  shouldChooseAgent,
}: CreateAgentFormProps): JSX.Element;

Import

import { CreateAgentForm, FormSchema, FormSchemaType } from '@/pages/agents/create-agent-form';

I/O Contract

Inputs

Name	Type	Required	Description
hideModal	() => void	No	Callback to close the parent modal dialog after successful submission.
onOk	(data: FormSchemaType) => Promise<any>	No	Async callback invoked on form submission with validated form data.
shouldChooseAgent	boolean	No	When true, displays the FlowType card selector for choosing between Agent and Pipeline types. Defaults to false.

Outputs

Name	Type	Description
JSX.Element	JSX.Element	A form element with Zod-validated fields, optional type selector cards, and a name input field.

Usage Examples

import { CreateAgentForm } from '@/pages/agents/create-agent-form';

function CreateAgentDialog({ visible, hideModal, onOk, loading }) {
  return (
    <Dialog open={visible} onOpenChange={hideModal}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create Agent</DialogTitle>
        </DialogHeader>
        <CreateAgentForm
          hideModal={hideModal}
          onOk={onOk}
          shouldChooseAgent={true}
        />
        <DialogFooter>
          <Button type="submit" form={TagRenameId} loading={loading}>
            Confirm
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment