Implementation:Infiniflow Ragflow AgentTemplates Page
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Agent_System |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Page for browsing and selecting pre-built agent workflow templates with category sidebar.
Description
This page component displays a gallery of pre-built agent workflow templates that users can select to create new agents. It features a breadcrumb navigation (Agent > Create Graph), a `SideBar` component for filtering templates by category (Recommended, Agent, Customer Support, Marketing, Consumer App, Pipeline, Other), a card grid rendered via `TemplateCard` components, and a `CreateAgentDialog` modal that appears when a template is selected to collect the new agent's name before creation. The template list is fetched via `useFetchAgentTemplates` and filtered client-side based on the selected sidebar category using `canvas_type` matching. On successful agent creation via `useSetAgent`, the user is navigated to the new agent's canvas page, with special routing for DataflowCanvas category agents.
Usage
Accessed as the agent creation flow entry point when users want to create a new agent from a pre-built template rather than starting from scratch. Typically reached via a "Create from Template" action on the agents list page.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/agents/agent-templates.tsx
- Lines: 1-147
Signature
export default function AgentTemplates(): JSX.Element;
Import
import AgentTemplates from '@/pages/agents/agent-templates';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | N/A | N/A | This page component takes no props; it fetches template data internally via useFetchAgentTemplates. |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | JSX.Element | Full page layout with breadcrumb header, category sidebar, template card grid, and create agent dialog. |
Usage Examples
// In route configuration (UmiJS routes)
{
path: '/agents/templates',
component: '@/pages/agents/agent-templates',
}
// The page is typically navigated to from the agents list
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
function AgentsList() {
const { navigateToAgents } = useNavigatePage();
return <Button onClick={() => navigate('/agents/templates')}>Create from Template</Button>;
}