A 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-engine - a powerful asynchronous framework for orchestrating Large Language Model (LLM) workflows.
The generated templates can be used directly with ai-engine to:
- Define structured data collection fields
- Create complex workflow steps
- Configure LLM prompts and explanations
- Manage dependencies between steps
npm install ai-engine-react
The context provider that manages template state:
import { TemplateProvider } from 'ai-engine-react'
function App() {
return (
<TemplateProvider
initialTemplate={{
data: {},
workflow: {}
}}
>
<YourComponents />
</TemplateProvider>
)
}
Component for managing data fields:
import { DataEditor } from 'ai-engine-react'
function TemplateSection() {
return (
<div>
<h1>Template Editor</h1>
<DataEditor />
</div>
)
}
Supports field types:
- String
- Numeric
- List
- Object (with nested attributes)
Editor for creating workflow steps:
import { WorkflowEditor } from 'ai-engine-react'
function WorkflowSection() {
return (
<div>
<h1>Workflow Steps</h1>
<WorkflowEditor />
</div>
)
}
Features:
- Step dependencies
- Data field associations
- Prompt/Explanation modes
- Validation
Visual graph representation of workflow steps:
import { WorkflowGraph } from 'ai-engine-react'
function GraphSection() {
return (
<div>
<h1>Workflow Visualization</h1>
<WorkflowGraph />
</div>
)
}
Features:
- Interactive node graph
- Dependency visualization
- Automatic layout
- Pan and zoom controls
JSON visualization component:
import { JsonPreview } from 'ai-engine-react'
function PreviewSection() {
return (
<div>
<h1>Template Preview</h1>
<JsonPreview />
</div>
)
}
Features:
- Pretty-printed JSON
- Copy to clipboard
- Download as file
import {
TemplateProvider,
TemplateBuilder
} from 'ai-engine-react'
function App() {
return (
<TemplateProvider>
<div className="container mx-auto p-4">
<h1>AI Template Builder</h1>
<TemplateBuilder />
</div>
</TemplateProvider>
)
}
{
data: {
[fieldId: string]: {
name: string
description: string
prompt: string
type: 'string' | 'numeric' | 'list' | 'object'
attributes?: Record<string, any>
}
}
}
{
workflow: {
[stepId: string]: {
name: string
description: string
prompt?: string
explain?: string
requires?: string[]
data?: string[]
}
}
}
Built-in validation includes:
- Data field integrity
- Workflow dependencies
- Circular dependency detection
- Required field validation
Error types:
data
: Data field validation errorsworkflow
: Workflow step validation errorsdependency
: Dependency graph validation errors
Contributions are welcome! Please feel free to submit a Pull Request.