Constela

@constela/ai

AI-powered DSL generation for Constela

@constela/ai provides AI-powered features for generating and analyzing Constela DSL.

Features

  • DSL Generator - Generate UI components and views from natural language prompts
  • Security Validation - Automatically validate generated DSL against security rules
  • Multiple Providers - Support for Anthropic (Claude) and OpenAI (GPT-4o)

Quick Start

Build-time Generation

Use AI to generate components at build time:

json
{
  "version": "1.0",
  "data": {
    "card": {
      "type": "ai",
      "provider": "anthropic",
      "prompt": "A card component with title, description, and action button",
      "output": "component"
    }
  },
  "view": {
    "kind": "component",
    "name": "card",
    "props": {
      "title": { "expr": "lit", "value": "Welcome" },
      "description": { "expr": "lit", "value": "Get started with Constela" }
    }
  }
}

Runtime Generation

Generate DSL dynamically in response to user input:

json
{
  "version": "1.0",
  "state": {
    "userPrompt": { "type": "string", "initial": "" },
    "generatedComponent": { "type": "object", "initial": {} }
  },
  "actions": [
    {
      "name": "generateComponent",
      "steps": [
        {
          "do": "generate",
          "provider": "anthropic",
          "prompt": { "expr": "state", "name": "userPrompt" },
          "output": "component",
          "result": "generatedComponent"
        }
      ]
    }
  ]
}

CLI Analysis

Analyze existing DSL files for improvements:

bash
constela suggest app.json --aspect accessibility
constela suggest app.json --aspect security --provider openai

Providers

ProviderModelEnvironment Variable
AnthropicClaude SonnetANTHROPIC_API_KEY
OpenAIGPT-4oOPENAI_API_KEY

Security

AI-generated DSL is automatically validated:

  • Forbidden Tags: script, iframe, object, embed, form
  • Forbidden Actions: import, call, dom
  • Restricted Actions: fetch (requires whitelist)

Next Steps