Implementation:FlowiseAI Flowise ToolsView
| Knowledge Sources | |
|---|---|
| Domains | Tools, UI Views |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Tools is a React page component that provides the main tools management view with CRUD operations, search, pagination, card/list display toggle, and JSON file import functionality.
Description
This component renders the primary tools listing page wrapped in a MainCard. It fetches tools data via the toolsApi with pagination support and displays them in either a card grid (using ItemCard) or a list table (using ToolsTable), with the display preference persisted in localStorage. The view includes a ViewHeader with search functionality, a ToggleButtonGroup for switching between card and list views, a Load button for importing tools from JSON files, and a Create button for adding new tools. RBAC permissions are enforced via PermissionButton and StyledPermissionButton components. The ToolDialog is used for add, edit, and import operations. An ErrorBoundary handles error states, and skeleton loaders are shown during data fetching.
Usage
Use this component as the route destination for the Tools management section of the Flowise UI. It provides the full tools lifecycle management interface including creation, editing, search, pagination, and JSON import.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/tools/index.jsx
- Lines: 1-284
Signature
const Tools = () => { ... }
Import
import Tools from '@/views/tools'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| N/A | N/A | N/A | This is a top-level page component with no props; it manages its own state and API calls |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | MainCard | Renders the full tools management view with search, display toggle, pagination, card/list views, create/load actions, and the ToolDialog |
Usage Examples
Basic Usage
// In React Router configuration
import Tools from '@/views/tools'
<Route path="/tools" element={<Tools />} />