AI Structured Prompt
AI
Authoring
Block
Scaffolded input component with required fields, sections, and progress tracking. Guides users through creating well-formed prompts.
Card Variant
Full card with sections, progress bar, and validation
Blog Post Generator
Fill in the structure to generate a targeted blog post
0%
*
*
*
Fill required fields to continue
Inline Variant
Compact layout without sections
Quick Query
*
0% complete
Compact Variant
Horizontal label-field layout
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Title of the structured prompt |
description | string | — | Description or instructions |
sections* | PromptSection[] | — | Sections containing prompt fields |
variant | 'card' | 'inline' | 'compact' | 'card' | Display variant |
onSubmit | (values: Record<string, string>) => void | — | Callback when prompt is submitted |
onFieldChange | (fieldId: string, value: string) => void | — | Callback when a field changes |
loading | boolean | false | Whether submission is loading |
submitLabel | string | 'Generate' | Submit button text |
Usage
Import and examples
import { AIStructuredPrompt } from '@/blocks/ai-conversation/ai-structured-prompt'
<AIStructuredPrompt title="Blog Post Generator" sections={[ { id: 'context', title: 'Context', fields: [ { id: 'role', label: 'AI Role', type: 'text', required: true }, { id: 'audience', label: 'Audience', type: 'select', options: ['Beginners', 'Advanced'] }, ], }, ]} onSubmit={(values) => console.log(values)}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Five field types: Text, textarea, select, radio, and tags inputs
- Required field validation: Progress bar tracks required field completion
- Collapsible sections: Optional section collapsing for complex prompts
- Tag management: Add/remove tags with keyboard support
- Three variants: Card, inline, and compact display modes
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Labels associated with form fieldsRequired fields marked with visual indicatorKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between fields |
| Enter | Submit form or add tag |
| Space | Toggle radio options |
Notes
- Progress bar provides completion feedback
- Submit disabled until all required fields are filled