text-structor-react-ui

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-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

Installation

``bash
npm install text-structor-react-ui
`

Core Components

$3

The context provider that manages template state:

`tsx
import { TemplateProvider } from 'text-structor-react-ui'

function App() {
return (
initialTemplate={{
data: {},
workflow: {}
}}
>


)
}
`

$3

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 (



)
}
`

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 (



)
}
`

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 (



)
}
`

Features:
- Pretty-printed JSON
- Copy to clipboard
- Download as file

$3

`tsx
import {
TemplateProvider,
TemplateBuilder
} from 'text-structor-react-ui'

function App() {
return (





)
}
`

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 errors

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.