genx-ai

• Introduction
• Setup
• Maintainers or Developers
• Troubleshooting
• Code Modernisation

Introduction

Genx-AI is a Generative AI solution, Which helps you to:

• 🚀 Build various FullStack applications
• 🛠️ Modernise/Migrate your legacy code
• 📝 Create Business Specification from an existing code base and vice versa

All using just prompt engineering !! 😀

Setup

To setup genx-ai , you can use two approaches, use it via npm module or if you want to look into the code you can try out the code repo as well

Step: 1: Install GenxAI

Using as npm module

• Make sure to use node v18 or higher
• Check if genx-ai is already installed and which version

npm -g list
or
genx-ai --version

• If installed and with lower version, uninstall it.

npm uninstall -g genx-ai

• Now install the genx-ai package globally

npm install -g genx-ai

• Create your project directory or move to your existing project
• if fresh project , create a new directory and then you can do npm init to setup the basic project.

Step: 2: Create a new project or use existing project

mkdir my-genx-ai-workspace
cd my-genx-ai-workspace
npm init

Step: 3: Apply GenxAI to the project

Reminder: Do check on your openAI dashboard if you have GPT4 access

You are good to perform setup and execute some prompts, from your project repo From your workspace run :

genx-ai setup

This will ask for your API keys, and setup the .genx-ai folder which it will use internally for you

Please answer the important questions as below:

• Select : OpenAI
• Key : use your open AI key , you can get one from https://platform.openai.com/account/api-keys
• Would you like to use GPT4-32k (bigger context, better coherence result, more expensive) : Y
• Max AI workers : 2
• Does this project have a markdown specification directory? Leave blank if disabled (highly recommended): Specify directory name like my-prompts
• Answer other questions as per your requirement

Step: 4: Run some prompts

Prompt via a file

After the setup process is done :

• Create a README.md or NOTES.md or FUNCTIONALSPEC.md inside the <project-root>/my-prompts directory
• And write your prompts in a sequence there. for extample refer below sample promp

1. Generate a new folder named `react-app` in the `src` directory.
2. Inside the `react-app` folder, generate a new file named `package.json`. This file will contain the necessary dependencies for our React application.
3. Generate a new file named `webpack.config.js` in the `react-app` folder. This file will contain the configuration for Webpack, which we will use to bundle our React application.
4. Generate a new file named `.babelrc` in the `react-app` folder. This file will contain the configuration for Babel, which we will use to transpile our React code.
5. Generate a new file named `index.js` in the `react-app` folder. This file will be the entry point of our React application.
6. Generate a new file named `App.js` in the `react-app` folder. This file will contain the main component of our React application.
7. Generate a new file named `index.html` in the `react-app` folder. This file will be the HTML template for our React application.
8. Update the `myprompt.md` file in the `src` folder to include instructions on how to run the React application.

• Now execute the following command to run this genx-ai spec2code

Step: 5: Interactive Prompt

For interactive mode you can answer the clie questions with your prompts

• run following command to start with : genx-ai prompt
• now provide all details as asked
• Once everything is generated, review the code and begin a loop where you ...

engineering with prompts, rather than prompt engineering

Maintainers or Developers

Using code repo(for maintainers only)

To use this locally with actual code, follow this:

• clone the repository

Please reach out to author for legacy code repository details

• For code access contact Ankit Singhal, Lalit Negi, Devesh Kaushal

• Follow below command for further setup

cd genx-ai
nvm use 18
npm install
npm link

• Now create and go to the folder you want to use GenX-AI like

cd my-genx-ai-workspace

• run below command to use genx-ai as local node_module

npm link genx-ai

Now go to the genx-ai setup section below

Setting up a new app

Reminder: Do check on your openAI dashboard if you have GPT4 access

You are good to perform setup and execute some prompts, from your project repo

cd my-genx-ai-workspace
genx-ai setup

This will ask for your API keys, and setup the .genx-ai folder which it will use internally for you

Please answer the important questions as below:

• Select : OpenAI OR Custom OpenAI Url hosted on any cloud platform
• Key : use your open AI key , you can get one from https://platform.openai.com/account/api-keys
• Would you like to use GPT4-32k (bigger context, better coherence result, more expensive) : Y
• Max AI workers : 2
• Does this project have a markdown specification directory? Leave blank if disabled (highly recommended): Specify directory name like specs
• Answer other questions as per your requirement

Prompt via a file

After the setup process is done :

• Create a README.md or NOTES.md or FUNCTIONALSPEC.md inside the <project-root>/specs directory
• And write your prompts in a sequence there. for extample refer below sample promp

1. Generate a new folder named `react-app` in the `src` directory.
2. Inside the `react-app` folder, generate a new file named `package.json`. This file will contain the necessary dependencies for our React application.
3. Generate a new file named `webpack.config.js` in the `react-app` folder. This file will contain the configuration for Webpack, which we will use to bundle our React application.
4. Generate a new file named `.babelrc` in the `react-app` folder. This file will contain the configuration for Babel, which we will use to transpile our React code.
5. Generate a new file named `index.js` in the `react-app` folder. This file will be the entry point of our React application.
6. Generate a new file named `App.js` in the `react-app` folder. This file will contain the main component of our React application.
7. Generate a new file named `index.html` in the `react-app` folder. This file will be the HTML template for our React application.
8. Update the `myprompt.md` file in the `src` folder to include instructions on how to run the React application.

