1. Install backend project dependencies

   cd backend
   pnpm i

2. Install frontend project dependencies

   cd ../frontend
   pnpm i

3. Copy backend/sample.env in backend/config.env
4. Paste the OpenAI API key from the chat into backend/config.env

Start from the main branch and checkout the following branches to see the code changes for each step:

• 1-design-step-simple
• 2-design-step-structured-output
• 3-code-generation-step
• 4-fix-errors-step
• 5-fix-errors-iteratively-step

Generative Task

• A preliminary ideation step where no code is involved
• The user's request is enriched and converted into a list of components from our component library to be used

import { DesignNewComponentOutput, PipelineInputs } from '../utils/types';

export async function designStep(inputs: PipelineInputs): Promise<DesignNewComponentOutput> {
  // Retrieve context
  // Prepare prompt messages
  // Invoke llm
  // Parse/format output
}

Generative Task

• Code generation step where the user's request is converted into code
• The components listed in the previous step are used to generate the code

import { DesignNewComponentOutput } from '../utils/types';

export async function codeGenerationStep(inputs: DesignNewComponentOutput): Promise<string> {
  // Retrieve context
  // Prepare prompt messages
  // Invoke llm
  // Parse/format output
}

Deterministic Task

• Sometimes llm can generate code that is not valid, this step is used to ensure that the generated code is valid
• The TypeScript source code is checked and transpiled to JSX to be rendered with react-dom/server API

import { ValidationOutput } from '../utils/validation';

export function validationStep(sourceCode: string): ValidationOutput {
  // Validate and transpile TypeScript source code to JavaScript
  // Test JSX rendering
  // Return validation output
}

Generative Task

• If the generated code is not valid, this step is used to fix the errors

export async function fixErrorsStep(sourceCode: string, errors: string[]): Promise<string> {
  // Prepare prompt messages
  // Invoke llm
  // Parse/format output
}