veecode-platform / platform-backstage-plugins

Apache License 2.0
10 stars 3 forks source link

Add AI Assistant for Template Creation in TemplateEditorBrowser #24

Open caiolombello opened 2 weeks ago

caiolombello commented 2 weeks ago

Integrate an AI assistant into the TemplateEditorBrowser component to aid in the creation of templates within the Backstage platform. The AI assistant should provide contextual suggestions, autofill options, and step-by-step guidance to enhance the user experience during template creation.

Reference:

Objective: Enhance the template creation process by integrating an AI-powered assistant directly into the template editor interface. This assistant will help users by suggesting appropriate fields, providing autocomplete functionality, and guiding them through best practices in real-time.

Tasks:

  1. Review Existing Code and Plugin:

    • Examine the current state of the TemplateEditorBrowser.tsx component to identify integration points for the AI assistant.
    • Review the initial progress made in the AI Chat Plugin to understand the existing AI capabilities and how they can be leveraged.
  2. Design AI Assistant Features:

    • Define the core functionalities of the AI assistant, such as template suggestions, field autofill, syntax checking, and step-by-step guidance.
    • Ensure the AI assistant can provide context-aware suggestions based on the user's actions and the current template state.
  3. Implement AI Integration:

    • Integrate the AI assistant into the TemplateEditorBrowser.tsx component using the existing AI chat infrastructure.
    • Develop additional AI models or refine existing ones to cater specifically to template creation scenarios.
  4. Test and Validate:

    • Conduct comprehensive testing to ensure that the AI assistant integrates seamlessly with the template editor and provides accurate and helpful suggestions.
    • Validate that the AI integration enhances user experience without causing disruptions or performance issues.
  5. Documentation and User Training:

    • Update the platform's documentation to include information on the new AI assistant features.
    • Provide training materials or guides to help users understand how to best utilize the AI assistant during template creation.

By integrating an AI assistant into the TemplateEditorBrowser, we aim to improve the efficiency and ease of template creation within Backstage, providing users with intelligent tools that enhance their workflow.

Sreenshots: image Expanded Mode: image Full Screen Mode: image

This plugin is inspired by Cursor IDE/Github Copilot, the idea is that the AI ​​has integration with the reading of files, without the user needing to copy and paste the code into the Chat

caiolombello commented 2 weeks ago

I was able to create a wizard that generates templates based on the Backstage and VeeCode Platform documentation.

To do this, I created this training dataset for fine-tuning the AI.

AI used: OpenAI Base model: gpt4o Dataset: https://gist.github.com/caiolombello/209ef48d1a0e8b0ba76ad83be6fb013f

AI System Prompt:

You are a wizard specialized in writing Backstage templates and configuring `catalog-info.yaml` files. When answering questions or providing code examples, please follow these guidelines: 

1. **Present Yourself as an Expert**: Always start as a Backstage expert, focused on creating templates and configuring `catalog-info.yaml`. 

2. **Provide Complete Answers**: Include complete code in your answers, with no omissions. Ensure that all instructions and parameters are presented clearly and in detail.

3. **Use Structured Formats**: Structure your responses using code markup such as YAML or JSON. Use placeholders (`${}`) where the user must enter their own values.

4. **Validate Compliance and Accuracy**: Ensure that all responses comply with Backstage standards and best practices. Include valid and complete examples.

5. **Explain Customizations**: When providing examples, highlight where and how users should customize the templates to meet their specific needs.

6. **Maintain Clarity and Conciseness**: Present information clearly and concisely, avoiding ambiguity.

7. **Use Placeholders and Annotations**: Use placeholders (`${ values.parameterName }`) for variables to be replaced with actual values. Add annotations to explain the purpose of each field or parameter.

--- ### AI Response Example ```yaml apiVersion: scaffolder.backstage.io/v1beta3 kind: Template metadata: name: rds-devops-template title: RDS DevOps Template description: Template for provisioning an RDS instance on AWS.
  annotations: backstage.io/techdocs-ref: dir:.
  tags:
- platform-templates
- devops
- aws
spec:
owner: vertigo/devops
type: devops
parameters:
- title: "Environment Settings"
properties:
createNewEnvironment:
title: "Environment Settings"
type: object
properties:
create_new_environment:
title: "Create new environment"
type: boolean
enum:
- false
- true
enumNames:
- No
- Yes
default: false

Answer Guidelines

  1. List all Required Properties: Include all required properties and specifications for a valid catalog-info.yaml file.

  2. Highlight Possible Customizations: Clearly explain how and where the user can customize the template, highlighting specific parameters.

  3. Keep a Clear Structure: Organize the answers clearly to make them easier for users to understand and implement.

  4. Be Complete and Accurate: All instructions should be complete and accurate, avoiding assumptions about the user's knowledge.

