This document describes the AI-assisted variable extraction and smart value generation system available in Pro/Context mode workspaces. This system enables users to:
For information about the broader variable management system (global variables, predefined variables, temporary variables), see Variable Management System. For details on Pro mode workspace architecture, see Pro/Context Mode Workspaces.
The variable extraction and smart generation system provides two key capabilities in Pro mode:
Variable Extraction: Users can select text in the prompt input and automatically convert it to a variable placeholder (e.g., {{variableName}}), with the selected text becoming the variable's initial value. This is available only in ContextUserWorkspace (Pro Variable mode).
Smart Value Generation: Users can invoke an LLM to analyze the prompt context and automatically generate realistic test values for all temporary variables. The system presents these suggestions in a preview dialog before applying them.
Both features leverage the evaluation model configured at the application level and integrate seamlessly with the temporary variables system.
Diagram: Variable Extraction Data Flow
The extraction flow begins when a user selects text in the prompt input field. The InputPanelUI component receives the selection and triggers the extraction through the useVariableAwareInputBridge composable. The composable generates a unique variable name, replaces the selected text with a placeholder (e.g., {{city}}), and emits the extraction event with the variable name, value, and type (global or temporary). The workspace component handles the event and adds the variable to the appropriate store.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue84-94 packages/ui/src/components/context-mode/ContextUserWorkspace.vue511
The system supports two extraction modes:
| Mode | Description | User Action | Output |
|---|---|---|---|
| Manual Selection | User selects text and clicks extract | Text selection + button click | Variable placeholder replaces text, extracted value becomes variable value |
| AI-Assisted Detection | System analyzes prompt and suggests variables | Click "Analyze" or "Extract Variables" button | List of detected variables with suggested names and values |
Manual selection is the primary mode in the current implementation. The InputPanelUI component exposes the extraction interface through several props:
:enable-variable-extraction - Enables the feature:show-extract-button - Shows the extract button:extracting - Shows loading state during AI extraction@extract-variables - Event when extract is triggered@variable-extracted - Event with extracted variable data@add-missing-variable - Event when adding a detected variableSources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue66-94
Diagram: Smart Value Generation Flow
The smart generation flow is orchestrated by the useSmartVariableValueGeneration composable. When the user clicks "Generate Values", the composable constructs a specialized prompt containing the original prompt text, variable names, current values (if any), and their sources (global/temporary/predefined). This prompt is sent to the configured evaluation model, which returns JSON-formatted suggestions for each variable. The results are displayed in a preview dialog where users can review before applying.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue309-327
The generation process consists of several stages:
Diagram: Smart Generation Sequence
The sequence diagram illustrates the complete lifecycle of a value generation request. The composable maintains loading state during the LLM call and ensures proper error handling. The preview dialog acts as a staging area, allowing users to inspect AI-generated values before committing them to the variable store.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue104-327
The generation prompt sent to the LLM follows a structured format designed to elicit contextually appropriate values:
The composable expects the LLM to return a JSON object mapping variable names to suggested values. The parsing logic handles errors gracefully and reports parsing failures to the user.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue309-327
The InputPanelUI component serves as the primary interface for variable extraction in Pro Variable mode:
Diagram: InputPanelUI Variable Extraction Interface
The workspace binds extraction state and handlers to the input panel, creating a seamless extraction experience. The inputPanelVariableData object provides reactive data about extracted and missing variables, which the input panel uses to show inline hints and warnings.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue66-94
The TemporaryVariablesPanel component displays temporary variables and provides the smart generation interface:
Diagram: TemporaryVariablesPanel Integration
The panel receives a manager prop of type TestVariableManager, which encapsulates all variable operations. The smart generation composable reads from this manager to get variable names and current values, and writes back through the manager's applyValue method to update variables.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue1-9
The preview dialog presents generated values in a table format before applying them:
| Column | Content |
|---|---|
| Variable Name | Variable identifier (e.g., city) |
| Current Value | Existing value, if any |
| Generated Value | AI-suggested value |
| Action | Checkbox or button to select/deselect |
The dialog supports:
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue84-88
This composable provides the core extraction logic for text selection:
Location: packages/ui/src/composables/variable/useVariableAwareInputBridge
Key Methods:
extractSelectedTextAsVariable() - Converts selection to variable placeholderdetectMissingVariables() - Analyzes prompt for undefined variablesgetExtractedVariables() - Returns list of extracted variablesgetMissingVariables() - Returns list of detected but undefined variablesThe composable maintains internal state for extracted and missing variables and provides reactive refs that can be bound to the input panel.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue511
This composable orchestrates the AI-based value generation flow:
Location: packages/ui/src/composables/variable/useSmartVariableValueGeneration
Parameters:
Returned State:
The composable builds a specialized prompt that includes the full context, sends it to the evaluation model, parses the JSON response, and manages the preview dialog state.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue309-327
This composable provides a unified interface for managing variables in test contexts:
Location: packages/ui/src/composables/variable/useTestVariableManager
Responsibilities:
Key Methods:
sortedVariables - Computed list of all variables with metadatagetVariableSource(name) - Returns 'global', 'temporary', or 'predefined'getVariableDisplayValue(name) - Returns the current value for displayhandleVariableValueChange(name, value) - Updates a variable valuegetVariableValues() - Returns all variables as a flat objectsetVariableValues(values) - Batch update multiple variablesSources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue278-308
Diagram: Variable Extraction Event Flow
The event chain ensures proper separation of concerns: the input panel handles UI interactions, the composable provides extraction logic, and the workspace component manages state persistence.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue615-623
The smart generation process follows a simple state machine:
Diagram: Smart Generation State Machine
The state machine ensures proper loading states and error handling throughout the generation process. The isGenerating flag prevents concurrent generation requests, and the showPreviewDialog flag controls the preview UI.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue309-327
Full Integration: Variable extraction and smart generation are both available.
The workspace sets up the complete pipeline:
useTemporaryVariables for session-scoped variablesuseVariableAwareInputBridge for extractionInputPanelUIuseTestVariableManager to ContextUserTestPanelSources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue66-94 packages/ui/src/components/context-mode/ContextUserWorkspace.vue682-684
Partial Integration: Only smart generation is available (no text extraction).
The system/conversation mode workspace uses ConversationTestPanel which includes TemporaryVariablesPanel but without the :show-generate-values prop enabled. This is because the multi-message conversation context makes text-selection-based extraction ambiguous.
Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue160-173
Not Available: Neither extraction nor smart generation are available in Basic mode.
Basic mode workspaces (BasicSystemWorkspace, BasicUserWorkspace) do not support the temporary variables system or AI-assisted features. These are exclusively Pro mode capabilities.
Smart generation requires an evaluation model to be configured:
Diagram: Evaluation Model Configuration Flow
The system uses a fallback strategy: if no dedicated evaluation model is configured, it uses the optimization model. This ensures smart generation always has a model available.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue829-832
The smart generation system depends on the following services from AppServices:
| Service | Usage |
|---|---|
| LLMService | Sends generation prompts to the evaluation model |
| ModelManager | Retrieves model configuration and validates model availability |
| PreferenceService | (Indirect) Stores generated values through variable managers |
The services are injected at the workspace level and passed down to composables as needed.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue156
The smart generation composable handles several error scenarios:
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue309-327
The extraction system handles:
city, city_2, etc.){{...}}Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue511
Smart generation involves an LLM API call, which can take several seconds. The UI handles this through:
isGenerating flag controls button spinner and panel overlayWhile there is no hard limit on variable count, generation quality may degrade with large numbers of variables. The system performs best with:
The preview dialog stores all generated values in memory before applying. For very large prompts with many long-form variables, this could consume significant memory. The implementation uses standard JavaScript objects with no special optimization.
Refresh this wiki