@veecode-platform/backstage-plugin-vee

Vee

Our community

💬 Join Us

Join our community to resolve questions about our Plugins. We look forward to welcoming you!

  Go to Community  🚀

🚀 Getting started:

Before installing the plugin, there are some prerequisites to ensure its functionality:

• Have a locally installed Backstage project, :heavy_check_mark: How to create a Backstage app :page_with_curl: .
• Have the Vee Backend plugin installed on your Backstage, see how to install here.
• Have git in the docker image that will be uploaded to your environment.

If you are using yarn 3.x:

yarn workspace app add @veecode-platform/backstage-plugin-vee

If you are using other versions:

yarn add --cwd packages/app @veecode-platform/backstage-plugin-vee  

Configuration ⚙️

1- Add Vee key in AppConfig

In the app-config.yaml file, add the configuration:

ℹ️ As instructed in the documentation for the backend plugin.

vee:
  openai:
    apiBaseUrl: https://api.openai.com/v1
    apiKey: ${OPENAI_API_KEY}
    model: gpt-4o #The desired model, for best results use gpt-4o

E adicionar um config.d.ts em seu packages > app :

export interface Config {
  /**
  * Enable to view the URL of the specific catalog where the templates generated by AI will be saved
  * @visibility frontend 
  */
  vee?:{
  /**
  * @visibility frontend
  */
    openai?: {
      /**
      * @visibility frontend
      */
      templateGeneration?: {
      /**
      * @visibility frontend
      */
        catalog?: string;
      }
    }
  }
}

2- Annotations

The plug-in recognizes 1 annotations for its operation, the vee/engine,but at the moment this annotation is not mandatory, because the assistant is only able to receive the openAI engine in this first version, so whether or not you enter the annotation won't be necessary. In any case, informing the annotation would make the catalog-info.yaml look like this:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: "Component A"
  description: "An example"
  annotations:
    github.com/project-slug: test/ComponentA
    backstage.io/techdocs-ref: dir:.
+   vee/engine: openAI
   
spec:
  type: service
  lifecycle: prod
  owner: "devops"

UI 💻

In the design of the plugin, the assistant fits into the overview of the entities, but if in your development there is a overview for each type of kind, apply those that you think best suit our proposal. In this example we'll add to the overview of all the entities:

... 
+ import { AssistantAIContent } from '@veecode-platform/backstage-plugin-vee';

...

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    <Grid item md={6}>
      <EntityAboutCard variant="gridItem" />
    </Grid>
    <Grid item md={6} xs={12}>
      <EntityCatalogGraphCard variant="gridItem" height={400} />
    </Grid>
    <Grid item md={4} xs={12}>
      <EntityLinksCard />
    </Grid>
+    <AssistantAIContent/>
  </Grid>
);

...

👉 Overview

The assistant's icon will remain fixed on the entity's screen:

When triggered, the service receives the location of the entity, and from there, with the code from the repository, a context is created for the AI:

At this stage, we have iteration options in which the assistant will propose improvements or analyses:

So this detailed analysis and the pull-request proposal:

If the changes are pertinent, the pullrquest is created, the new branch will have all the suggested changes and additions, and the diff analysis can be done both in your git provider and in your IDE:

Template generation 🎨

Vee also has a template generation feature. To do this, follow these configuration steps:Vee also has a template generation feature. To do this, follow these configuration steps:

vee:
  openai:
    apiBaseUrl: https://api.openai.com/v1
    apiKey: ${OPENAI_API_KEY}
    model: gpt-4o #The desired model, for best results use gpt-4o
+   templateGeneration:
+      model: ${CUSTOM_MODEL} <- This model needs to be trained to generate qualified templates.
+      catalog: ${TEMPLATE_CATALOG_URL}

Now let's take a tour of the UI and its features:

Menu

The first step to enhancing your backstage with Vee is to add the side menu:

To do this, we need to change the following component in your packages > app:

...imports
+ import { AssistantAIMenu } from '@veecode-platform/backstage-plugin-vee';

.... 
export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
        <SidebarSearchModal />
      </SidebarGroup>
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={ExtensionIcon} to="cluster-explorer" text="Cluster" />
        <SidebarItem icon={LockIcon} to="vault-explorer" text="Vault"/>
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        <AssistantAIMenu/>
        {/* End global nav */}
        <SidebarDivider />
        <SidebarScrollWrapper>
          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
        </SidebarScrollWrapper>
      </SidebarGroup>
      <SidebarSpace />
      <SidebarDivider />
      <SidebarGroup
        label="Settings"
        icon={<UserSettingsSignInAvatar />}
        to="/settings"
      >
        <SidebarSettings />
      </SidebarGroup>
    </Sidebar>
    {children}
  </SidebarPage>
);

After that, we have access to the initial dashboard:

Select the "Scaffolder AI" option and then select the stack that will serve as the basis for the new template:

Each stack has its own list of predefined plugins:

Then we name the new template:

And we're waiting for the AI to generate:

The output is presented with the options of downloading the zipped folder or submitting a pullRequest to the template catalog:

🥇 Admin panel

You may be wondering how to manage all the information so that the user can carry out the flow, and that's why we've created the settings menu, which theoretically won't be exposed to all users, it's permissioned, below we'll show you the necessary permissions...

🛰️ Stacks

The Stacks are the basis for generating the template.
When you create a stack, you need to give it

• A name for it.
  
• The url of the base repository
• Plugins that the template will use** (You need to register the plugins first, in the plugins section we'll explain more)
  
  

The name is free, you can identify your stack by the language or framework or tool it refers to, example "Aws Ec2".
The url is the url of a repository that will serve as a base, that is, the repository that follows the entire standard and that you want to be replicated in new projects.When you create a stack, you need to give it

• A name for it.

• The url of the base repository

• Plugins that the template will use** (You need to register the plugins first, in the plugins section we'll explain more)

The name is free, you can identify your stack by the language or framework or tool it refers to, example "Aws Ec2".

The url is the url of a repository that will serve as a base, that is, the repository that follows the entire standard and that you want to be replicated in new projects.

🎲 Plugins

The plugins serve the stacks, so it is important that they are registered first.
Basically they need their identification name and the documentation url for each one, this information will be entered at the prompt taken to the AI engine.The plugins serve the stacks, so it is important that they are registered first.

Basically they need their identification name and the documentation url for each one, this information will be entered at the prompt taken to the AI engine.

✔️ Fixed Options

This menu is for configuring the options set in the code analysis wizard. For each type of entity, we can set options with customized prompts that will enrich the final prompt:

🤖 Training your AI model

To ensure that the results follow the expected pattern, we need to train with the model used.
Here's how ➡️ click.

🔐 Permissions

The permissions for the first version are broader, less granular and follow the following patternPermissions The permissions for the first version are broader, less granular and follow the following pattern:

Permission	Description
veeReadPermission	Permission to read the Vee plugin
veeAnalyzerReadPermission	Permission for the plugin to analyze code
veeAnalyzerSaveChangesInRepoPermission	Permission to save changes to the repository via pull request
veeAccessSettingsPanelPermission	Permission to access settings
veeGenerateTemplatePermission	Access to the template generation menu
veeSaveTemplatePermission	Permission to save templates
veeManageStacksPermission	Manage stacks (create, edit, delete)
veeManagePluginsPermission	Manage plugins (create, edit, delete)
veeManageFixedOptions	Manage fixed options (create, edit, delete)

💡 To find out more about permissions here