Building a Code Generator for Angular (Models, Services, Components) Using GPT API

Rajesh Gami
3h
54
0
0

Article

Introduction

As applications grow, developers repeatedly create the same boilerplate code:

Angular models
CRUD services
List and form components
HTML templates
Request/response DTOs

This consumes time and introduces human errors.
By integrating the OpenAI GPT API with a simple .NET backend and optional Angular UI, you can build your own Code Generator that automatically produces consistent, scalable code on demand.

This article walks through:

Designing the system
Calling GPT API for code generation
Creating a .NET wrapper service
Building an Angular UI
Generating actual Angular files (models, services, components)

Architecture Overview

Architecture Diagram (Compact)

      +--------------------------+
      |   Angular UI (Prompt)    |
      +-------------+------------+
                    |
                    ↓
      +--------------------------+
      |  .NET API (GPT Wrapper)  |
      +-------------+------------+
                    |
                    ↓
      +--------------------------+
      |      OpenAI GPT API      |
      +-------------+------------+
                    |
                    ↓
      +--------------------------+
      | Generated Angular Code   |
      +--------------------------+

Workflow

Code Generation Flow

Developer → Angular UI → .NET API → GPT API → Code Generated → UI Download or Copy

1. Designing Input Structure

The generator will accept:

Model name: Customer

Fields:

name: string
age: number
isActive: boolean

Generate
- Model
- Service
- Component + HTML

Example JSON input

{
  "entityName": "Customer",
  "fields": [
    { "name": "id", "type": "number" },
    { "name": "name", "type": "string" },
    { "name": "email", "type": "string" },
    { "name": "isActive", "type": "boolean" }
  ],
  "generate": {
    "model": true,
    "service": true,
    "component": true
  }
}

2. Creating the .NET GPT Wrapper API

Install Packages

dotnet add package OpenAI
dotnet add package Newtonsoft.Json

Controller Example

[ApiController]
[Route("api/codegen")]
public class CodeGenController : ControllerBase
{
    private readonly OpenAIClient _client;

    public CodeGenController(IConfiguration config)
    {
        _client = new OpenAIClient(config["OpenAIKey"]);
    }

    [HttpPost("generate")]
    public async Task<IActionResult> GenerateCode(CodeGenRequest req)
    {
        var prompt = PromptBuilder.Build(req);

        var result = await _client.ChatClient.Completions.CreateAsync(
            model: "gpt-4.1",
            new ChatCompletionRequest
            {
                Messages = new[]
                {
                    new ChatMessage("user", prompt)
                }
            });

        return Ok(result.Choices.First().Message.Content);
    }
}

3. Building the Prompt (Very Important)

PromptBuilder.cs

public static class PromptBuilder
{
    public static string Build(CodeGenRequest r)
    {
        var sb = new StringBuilder();

        sb.AppendLine($"Generate Angular code for entity: {r.EntityName}");
        sb.AppendLine("Fields:");
        foreach (var f in r.Fields)
            sb.AppendLine($"- {f.Name}: {f.Type}");

        if (r.Generate.Model) sb.AppendLine("Generate model file.");
        if (r.Generate.Service) sb.AppendLine("Generate CRUD service.");
        if (r.Generate.Component) sb.AppendLine("Generate form/list component.");

        sb.AppendLine("Output only valid Angular TypeScript/HTML code.");
        sb.AppendLine("Do not add explanation.");

        return sb.ToString();
    }
}

4. Example Output from GPT (Model)

export interface Customer {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

5. Example Output (Service)

@Injectable({
  providedIn: 'root'
})
export class CustomerService {

  private baseUrl = '/api/customer';

  constructor(private http: HttpClient) {}

  getAll() {
    return this.http.get<Customer[]>(this.baseUrl);
  }

  get(id: number) {
    return this.http.get<Customer>(`${this.baseUrl}/${id}`);
  }

  create(data: Customer) {
    return this.http.post(this.baseUrl, data);
  }

  update(id: number, data: Customer) {
    return this.http.put(`${this.baseUrl}/${id}`, data);
  }

  delete(id: number) {
    return this.http.delete(`${this.baseUrl}/${id}`);
  }
}

6. Example Output (Component + HTML)

Component

@Component({
  selector: 'app-customer-form',
  templateUrl: './customer-form.component.html'
})
export class CustomerFormComponent {
  form = this.fb.group({
    name: [''],
    email: [''],
    isActive: [false]
  });

  constructor(
    private fb: FormBuilder,
    private service: CustomerService
  ) {}

  submit() {
    this.service.create(this.form.value).subscribe();
  }
}

HTML

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="name" placeholder="Name">
  <input formControlName="email" placeholder="Email">
  <label>
    <input type="checkbox" formControlName="isActive"> Is Active
  </label>
  <button type="submit">Save</button>
</form>

7. Angular UI for Code Generator

Simple Component

@Component({
  selector: 'app-generator',
  templateUrl: './generator.component.html'
})
export class GeneratorComponent {
  entityName = '';
  fields = [{ name: '', type: 'string' }];

  generatedCode = '';

  constructor(private http: HttpClient) {}

  generate() {
    this.http.post('/api/codegen/generate', {
      entityName: this.entityName,
      fields: this.fields,
      generate: {
        model: true,
        service: true,
        component: true
      }
    }).subscribe((res: any) => {
      this.generatedCode = res;
    });
  }
}

Angular UI Template (Simple)

<div>
  <h3>Angular Code Generator</h3>

  <input [(ngModel)]="entityName" placeholder="Entity Name">

  <div *ngFor="let f of fields; let i=index">
    <input [(ngModel)]="f.name" placeholder="Field Name">
    <select [(ngModel)]="f.type">
      <option>string</option>
      <option>number</option>
      <option>boolean</option>
    </select>
  </div>

  <button (click)="generate()">Generate Code</button>

  <pre>{{ generatedCode }}</pre>
</div>

8. Enhancements for Production

1. Multiple Templates

CRUD grid
Master-detail
File upload component

2. Save templates to database

Allows multi-team sharing.

3. Generate folder structures automatically

Use:

dotnet run → writes .ts files to Angular project folder