Getting Started

From prompt to code...

Whats is CompAI ?

CompAI is a revolutionary Visual Studio Code extension for developers that leverages AI to streamline component creation. It generates UI components effortlessly, automates file and directory creation, redefines efficiency in frontend development.

With CompAI you can create components with a few steps, you can also customize the component to your needs.

With CompAI rediscover component creation powered by AI, create, reuse, innovate faster.

Before to start

Before you start creating your first component, you need to have an API Key of Open AI, if you don't have one, you can create it by clicking the button below.

Open AI

Configure

First you must have an OpenAI api key, this in order to be able to use the models with which we can deliver your components.

We also recommend you to register in CompAI, and get an api key, with which you can have a record of your components, eventually you can share the components you create, edit them and/or report them, if they have been affected by any hallucination.

Knowing this, we start with the configuration assuming that you already have CompAI installed in your vscode.

  • 1) You must select the CompAI icon in the vscode extensions menu. This will open a configuration panel.

    image select compai menu extensions

  • 2) Here you can configure the framework, language, and styles.

    image view config components

  • 3) Here you can configure the CompAI api key and the OpenAI api key. Don't worry, both keys are E2E encrypted.

    image view config api keys

  • 4) Every time you make a change in the configuration, remember to save the changes.

  • 5) In case any change is not reflected immediately when creating components, you have a button to reload the extension, which will do basic validations in the extension configuration.

    image button reload extensions

How to use

Once you have your API Key, and you have configured the extension, you can start.

To create a component you must follow these steps:

  • Right-click a folder in the Explorer or editor view.
  • Select "CompAI".
  • Select "Make Component" from the context menu.
  • Enter a name for the component. Press Enter.
  • If you need add a description like a colors, border or context for your component
  • Wait while CompAI works for you.