Skip to main content

Technical Specialist Agent in Angular

The agent can analyze Angular code, such as a component for generating random CPF numbers (Brazilian social security number), and provide detailed explanations, suggest improvements, or create unit tests for the code. This makes it a valuable tool for maintaining high-quality and consistent Angular development practices.

Step 1. Access the StackSpot AI Portal

Step 2. Create a new Agent

  • In the main menu, click on ‘Contents > Agents’;
  • Click the ‘Create Agent’ button;
  • Fill in the Agent information:
    • Agent name: Technical Specialist in Angular
    • System Prompt: Paste the following prompt:
Act as a technical specialist in Angular technology. You are an Angular developer responsible for providing technical support in areas such as test generation, code review, refactoring, and the creation of Angular code. When requested, analyze the provided code, suggest improvements, generate unit tests, and refactor the code following Angular best practices. Focus on best practices for folder organization, separation of concerns, and avoiding excessive logic in the HTML.

  • Suggested Commands: Add the following suggested commands to help the user start conversations with the Agent:

    Generate tests for a code.
    Refactor a source code. Create a source code.

  • Conversational Mode: Enable conversational mode to allow continuous and complex interactions, which is ideal for conversations involving multiple information exchanges.

  • Knowledge Sources (KSs): Add relevant Knowledge Sources to the Agent, such as Angular best practices, endpoints, and project payloads. This will enable the Agent to provide more accurate and contextualized responses.

Step 3. Test the Agent

  • After configuring the agent, go to the ‘Try’ section to test the Agent and ensure it works as expected.
  • Ask questions like: "Generate tests for a code."

This Angular code example creates a simple component that displays a message and increments a counter when clicking a button.

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <h1>{{ title }}</h1>
    <p>Contador: {{ counter }}</p>
    <button (click)="increment()">Incrementar</button>
  `,
  styles: [`
    h1 { color: blue; }
    button { margin-top: 10px; }
  `]
})
export class CounterComponent {
  title = 'Exemplo de Contador';
  counter = 0;

  increment() {
    this.counter++;
  }
}

Step 4. Share the Agent

  • If you want to share the Agent with other team members, click the ‘Share’ button.
  • Choose between:
    • Share with specific users: Add the users' email addresses.
    • Publish to the account: Make the agent available to all account members.

Step 5. Use the Agent

  • The Agent will be available in the StackSpot AI IDE or chat, where you can use it directly to generate tests, review, refactor and create Angular code.
  • The Agent can be used with Quick Commands to automate the testing process further.

Usage example

1. Explanation of Angular code

User: "Explain this code to me"

import { Component } from '@angular/core';

@Component({
  selector: 'app-cpf-generator',
  templateUrl: './cpf-generator.component.html',
  styleUrls: ['./cpf-generator.component.css']
})
export class CpfGeneratorComponent {

  public cpf: string = '';

  constructor() {}

  // Function to generate a random CPF
  public generateCpf(): void {
    this.cpf = this.generateRandomCpf();
  }

  // Function that generates the CPF
  private generateRandomCpf(): string {
    let cpf = '';
    let sum = 0;
    let remainder;

    // Generates the first 9 random digits
    for (let i = 0; i < 9; i++) {
      cpf += Math.floor(Math.random() * 9).toString();
    }

    // Calculates the first check digit
    for (let i = 0; i < 9; i++) {
      sum += parseInt(cpf.charAt(i)) * (10 - i);
    }
    remainder = 11 - (sum % 11);
    if (remainder === 10 || remainder === 11) {
      remainder = 0;
    }
    cpf += remainder.toString();

    // Calculates the second check digit
    sum = 0;
    for (let i = 0; i < 10; i++) {
      sum += parseInt(cpf.charAt(i)) * (11 - i);
    }
    remainder = 11 - (sum % 11);
    if (remainder === 10 || remainder === 11) {
      remainder = 0;
    }
    cpf += remainder.toString();

    return cpf;
  }
}

Agent:

This code defines an Angular component called CpfGeneratorComponent, which is responsible for generating a random CPF. Here is a detailed explanation:

Import and Component Definition:
The component is imported from @angular/core and is decorated with the @Component decorator, which defines the selector, template, and styles of the component.
The selector app-cpf-generator will be used in the HTML to render this component.
cpf Property:
The cpf property is a public string that will store the generated CPF.
generateCpf Method:
This public method is called to generate a CPF. It invokes the private method generateRandomCpf to generate the CPF and assigns the value to the cpf property.
generateRandomCpf Method:
This private method generates a random CPF. It follows the CPF generation rules, which include:
Generating the first 9 random digits.
Calculating the first and second check digits based on a specific algorithm.
The generated CPF is returned as a string.