Interactive System Design

An explorable overview of the SFL Prompt Studio, a tool designed to streamline the creation and management of LLM prompts and complex AI workflows using Systemic Functional Linguistics.

SFL Framework: The Core of Prompt Engineering

This section details the Systemic Functional Linguistics (SFL) framework that is foundational to the SFL Prompt Studio. The application's features are built to leverage this linguistic model for more effective and consistent AI prompt generation.

Field (Experiential)

Captures the "what" of the communication: the subject matter, processes, and participants involved.

export interface SFLField {
  topic: string;
  taskType: string;
  domainSpecifics: string;
  keywords: string;
}

Tenor (Interpersonal)

Encodes the "who": the social relationships, roles, and attitudes between participants.

export interface SFLTenor {
  aiPersona: string;
  targetAudience: string[];
  desiredTone: string;
  interpersonalStance: string;
}

Mode (Textual)

Organizes the "how": structuring the language into a coherent, contextually appropriate text.

export interface SFLMode {
  outputFormat: string;
  rhetoricalStructure: string;
  lengthConstraint: string;
  textualDirectives: string;
}

Application Features

The SFL Prompt Studio provides two primary features built upon the SFL framework: the Prompt Wizard for generating structured prompts and the Agent Orchestrator for creating complex workflows.

Prompt Wizard Demo

This interactive demo simulates how the Prompt Wizard translates a natural language goal into a structured SFL prompt. Type your goal below to see the generated JSON.

Generated SFL Prompt:

Awaiting input...

Agent Orchestrator Insights

The orchestrator breaks down goals into executable tasks. The chart below visualizes the relative computational complexity of different task types, helping users understand workflow performance.

Orchestration Patterns

The Agent Orchestrator supports various patterns for structuring workflows. Below are visual representations of the most common patterns, built with HTML and CSS.

Sequential Pattern

Input
Process
Output

Fan-Out Pattern

Input
Process 1
Process 2

Map-Reduce Pattern

Data Split
Map 1
Map 2
Map 3
Reduce

Technology Stack

This application is built on a modern, scalable technology stack. The visualization provides a high-level breakdown of the main architectural components.

  • F

    Frontend

    React, Vite, TypeScript, and Tailwind CSS for a responsive and modern user interface.

  • B

    Backend

    Node.js and Express.js with TypeScript for a robust and type-safe API.

  • D

    Database & Cache

    PostgreSQL with pgvector for data persistence and vector operations, and Redis for caching and job queues.

  • A

    AI Providers

    A flexible integration layer supporting Google Gemini, OpenAI, and Anthropic models.

Setup and Configuration

The recommended setup uses Docker for a consistent and reproducible environment. Follow the steps below to get the application running locally.

Docker-Based Installation

1. Clone the repository:

git clone https://github.com/your-username/sfl-prompt-studio.git
cd sfl-prompt-studio

2. Create environment configuration and add API keys:

cp backend/.env.example backend/.env
# Now, edit backend/.env with your API keys

3. Start all services with Docker Compose:

docker-compose up -d

4. Verify the deployment:

# Check backend health
curl http://localhost:4000/health

# Access frontend in your browser
http://localhost/