Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com> Signed-off-by: -LAN- <laipz8200@outlook.com> Signed-off-by: xhe <xw897002528@gmail.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: takatost <takatost@gmail.com> Co-authored-by: kurokobo <kuro664@gmail.com> Co-authored-by: Novice Lee <novicelee@NoviPro.local> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: AkaraChen <akarachen@outlook.com> Co-authored-by: Yi <yxiaoisme@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com> Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com> Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: 非法操作 <hjlarry@163.com> Co-authored-by: Novice <857526207@qq.com> Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com> Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com> Co-authored-by: eux <euxuuu@gmail.com> Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com> Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com> Co-authored-by: lotsik <lotsik@mail.ru> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com> Co-authored-by: CN-P5 <heibai2006@gmail.com> Co-authored-by: CN-P5 <heibai2006@qq.com> Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com> Co-authored-by: yihong <zouzou0208@gmail.com> Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com> Co-authored-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Boris Feld <lothiraldan@gmail.com> Co-authored-by: mbo <himabo@gmail.com> Co-authored-by: mabo <mabo@aeyes.ai> Co-authored-by: Warren Chen <warren.chen830@gmail.com> Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com> Co-authored-by: jiandanfeng <chenjh3@wangsu.com> Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com> Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com> Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com> Co-authored-by: Xu Song <xusong.vip@gmail.com> Co-authored-by: rayshaw001 <396301947@163.com> Co-authored-by: Ding Jiatong <dingjiatong@gmail.com> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: JasonVV <jasonwangiii@outlook.com> Co-authored-by: le0zh <newlight@qq.com> Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com> Co-authored-by: k-zaku <zaku99@outlook.jp> Co-authored-by: luckylhb90 <luckylhb90@gmail.com> Co-authored-by: hobo.l <hobo.l@binance.com> Co-authored-by: jiangbo721 <365065261@qq.com> Co-authored-by: 刘江波 <jiangbo721@163.com> Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com> Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com> Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com> Co-authored-by: lowell <lowell.hu@zkteco.in> Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com> Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com> Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com> Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com> Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com> Co-authored-by: Jason <ggbbddjm@gmail.com> Co-authored-by: Xin Zhang <sjhpzx@gmail.com> Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com> Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com> Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com> Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com> Co-authored-by: Yingchun Lai <laiyingchun@apache.org> Co-authored-by: Hash Brown <hi@xzd.me> Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com> Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com> Co-authored-by: aplio <ryo.091219@gmail.com> Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com> Co-authored-by: Nam Vu <zuzoovn@gmail.com> Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com> Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com> Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com> Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com> Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp> Co-authored-by: HQidea <HQidea@users.noreply.github.com> Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com> Co-authored-by: xhe <xw897002528@gmail.com> Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com> Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com> Co-authored-by: engchina <12236799+engchina@users.noreply.github.com> Co-authored-by: engchina <atjapan2015@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: Kemal <kemalmeler@outlook.com> Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com> Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com> Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com> Co-authored-by: steven <sunzwj@digitalchina.com> Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com> Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com> Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com> Co-authored-by: 胡春东 <gycm520@gmail.com> Co-authored-by: Junjie.M <118170653@qq.com> Co-authored-by: MuYu <mr.muzea@gmail.com> Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com> Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com> Co-authored-by: Fei He <droxer.he@gmail.com> Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com> Co-authored-by: Yuanbo Li <ybalbert@amazon.com> Co-authored-by: douxc <7553076+douxc@users.noreply.github.com> Co-authored-by: liuzhenghua <1090179900@qq.com> Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com> Co-authored-by: Your Name <you@example.com> Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com> Co-authored-by: AugNSo <song.tiankai@icloud.com> Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com> Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com> Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com> Co-authored-by: Hundredwz <1808096180@qq.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
2026-05-06 02:18:08 +08:00 · 2025-02-17 17:05:13 +08:00
parent 222df44d21
commit 403e2d58b9
3272 changed files with 66339 additions and 281594 deletions
--- a/web/app/components/workflow/nodes/agent/components/model-bar.tsx
+++ b/web/app/components/workflow/nodes/agent/components/model-bar.tsx
@ -0,0 +1,75 @@
+import Tooltip from '@/app/components/base/tooltip'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import Indicator from '@/app/components/header/indicator'
+import { type FC, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export type ModelBarProps = {
+  provider: string
+  model: string
+} | {}
+
+const useAllModel = () => {
+  const { data: textGeneration } = useModelList(ModelTypeEnum.textGeneration)
+  const { data: moderation } = useModelList(ModelTypeEnum.moderation)
+  const { data: rerank } = useModelList(ModelTypeEnum.rerank)
+  const { data: speech2text } = useModelList(ModelTypeEnum.speech2text)
+  const { data: textEmbedding } = useModelList(ModelTypeEnum.textEmbedding)
+  const { data: tts } = useModelList(ModelTypeEnum.tts)
+  const models = useMemo(() => {
+    return textGeneration
+      .concat(moderation)
+      .concat(rerank)
+      .concat(speech2text)
+      .concat(textEmbedding)
+      .concat(tts)
+  }, [textGeneration, moderation, rerank, speech2text, textEmbedding, tts])
+  if (!textGeneration || !moderation || !rerank || !speech2text || !textEmbedding || !tts)
+    return undefined
+  return models
+}
+
+export const ModelBar: FC<ModelBarProps> = (props) => {
+  const { t } = useTranslation()
+  const modelList = useAllModel()
+  if (!('provider' in props)) {
+    return <Tooltip
+      popupContent={t('workflow.nodes.agent.modelNotSelected')}
+      triggerMethod='hover'
+    >
+      <div className='relative'>
+        <ModelSelector
+          modelList={[]}
+          triggerClassName='bg-workflow-block-parma-bg !h-6 !rounded-md'
+          defaultModel={undefined}
+          showDeprecatedWarnIcon={false}
+          readonly
+          deprecatedClassName='opacity-50'
+        />
+        <Indicator color={'red'} className='absolute -right-0.5 -top-0.5' />
+      </div>
+    </Tooltip>
+  }
+  const modelInstalled = modelList?.some(
+    provider => provider.provider === props.provider && provider.models.some(model => model.model === props.model))
+  const showWarn = modelList && !modelInstalled
+  return modelList && <Tooltip
+    popupContent={t('workflow.nodes.agent.modelNotInstallTooltip')}
+    triggerMethod='hover'
+    disabled={!modelList || modelInstalled}
+  >
+    <div className='relative'>
+      <ModelSelector
+        modelList={modelList}
+        triggerClassName='bg-workflow-block-parma-bg !h-6 !rounded-md'
+        defaultModel={props}
+        showDeprecatedWarnIcon={false}
+        readonly
+        deprecatedClassName='opacity-50'
+      />
+      {showWarn && <Indicator color={'red'} className='absolute -right-0.5 -top-0.5' />}
+    </div>
+  </Tooltip>
+}
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@ -0,0 +1,81 @@
+import Tooltip from '@/app/components/base/tooltip'
+import Indicator from '@/app/components/header/indicator'
+import classNames from '@/utils/classnames'
+import { memo, useMemo, useRef, useState } from 'react'
+import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { getIconFromMarketPlace } from '@/utils/get-icon'
+import { useTranslation } from 'react-i18next'
+import { Group } from '@/app/components/base/icons/src/vender/other'
+
+type Status = 'not-installed' | 'not-authorized' | undefined
+
+export type ToolIconProps = {
+  providerName: string
+}
+
+export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const isDataReady = !!buildInTools && !!customTools && !!workflowTools
+  const currentProvider = useMemo(() => {
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    return mergedTools.find((toolWithProvider) => {
+      return toolWithProvider.name === providerName
+    })
+  }, [buildInTools, customTools, providerName, workflowTools])
+  const providerNameParts = providerName.split('/')
+  const author = providerNameParts[0]
+  const name = providerNameParts[1]
+  const icon = useMemo(() => {
+    if (currentProvider) return currentProvider.icon as string
+    const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
+    return iconFromMarketPlace
+  }, [author, currentProvider, name])
+  const status: Status = useMemo(() => {
+    if (!isDataReady) return undefined
+    if (!currentProvider) return 'not-installed'
+    if (currentProvider.is_team_authorization === false) return 'not-authorized'
+    return undefined
+  }, [currentProvider, isDataReady])
+  const indicator = status === 'not-installed' ? 'red' : status === 'not-authorized' ? 'yellow' : undefined
+  const notSuccess = (['not-installed', 'not-authorized'] as Array<Status>).includes(status)
+  const { t } = useTranslation()
+  const tooltip = useMemo(() => {
+    if (!notSuccess) return undefined
+    if (status === 'not-installed') return t('workflow.nodes.agent.toolNotInstallTooltip', { tool: name })
+    if (status === 'not-authorized') return t('workflow.nodes.agent.toolNotAuthorizedTooltip', { tool: name })
+    throw new Error('Unknown status')
+  }, [name, notSuccess, status, t])
+  const [iconFetchError, setIconFetchError] = useState(false)
+  return <Tooltip
+    triggerMethod='hover'
+    popupContent={tooltip}
+    disabled={!notSuccess}
+  >
+    <div
+      className={classNames(
+        'size-5 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge relative flex items-center justify-center rounded-[6px]',
+      )}
+      ref={containerRef}
+    >
+      {!iconFetchError
+        // eslint-disable-next-line @next/next/no-img-element
+        ? <img
+          src={icon}
+          alt='tool icon'
+          className={classNames(
+            'w-full h-full size-3.5 object-cover',
+            notSuccess && 'opacity-50',
+          )}
+          onError={() => setIconFetchError(true)}
+        />
+        : <Group className="w-3 h-3 opacity-35" />
+      }
+      {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
+    </div>
+  </Tooltip>
+})
+
+ToolIcon.displayName = 'ToolIcon'
--- a/web/app/components/workflow/nodes/agent/default.ts
+++ b/web/app/components/workflow/nodes/agent/default.ts
@ -0,0 +1,143 @@
+import type { StrategyDetail, StrategyPluginDetail } from '@/app/components/plugins/types'
+import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/blocks'
+import type { NodeDefault } from '../../types'
+import type { AgentNodeType } from './types'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { renderI18nObject } from '@/hooks/use-i18n'
+
+const nodeDefault: NodeDefault<AgentNodeType> = {
+  defaultValue: {
+  },
+  getAvailablePrevNodes(isChatMode) {
+    return isChatMode
+      ? ALL_CHAT_AVAILABLE_BLOCKS
+      : ALL_COMPLETION_AVAILABLE_BLOCKS
+  },
+  getAvailableNextNodes(isChatMode) {
+    return isChatMode
+      ? ALL_CHAT_AVAILABLE_BLOCKS
+      : ALL_COMPLETION_AVAILABLE_BLOCKS
+  },
+  checkValid(payload, t, moreDataForCheckValid: {
+    strategyProvider?: StrategyPluginDetail,
+    strategy?: StrategyDetail
+    language: string
+    isReadyForCheckValid: boolean
+  }) {
+    const { strategy, language, isReadyForCheckValid } = moreDataForCheckValid
+    if (!isReadyForCheckValid) {
+      return {
+        isValid: true,
+        errorMessage: '',
+      }
+    }
+    if (!strategy) {
+      return {
+        isValid: false,
+        errorMessage: t('workflow.nodes.agent.checkList.strategyNotSelected'),
+      }
+    }
+    for (const param of strategy.parameters) {
+      // single tool
+      if (param.required && param.type === FormTypeEnum.toolSelector) {
+        // no value
+        const toolValue = payload.agent_parameters?.[param.name]?.value
+        if (!toolValue) {
+          return {
+            isValid: false,
+            errorMessage: t('workflow.errorMsg.fieldRequired', { field: renderI18nObject(param.label, language) }),
+          }
+        }
+        // not enabled
+        else if (!toolValue.enabled) {
+          return {
+            isValid: false,
+            errorMessage: t('workflow.errorMsg.noValidTool', { field: renderI18nObject(param.label, language) }),
+          }
+        }
+        // check form of tool
+        else {
+          const schemas = toolValue.schemas || []
+          const userSettings = toolValue.settings
+          const reasoningConfig = toolValue.parameters
+          schemas.forEach((schema: any) => {
+            if (schema?.required) {
+              if (schema.form === 'form' && !userSettings[schema.name]?.value) {
+                return {
+                  isValid: false,
+                  errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
+                }
+              }
+              if (schema.form === 'llm' && reasoningConfig[schema.name].auto === 0 && !userSettings[schema.name]?.value) {
+                return {
+                  isValid: false,
+                  errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
+                }
+              }
+            }
+          })
+        }
+      }
+      // multiple tools
+      if (param.required && param.type === FormTypeEnum.multiToolSelector) {
+        const tools = payload.agent_parameters?.[param.name]?.value || []
+        // no value
+        if (!tools.length) {
+          return {
+            isValid: false,
+            errorMessage: t('workflow.errorMsg.fieldRequired', { field: renderI18nObject(param.label, language) }),
+          }
+        }
+        // not enabled
+        else if (tools.every((tool: any) => !tool.enabled)) {
+          return {
+            isValid: false,
+            errorMessage: t('workflow.errorMsg.noValidTool', { field: renderI18nObject(param.label, language) }),
+          }
+        }
+        // check form of tools
+        else {
+          let validState = {
+            isValid: true,
+            errorMessage: '',
+          }
+          for (const tool of tools) {
+            const schemas = tool.schemas || []
+            const userSettings = tool.settings
+            const reasoningConfig = tool.parameters
+            schemas.forEach((schema: any) => {
+              if (schema?.required) {
+                if (schema.form === 'form' && !userSettings[schema.name]?.value) {
+                  return validState = {
+                    isValid: false,
+                    errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
+                  }
+                }
+                if (schema.form === 'llm' && reasoningConfig[schema.name]?.auto === 0 && !reasoningConfig[schema.name]?.value) {
+                  return validState = {
+                    isValid: false,
+                    errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
+                  }
+                }
+              }
+            })
+          }
+          return validState
+        }
+      }
+      // common params
+      if (param.required && !payload.agent_parameters?.[param.name]?.value) {
+        return {
+          isValid: false,
+          errorMessage: t('workflow.errorMsg.fieldRequired', { field: renderI18nObject(param.label, language) }),
+        }
+      }
+    }
+    return {
+      isValid: true,
+      errorMessage: '',
+    }
+  },
+}
+
+export default nodeDefault
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@ -0,0 +1,113 @@
+import { type FC, memo, useMemo } from 'react'
+import type { NodeProps } from '../../types'
+import type { AgentNodeType } from './types'
+import { SettingItem } from '../_base/components/setting-item'
+import { Group, GroupLabel } from '../_base/components/group'
+import type { ToolIconProps } from './components/tool-icon'
+import { ToolIcon } from './components/tool-icon'
+import useConfig from './use-config'
+import { useTranslation } from 'react-i18next'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import { ModelBar } from './components/model-bar'
+
+const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
+  const { inputs, currentStrategy, currentStrategyStatus, pluginDetail } = useConfig(props.id, props.data)
+  const renderI18nObject = useRenderI18nObject()
+  const { t } = useTranslation()
+  const models = useMemo(() => {
+    if (!inputs) return []
+    // if selected, show in node
+    // if required and not selected, show empty selector
+    // if not required and not selected, show nothing
+    const models = currentStrategy?.parameters
+      .filter(param => param.type === FormTypeEnum.modelSelector)
+      .reduce((acc, param) => {
+        const item = inputs.agent_parameters?.[param.name]?.value
+        if (!item) {
+          if (param.required) {
+            acc.push({ param: param.name })
+            return acc
+          }
+          else { return acc }
+        }
+        acc.push({ provider: item.provider, model: item.model, param: param.name })
+        return acc
+      }, [] as Array<{ param: string } | { provider: string, model: string, param: string }>) || []
+    return models
+  }, [currentStrategy, inputs])
+
+  const tools = useMemo(() => {
+    const tools: Array<ToolIconProps> = []
+    currentStrategy?.parameters.forEach((param) => {
+      if (param.type === FormTypeEnum.toolSelector) {
+        const field = param.name
+        const value = inputs.agent_parameters?.[field]?.value
+        if (value) {
+          tools.push({
+            providerName: value.provider_name as any,
+          })
+        }
+      }
+      if (param.type === FormTypeEnum.multiToolSelector) {
+        const field = param.name
+        const value = inputs.agent_parameters?.[field]?.value
+        if (value) {
+          (value as unknown as any[]).forEach((item) => {
+            tools.push({
+              providerName: item.provider_name,
+            })
+          })
+        }
+      }
+    })
+    return tools
+  }, [currentStrategy?.parameters, inputs.agent_parameters])
+  return <div className='mb-1 px-3 py-1 space-y-1'>
+    {inputs.agent_strategy_name
+      ? <SettingItem
+        label={t('workflow.nodes.agent.strategy.shortLabel')}
+        status={
+          currentStrategyStatus && !currentStrategyStatus.isExistInPlugin
+            ? 'error'
+            : undefined
+        }
+        tooltip={
+          (currentStrategyStatus && !currentStrategyStatus.isExistInPlugin)
+            ? t('workflow.nodes.agent.strategyNotInstallTooltip', {
+              plugin: pluginDetail?.declaration.label
+                ? renderI18nObject(pluginDetail?.declaration.label)
+                : undefined,
+              strategy: inputs.agent_strategy_label,
+            })
+            : undefined
+        }
+      >
+        {inputs.agent_strategy_label}
+      </SettingItem>
+      : <SettingItem label={t('workflow.nodes.agent.strategyNotSet')} />}
+    {models.length > 0 && <Group
+      label={<GroupLabel className='mt-1'>
+        {t('workflow.nodes.agent.model')}
+      </GroupLabel>}
+    >
+      {models.map((model) => {
+        return <ModelBar
+          {...model}
+          key={model.param}
+        />
+      })}
+    </Group>}
+    {tools.length > 0 && <Group label={<GroupLabel className='mt-1'>
+      {t('workflow.nodes.agent.toolbox')}
+    </GroupLabel>}>
+      <div className='grid grid-cols-10 gap-0.5'>
+        {tools.map(tool => <ToolIcon {...tool} key={Math.random()} />)}
+      </div>
+    </Group>}
+  </div>
+}
+
+AgentNode.displayName = 'AgentNode'
+
+export default memo(AgentNode)
--- a/web/app/components/workflow/nodes/agent/panel.tsx
+++ b/web/app/components/workflow/nodes/agent/panel.tsx
@ -0,0 +1,156 @@
+import type { FC } from 'react'
+import { memo, useMemo } from 'react'
+import type { NodePanelProps } from '../../types'
+import type { AgentNodeType } from './types'
+import Field from '../_base/components/field'
+import { AgentStrategy } from '../_base/components/agent-strategy'
+import useConfig from './use-config'
+import { useTranslation } from 'react-i18next'
+import OutputVars, { VarItem } from '../_base/components/output-vars'
+import type { StrategyParamItem } from '@/app/components/plugins/types'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
+import ResultPanel from '@/app/components/workflow/run/result-panel'
+import formatTracing from '@/app/components/workflow/run/utils/format-log'
+import { useLogs } from '@/app/components/workflow/run/hooks'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
+import { toType } from '@/app/components/tools/utils/to-form-schema'
+import { useStore } from '../../store'
+
+const i18nPrefix = 'workflow.nodes.agent'
+
+export function strategyParamToCredientialForm(param: StrategyParamItem): CredentialFormSchema {
+  return {
+    ...param as any,
+    variable: param.name,
+    show_on: [],
+    type: toType(param.type),
+  }
+}
+
+const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
+  const {
+    inputs,
+    setInputs,
+    currentStrategy,
+    formData,
+    onFormChange,
+
+    availableNodesWithParent,
+    availableVars,
+
+    isShowSingleRun,
+    hideSingleRun,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runResult,
+    runInputData,
+    setRunInputData,
+    varInputs,
+    outputSchema,
+  } = useConfig(props.id, props.data)
+  const { t } = useTranslation()
+  const nodeInfo = useMemo(() => {
+    if (!runResult)
+      return
+    return formatTracing([runResult], t)[0]
+  }, [runResult, t])
+  const logsParams = useLogs()
+  const singleRunForms = (() => {
+    const forms: FormProps[] = []
+
+    if (varInputs.length > 0) {
+      forms.push(
+        {
+          label: t(`${i18nPrefix}.singleRun.variable`)!,
+          inputs: varInputs,
+          values: runInputData,
+          onChange: setRunInputData,
+        },
+      )
+    }
+
+    return forms
+  })()
+
+  const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
+
+  return <div className='my-2'>
+    <Field title={t('workflow.nodes.agent.strategy.label')} className='px-4 py-2' tooltip={t('workflow.nodes.agent.strategy.tooltip')} >
+      <AgentStrategy
+        strategy={inputs.agent_strategy_name ? {
+          agent_strategy_provider_name: inputs.agent_strategy_provider_name!,
+          agent_strategy_name: inputs.agent_strategy_name!,
+          agent_strategy_label: inputs.agent_strategy_label!,
+          agent_output_schema: inputs.output_schema,
+          plugin_unique_identifier: inputs.plugin_unique_identifier!,
+        } : undefined}
+        onStrategyChange={(strategy) => {
+          setInputs({
+            ...inputs,
+            agent_strategy_provider_name: strategy?.agent_strategy_provider_name,
+            agent_strategy_name: strategy?.agent_strategy_name,
+            agent_strategy_label: strategy?.agent_strategy_label,
+            output_schema: strategy!.agent_output_schema,
+            plugin_unique_identifier: strategy!.plugin_unique_identifier,
+            agent_parameters: {},
+          })
+          resetEditor(Date.now())
+        }}
+        formSchema={currentStrategy?.parameters?.map(strategyParamToCredientialForm) || []}
+        formValue={formData}
+        onFormValueChange={onFormChange}
+        nodeOutputVars={availableVars}
+        availableNodes={availableNodesWithParent}
+        nodeId={props.id}
+      />
+    </Field>
+    <div>
+      <OutputVars>
+        <VarItem
+          name='text'
+          type='String'
+          description={t(`${i18nPrefix}.outputVars.text`)}
+        />
+        <VarItem
+          name='files'
+          type='Array[File]'
+          description={t(`${i18nPrefix}.outputVars.files.title`)}
+        />
+        <VarItem
+          name='json'
+          type='Array[Object]'
+          description={t(`${i18nPrefix}.outputVars.json`)}
+        />
+        {outputSchema.map(({ name, type, description }) => (
+          <VarItem
+            key={name}
+            name={name}
+            type={type}
+            description={description}
+          />
+        ))}
+      </OutputVars>
+    </div>
+    {
+      isShowSingleRun && (
+        <BeforeRunForm
+          nodeName={inputs.title}
+          nodeType={inputs.type}
+          onHide={hideSingleRun}
+          forms={singleRunForms}
+          runningStatus={runningStatus}
+          onRun={handleRun}
+          onStop={handleStop}
+          {...logsParams}
+          result={<ResultPanel {...runResult} nodeInfo={nodeInfo} showSteps={false} {...logsParams} />}
+        />
+      )
+    }
+  </div>
+}
+
+AgentPanel.displayName = 'AgentPanel'
+
+export default memo(AgentPanel)
--- a/web/app/components/workflow/nodes/agent/types.ts
+++ b/web/app/components/workflow/nodes/agent/types.ts
@ -0,0 +1,11 @@
+import type { CommonNodeType } from '@/app/components/workflow/types'
+import type { ToolVarInputs } from '../tool/types'
+
+export type AgentNodeType = CommonNodeType & {
+  agent_strategy_provider_name?: string
+  agent_strategy_name?: string
+  agent_strategy_label?: string
+  agent_parameters?: ToolVarInputs
+  output_schema: Record<string, any>
+  plugin_unique_identifier?: string
+}
--- a/web/app/components/workflow/nodes/agent/use-config.ts
+++ b/web/app/components/workflow/nodes/agent/use-config.ts
@ -0,0 +1,208 @@
+import { useStrategyProviderDetail } from '@/service/use-strategy'
+import useNodeCrud from '../_base/hooks/use-node-crud'
+import useVarList from '../_base/hooks/use-var-list'
+import useOneStepRun from '../_base/hooks/use-one-step-run'
+import type { AgentNodeType } from './types'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
+import { useCallback, useMemo } from 'react'
+import { type ToolVarInputs, VarType } from '../tool/types'
+import { useCheckInstalled, useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
+import type { Var } from '../../types'
+import { VarType as VarKindType } from '../../types'
+import useAvailableVarList from '../_base/hooks/use-available-var-list'
+
+export type StrategyStatus = {
+  plugin: {
+    source: 'external' | 'marketplace'
+    installed: boolean
+  }
+  isExistInPlugin: boolean
+}
+
+export const useStrategyInfo = (
+  strategyProviderName?: string,
+  strategyName?: string,
+) => {
+  const strategyProvider = useStrategyProviderDetail(
+    strategyProviderName || '',
+    { retry: false },
+  )
+  const strategy = strategyProvider.data?.declaration.strategies.find(
+    str => str.identity.name === strategyName,
+  )
+  const marketplace = useFetchPluginsInMarketPlaceByIds([strategyProviderName!], {
+    retry: false,
+  })
+  const strategyStatus: StrategyStatus | undefined = useMemo(() => {
+    if (strategyProvider.isLoading || marketplace.isLoading)
+      return undefined
+    const strategyExist = !!strategy
+    const isPluginInstalled = !strategyProvider.isError
+    const isInMarketplace = !!marketplace.data?.data.plugins.at(0)
+    return {
+      plugin: {
+        source: isInMarketplace ? 'marketplace' : 'external',
+        installed: isPluginInstalled,
+      },
+      isExistInPlugin: strategyExist,
+    }
+  }, [strategy, marketplace, strategyProvider.isError, strategyProvider.isLoading])
+  const refetch = useCallback(() => {
+    strategyProvider.refetch()
+    marketplace.refetch()
+  }, [marketplace, strategyProvider])
+  return {
+    strategyProvider,
+    strategy,
+    strategyStatus,
+    refetch,
+  }
+}
+
+const useConfig = (id: string, payload: AgentNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const { inputs, setInputs } = useNodeCrud<AgentNodeType>(id, payload)
+  // variables
+  const { handleVarListChange, handleAddVariable } = useVarList<AgentNodeType>({
+    inputs,
+    setInputs,
+  })
+  const {
+    strategyStatus: currentStrategyStatus,
+    strategy: currentStrategy,
+    strategyProvider,
+  } = useStrategyInfo(
+    inputs.agent_strategy_provider_name,
+    inputs.agent_strategy_name,
+  )
+  const pluginId = inputs.agent_strategy_provider_name?.split('/').splice(0, 2).join('/')
+  const pluginDetail = useCheckInstalled({
+    pluginIds: [pluginId!],
+    enabled: Boolean(pluginId),
+  })
+  const formData = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(inputs.agent_parameters || {}).map(([key, value]) => {
+        return [key, value.value]
+      }),
+    )
+  }, [inputs.agent_parameters])
+  const onFormChange = (value: Record<string, any>) => {
+    const res: ToolVarInputs = {}
+    Object.entries(value).forEach(([key, val]) => {
+      res[key] = {
+        type: VarType.constant,
+        value: val,
+      }
+    })
+    setInputs({
+      ...inputs,
+      agent_parameters: res,
+    })
+  }
+
+  // vars
+
+  const filterMemoryPromptVar = useCallback((varPayload: Var) => {
+    return [
+      VarKindType.arrayObject,
+      VarKindType.array,
+      VarKindType.number,
+      VarKindType.string,
+      VarKindType.secret,
+      VarKindType.arrayString,
+      VarKindType.arrayNumber,
+      VarKindType.file,
+      VarKindType.arrayFile,
+    ].includes(varPayload.type)
+  }, [])
+
+  const {
+    availableVars,
+    availableNodesWithParent,
+  } = useAvailableVarList(id, {
+    onlyLeafNodeVar: false,
+    filterVar: filterMemoryPromptVar,
+  })
+
+  // single run
+  const {
+    isShowSingleRun,
+    showSingleRun,
+    hideSingleRun,
+    toVarInputs,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runInputData,
+    setRunInputData,
+    runResult,
+    getInputVars,
+  } = useOneStepRun<AgentNodeType>({
+    id,
+    data: inputs,
+    defaultRunInputData: {},
+  })
+  const allVarStrArr = (() => {
+    const arr = currentStrategy?.parameters.filter(item => item.type === 'string').map((item) => {
+      return formData[item.name]
+    }) || []
+
+    return arr
+  })()
+  const varInputs = (() => {
+    const vars = getInputVars(allVarStrArr)
+
+    return vars
+  })()
+
+  const outputSchema = useMemo(() => {
+    const res: any[] = []
+    if (!inputs.output_schema)
+      return []
+    Object.keys(inputs.output_schema.properties).forEach((outputKey) => {
+      const output = inputs.output_schema.properties[outputKey]
+      res.push({
+        name: outputKey,
+        type: output.type === 'array'
+          ? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
+          : `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
+        description: output.description,
+      })
+    })
+    return res
+  }, [inputs.output_schema])
+
+  return {
+    readOnly,
+    inputs,
+    setInputs,
+    handleVarListChange,
+    handleAddVariable,
+    currentStrategy,
+    formData,
+    onFormChange,
+    currentStrategyStatus,
+    strategyProvider: strategyProvider.data,
+    pluginDetail: pluginDetail.data?.plugins.at(0),
+    availableVars,
+    availableNodesWithParent,
+
+    isShowSingleRun,
+    showSingleRun,
+    hideSingleRun,
+    toVarInputs,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runInputData,
+    setRunInputData,
+    runResult,
+    varInputs,
+    outputSchema,
+  }
+}
+
+export default useConfig