• Now execute the following command to run this genx-ai spec2code

Interactive Prompt

For interactive mode you can answer the clie questions with your prompts

• run following command to start with : genx-ai prompt
• now provide all details as asked
• Once everything is generated, review the code and begin a loop where you ...

engineering with prompts, rather than prompt engineering

Troubleshooting

In case the genx-ai setup / app generation doesnt work , make sure :

• You are using the correct version of globally installed genx-ai
• You are supplying a correct OPEN AI key , verify the same under /.genx-ai/aibridge.json

"provider": {
		"openai": {
            url: "<your openai url should be displayed here OR default openai api url will be used>"
            key: "<your gpt key should be displayed here>"
        }
	}

• Try to clean the cache folder under /.genx-ai/cache and try again.

Need More details

Please reach out to Devesh Kaushal, Lalit Negi

Build and publish (for maintainers only)

To build this package and publish to npm registry follow below command

yarn run build

cd dist/genx-ai

npm publish --access public

Code Modernisation

1. Clone basic legacy angular app - Get repo details from author
2. cd legacy-angular-app
3. npm link genx-ai (Ignore this step if npm list -g shows the symlink)
4. run genx-ai setup
5. Create markdown file as code2spec-prompt.md with prompt added to it as below if you want to generate

Functional requirements prompt

Copy the following prompt in code2spec-prompt.md

As a product owner, create functional specifications for the features identified in the project based on the existing codebase. Provide detailed information for each feature, including feature description, business logic, and acceptance criteria.

Feature Identification:
List the features identified in the project based on the existing codebase. Identify key functionalities that the code implements.

Feature Description:
For each feature, provide a detailed description explaining its purpose and the problem it solves. Include any relevant context or background information.

Business Logic:
Describe the business logic implemented in the code for each feature. Explain how the feature contributes to the overall business goals and objectives.

Acceptance Criteria:
Define clear and concise acceptance criteria for each feature. Specify the conditions that must be met for the feature to be considered complete and satisfactory.

Technical requirements prompt

Copy the following prompt in spec2code-prompt.md

As a developer, create technical specifications for the existing codebase. Provide detailed information on the technical aspects of the implementation, including architecture, design patterns, and key components.

Codebase Overview:
Provide a high-level overview of the existing codebase. Summarize the purpose of the application and its main components.
Architecture and Design Patterns:
Describe the architecture of the codebase. Identify any design patterns used and explain how they contribute to the overall structure and organization of the code.

Key Components:
Identify and describe the key components/modules of the codebase. Explain the functionality of each component and how they interact with one another.

Database Structure:
If applicable, outline the database structure used in the codebase. Specify the tables, relationships, and key fields relevant to the application.

External Dependencies:
List any external libraries, frameworks, or services that the codebase relies on. Provide information on how these dependencies are integrated into the project.

API Documentation:
If the codebase includes APIs, provide documentation for each API endpoint. Include details such as request/response format, authentication mechanisms, and any special considerations.

Code Conventions and Standards:
Detail the coding conventions and standards followed in the codebase. Include information on naming conventions, coding style, and any specific guidelines adhered to by the development team.

Deployment and Configuration:
Describe the deployment process for the application. Provide information on configuration settings, environment variables, and any necessary setup steps for deployment.

Generating Specification from Code

In below exercise we will generate the specfication of above code and we will try to generate a new React app using @emotion style component and chakra-ui to

To generate the technical/functional requriement or specifications , run below command

genx-ai code2spec --enableCodeModernization=true

It will generate the functional_requirements.md in specs folder

• now : cd .. && mkdir genx-reactapp
• npm init
• cd genx-reactapp && genx-ai setup
• copy the functional_requirements.md > specs/FUNCTIONALSPEC.md
• create CONTEXTUAL.md (if you need to contextualise on top of functional prompts like mapping API Specs or using any UI library in below format only)

SAMPLE CONTEXTUAL.md (with contextual prompt)

**Component Library Installation**

react app | npx create-react-app myapp --force
component library | cd myapp && npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion react-router-dom axios
mock server | cd myapp && npm i json-server --save-dev


## API Specifications

Login Component
- **API endpoint:** /authenticate/user
- **Verb:** POST
- **Parameter:** username and password
- **Response header:** auth-token
- **Response:** boolean

Signup Component
- **API endpoint:** /user/register
- **Verb:** POST
- **Parameter:** (as per form fields in the component)
- **Response:** boolean

Forgot Password Component
- **API endpoint:** /user/forgotpassword
- **Verb:** POST
- **Parameter:** (as per form fields in the component)
- **Response:** boolean

Now run the below command to generate code using the specs

genx-ai spec2code --enableContexualSearch=true --appType=react/angular/nextjs

• Press n
• Give this prompt (explicit to model) - ‘I'm Technical Architect on this project and want to generate reactJs application, convert the .html to .jsx and uses react hooks for state management considering the functional requirements shared’
• Press y It will generate the reactJs app with similar routes and components.

Demo Video Recording

Please reach out to author for video