React component library containing UI components for AI engine
npm install text-structor-react-uiA React component library for building AI-powered template editors and workflow managers. This library provides a visual interface for creating JSON templates compatible with ai-text-structor - a powerful asynchronous framework for orchestrating Large Language Model (LLM) workflows.
The generated templates can be used directly with ai-text-structor to:
- Define structured data collection fields
- Create complex workflow steps
- Configure LLM prompts and explanations
- Manage dependencies between steps
``bash`
npm install text-structor-react-ui
The context provider that manages template state:
`tsx
import { TemplateProvider } from 'text-structor-react-ui'
function App() {
return (
data: {},
workflow: {}
}}
>
)
}
`
Component for managing data fields:
`tsx
import { DataEditor } from 'text-structor-react-ui'
function TemplateSection() {
return (
Supports field types:
- String
- Numeric
- List
- Object (with nested attributes)
$3
Editor for creating workflow steps:
`tsx
import { WorkflowEditor } from 'text-structor-react-ui'function WorkflowSection() {
return (
Workflow Steps
)
}
`Features:
- Step dependencies
- Data field associations
- Prompt/Explanation modes
- Validation
$3
Visual graph representation of workflow steps:
`tsx
import { WorkflowGraph } from 'text-structor-react-ui'function GraphSection() {
return (
Workflow Visualization
)
}
`Features:
- Interactive node graph
- Dependency visualization
- Automatic layout
- Pan and zoom controls
$3
JSON visualization component:
`tsx
import { JsonPreview } from 'text-structor-react-ui'function PreviewSection() {
return (
Template Preview
)
}
`Features:
- Pretty-printed JSON
- Copy to clipboard
- Download as file
$3
`tsx
import {
TemplateProvider,
TemplateBuilder
} from 'text-structor-react-ui'function App() {
return (
AI Template Builder
)
}
`Template Structure
$3
`typescript
{
data: {
[fieldId: string]: {
name: string
description: string
prompt: string
type: 'string' | 'numeric' | 'list' | 'object'
attributes?: Record
}
}
}
`$3
`typescript
{
workflow: {
[stepId: string]: {
name: string
description: string
prompt?: string
explain?: string
requires?: string[]
data?: string[]
}
}
}
`Validation
Built-in validation includes:
- Data field integrity
- Workflow dependencies
- Circular dependency detection
- Required field validation
Error types:
-
data: Data field validation errors
- workflow: Workflow step validation errors
- dependency`: Dependency graph validation errorsContributions are welcome! Please feel free to submit a Pull Request.