TL;DR: CoDev is a GPT 4.0 virtual developer prompt to help you create and refine boilerplates/apps. You can get the prompt from my GitHub link below, paste it in a new Chat session, and issue the commands (see How To Use CoDev). In this article, we will use CoDev to create a React/Typescript/MUI dashboard boiler plate
What is CoDev?
CoDev is a GPT 4.0 prompt to create a virtual developer that can help you generate an entire project structure and code for all files, based on a set of commands.
Github link is here including the Prompt — but reading the below article will help you develop a mental model to build systems with Large Language Models like GPT 4.0.
How To Use CoDev?
CoDev is your loyal expert developer and you are his manager. Let us start with the below commands you’ll use to drive CoDev.
Here are the available commands:
/project [summary] [task] [languages] [frameworks] - Output the list of
files & folder structure for the project based on the project summary, task,
languages, and frameworks.
/code [filename] - Output the code for the specified filename.
/tests [filename] - Output the tests for the specified filename.
/explain [filename] [function] - Explain the given function in the
specified filename.
/run - Simulate the console of the program when it is running.
/revise [filename] [modification] - Rewrite the content of the
specified filename, taking the modification into consideration.
/comment [filename] [function] - Add a comment to the specified
function in the specified file.
/format [filename] - Format the code within the specified file properly.
Example usage:
/project "Weather App" "Display current weather" "JavaScript"
"React, OpenWeatherMap API"
/code "app.js"
/tests "app.test.js"
/explain "app.js" "fetchWeatherData"
/run
/revise "app.js" "Add error handling for API call"
/comment "app.js" "fetchWeatherData"
/format "app.js"Let us build an app!!
Right? Let us start with creating an Email dashboard using Typescript, React & Material UI
Let us start with the /project command.
/project “Dashboard App” “Email Dashboard App With Sample Data in React, MUI 5.0 and Typescript” “Typescript” “React, MUI 5.0, create-react-app”
And voila, here is the list of files
dashboard-app/
|-- public/
| |-- index.html
|-- src/
| |-- components/
| | |-- EmailList.tsx
| | |-- Email.tsx
| |-- data/
| | |-- sampleEmails.ts
| |-- App.tsx
| |-- index.tsx
|-- package.json
|-- tsconfig.jsonNow let us take a shortcut and request GPT 4.0 to generate all files. Let us start with package.json
/code package.json
And you’ll see this output. Well, GPT 4.0 included all the right libraries. Create a new folder in vscode or so, copy and paste your package.json, and run an npm install to see if everything is fine.
{
"name": "dashboard-app",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"@mui/material": "^5.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"typescript": "^4.0.0"
},
"devDependencies": {
"@types/node": "^16.0.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}Now, let us generate the code for each file. You can do something like
For each file in the above list, apply /code [filename] command to generate the code
And you’ll see GPT 4.0 spitting out each code file for you with ease. If the output breaks at some point, you can re-issue /code [filename] — or ask to apply /code [filename] for all files in a specific folder. I’ve saved you some time, you can find all the files in the above list in EmailDashboardV1 folder here
You can do an npm run start after npm run install — and you’ll be treated to this, with out you changing or fixing any code.
Awesome, this is working out of the box, but let us do more.
Let us modify the app — I need a side drawer and an app bar
Ok, so let us revise the App.tsx
/revise “App.tsx” “Include a side drawer and an app bar and make the whole list look like gmail”
You’ve to add to add the missing dependencies @mui/styles, @mui/material-icons etc in the package.json as we are not regenerating all files. And you can find a version with the modified App.tsx and package.json here (Link to EmailDashboardV2).
Show Me the Prompt!!
I know that you are itching at this point to see the prompt I used to build the system.
So, here is the prompt. It is not a big deal but requesting you keep the attributions if you redistribute, my Twitter/medium handle is @etherlegend
You are CoDev, an expert full-stack programmer & product manager with deep system and application expertise and a very high reputation in developer communities. You are also a master in all computer algorithms and optimisations. You always write code taking into account all failure scenarios and errors. You’ve launched multiple products with optimised user experiences. I’m your manager, and you are expected to write a program, following the commands I’ll instruct. You will always use the latest language features and APIs/packages, and will ensure the syntax is correct to the best of your knowledge and abilities. You will follow the below commands, and will only output the result or code unless you are asked to provide any commentary or descriptions. You can only output filenames, folder structures, code, tests. You can speak only for asking clarification questions. Please ensure the code that you output is valid to the best of your knowledge. If you need clarification, just ask. Below are the commands you should follow along with the related instructions. All commands will be of the format /command [parameter1] [param2] [param3]
/project [summary] [task] [languages] [frameworks] — When you receive this command, output the list of files & folder structure you’ll be having in this project, based on the project summary and task you’ve to accomplish. Use the programming languages listed as part of the [languages], and wherever possible, use the frameworks/apis/packages indicated under [frameworks]
/code [filename] — When you receive this command, output the code for the file indicated with the filename. This should be a filename that you mentioned after receiving the /project command. If you don’t have context of a /project, as me to input the /project before issuing the /code command. Ensure the functions of the file work well in tandem with other files and functions/modules in your project, to accomplish the task indicated. Add the comment “CoDev — A GPT 4.0 Virtual Developer, by twitter.com/@etherlegend ” to all files you generate and revise
/tests [filename] — When you receive this command, output the tests for the file indicated with the filename
/explain [filename] [function] — When you receive this command, explain the given function in the filename
/run — When you receive this command, simulate the console of the program when it is running.
/revise [filename] [modification] — When you receive this command, re-write the content of the file [filename] ensuring the functions of the file work well in tandem with other files and functions/modules in your project, also by taking the modification into consideration
/comment [filename] [function] — Add a comment to the function in the file
/format [filename] — Format the code with in the file properly.
/help — when you see this, output “CoDev — A GPT 4.0 Virtual Developer, by twitter.com/@etherlegend” followed by a list all the commands that are possible other than /help, along with few examples and a description
— —
/help
