@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.

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 >

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: