Documentation

v1.0.0GitHub

Core AI Block

🔧

Variable Block

Dynamic parameters and configurable inputs for flexible prompts

Preview

🔧

Variable

Core

Name:projectName

Type:string

Required:true

Description:

The name of the project being developed

Default:"My Project"

Usage

When to use Variable blocks

Create reusable prompts with configurable parameters
Allow dynamic content injection based on user input
Define template variables for different contexts
Enable prompt customization without code changes
Support multiple data types (string, number, boolean, select)

Variable Types

stringText Input

Free-form text input for names, descriptions, content

numberNumeric Input

Numeric values for quantities, limits, percentages

booleanToggle

True/false values for feature flags, options

selectDropdown

Predefined options for frameworks, themes, styles

Best practices

Use descriptive variable names in camelCase
Provide clear descriptions for each variable
Set sensible default values when possible
Mark required variables appropriately
Group related variables logically
Use select type for limited, known options

Examples

Project Configuration Variables

projectName (string, required): "My E-commerce App"

framework (select): "Next.js" | "React" | "Vue" | "Angular"

useTypeScript (boolean): true

targetAudience (string): "Small business owners"

maxUsers (number): 10000

API Design Variables

apiVersion (select): "v1" | "v2" | "v3"

authMethod (select): "JWT" | "OAuth2" | "API Key"

enableRateLimit (boolean): true

maxRequestsPerMinute (number): 100

baseUrl (string): "https://api.example.com"

UI Theme Variables

primaryColor (string): "#3B82F6"

darkMode (boolean): false

borderRadius (select): "none" | "sm" | "md" | "lg" | "full"

fontFamily (select): "Inter" | "Roboto" | "Open Sans"

spacing (number): 8

API Reference

VariableContent Interface

namestringrequired

Variable identifier (camelCase recommended)

type'string' | 'number' | 'boolean' | 'select'required

Data type for the variable

requiredboolean

Whether the variable must have a value

defaultstringoptional

Default value for the variable

optionsstring[]optional

Available options (required for select type)

descriptionstringoptional

Human-readable description of the variable

Integration

Using Variables in Templates

How to reference and use variables in your prompts

// In your prompt content, reference variables with {{variableName}}
const promptTemplate = `
You are building a {{projectName}} using {{framework}}.
{{#if useTypeScript}}
The project uses TypeScript for type safety.
{{/if}}

Target audience: {{targetAudience}}
Expected users: {{maxUsers}}

Please provide development guidance accordingly.
`;

// Variables are automatically substituted during prompt generation
const finalPrompt = substituteVariables(promptTemplate, {
  projectName: "E-commerce Platform",
  framework: "Next.js", 
  useTypeScript: true,
  targetAudience: "Small business owners",
  maxUsers: 5000
});