My test:

Input:

gere um template para este modulo:

rds = { instance_class = "db.t3.small" deletion_protection = false multi_az = false availability_zone = "us-east-1a" db = { engine = "postgres" engine_version = "14.4" family = "postgres14" name = "postgres" } storage = { type = "gp2" allocated = 5 max_allocated = 100 encrypted = true } backup = { retention_period = 30 window = "04:00-06:00" } maintenance = { window = "tue:02:00-tue:04:00" auto_minor_version_upgrade = true } } credentials = { username = "postgres" password = "password_secreto" }

output:

Claro! Aqui está um template Backstage completo baseado na configuração fornecida para o seu módulo RDS:

```yaml
apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: rds-devops-template
  title: RDS DevOps Template 
  description: Template for provisioning an RDS instance on AWS.
  annotations:
    backstage.io/techdocs-ref: dir:.
  tags:
    - platform-templates
    - devops
    - aws
spec:
  owner: vertigo/devops
  type: devops
  parameters:
    - title: "Environment Settings"
      properties:
        createNewEnvironment:
          title: "Environment Settings"
          type: object
          properties:
            create_new_environment:
              title: "Create new environment"
              type: boolean
              enum:
                - false
                - true
              enumNames:
                - No
                - Yes
              default: false
            environment_name:
              title: "Environment name"
              type: string
              description: "Choose an existing environment or specify a new one."
              ui:field: EnvironmentSelect
              ui:options:
                creatable: true
                backstagePlugin: true
              ui:backstagePlugin:
                name: "environment"
                valueField: "environment_name"
                labelField: "environment_name"
              ui:widget: "EnvironmentExists"
              ui:exists:
                section: "settings"
            environment_time_to_live:
              title: "Environment TTL"
              description: "This is the default environment TTL. It will be forced if the environment is new."
              type: object
              ui:field: CategoryGrid
              properties:
                set_max_lifetime:
                  title: "Set max lifetime"
                  type: boolean
                  default: false
                max_lifetime:
                  title: "Max lifetime"
                  type: string
                  default: ""
                  ui:widget: DateTimePicker
            instances_settings:
              title: "Instances settings"
              type: object
              ui:field: CategoryGrid
              properties:
                allowPerInstanceShutdown:
                  title: "Allow per instance shutdown"
                  type: boolean
                  description: "Allow requests to create and delete instances individually."
                  default: false
    - title: "Deployment Settings"
      properties:
        rds:
          title: "RDS Instance Configuration"
          type: object
          properties:
            instance_class:
              title: "Instance Class"
              type: string
              default: "db.t3.small"
            deletion_protection:
              title: "Deletion Protection"
              type: boolean
              default: false
            multi_az:
              title: "Multi-AZ Deployment"
              type: boolean
              default: false
            availability_zone:
              title: "Availability Zone"
              type: string
              default: "us-east-1a"
        db:
          title: "Database Configuration"
          type: object
          properties:
            engine:
              title: "Engine"
              type: string
              default: "postgres"
            engine_version:
              title: "Engine Version"
              type: string
              default: "14.4"
            family:
              title: "Family"
              type: string
              default: "postgres14"
            name:
              title: "Database Name"
              type: string
              default: "postgres"
        storage:
          title: "Storage Configuration"
          type: object
          properties:
            type:
              title: "Storage Type"
              type: string
              default: "gp2"
            allocated:
              title: "Allocated Storage (GB)"
              type: integer
              default: 5
            max_allocated:
              title: "Max Allocated Storage (GB)"
              type: integer
              default: 100
            encrypted:
              title: "Encrypted"
              type: boolean
              default: true
        backup:
          title: "Backup Configuration"
          type: object
          properties:
            retention_period:
              title: "Retention Period (days)"
              type: integer
              default: 30
            window:
              title: "Backup Window"
              type: string
              default: "04:00-06:00"
        maintenance:
          title: "Maintenance Configuration"
          type: object
          properties:
            window:
              title: "Maintenance Window"
              type: string
              default: "tue:02:00-tue:04:00"
            auto_minor_version_upgrade:
              title: "Auto Minor Version Upgrade"
              type: boolean
              default: true
        credentials:
          title: "Database Credentials"
          type: object
          properties:
            username:
              title: "Username"
              type: string
              default: "postgres"
            password:
              title: "Password"
              type: string
              default: "password_secreto"

Certifique-se de substituir os passwords reais e ajustar as configurações conforme necessário para o seu ambiente.