How to generate front-end components for an API, while documenting the existing code, and much more

“How to generate front-end components for an API, while documenting the existing code, and much more“

Note This process highlights the power of Generative AI in modernizing legacy code. Analogous approach can be used to create tests, generate documentation, compose training exercises, etc.

From ‘Chat’ to a Complete Pipeline with Prompts and Workflows

1. initiate the Chat session with a prompt similar to :

2. QuantaLogic generates a well formatted code

3. One may want to create an Angular (or React) code to consume these endpoints. We will break down the process in separate steps :

   1. Generate a swagger-like definition from endpoints :

Note : one may improve this request by adding company-specific preferences (for instance Security concerns…). Since this is a need that will arise regularly, it's best to switch to the creation of a prompt.

4. Once we have this swagger definition, we can ask for Angular code génération. Let’s do it first in the Chat before saving it in a more reproducible way with prompts and workflows

5. Generated code implements properly the requirements

6. The chat is turned into a prompt (Cf. previous step) named ‘Swagger To Angular’

   I have used the output variables to create a clear separation between code and tests :

   code :
   

and tests :

7. Let’s Wrap it in a Workflow

   The workflow permits to :

• load a code file (either from local file or document workspace)
• turn the code file content into Swagger with the first prompt
• use the output (swagger definition) as input of the last step (Swagger to Angular)

8. We get the full code in different outputs:

   

The key points are

1. Start with ‘Chats’ to refine your requirements, tests and select the best strategy
2. Turn your ‘Chats’ into ‘Prompts template’
3. Use the Workflow designer to create a powerful pipeline
4. Enjoy the smart automation of time consuming tasks !