Devin AI Live Demo: Did Devin Create a WordPress Plugin?

Key Takeaways

this is amazing now I'm going to show you Devon demo to create a WordPress plug-in from scratch I'm going to directly ask Devon and going to exactly show you what it happens that's exactly what we're going to see [Music] today hi everyone I'm really excited to show you about how to create a WordPress plug-in using Devon AI software engineer I'm going to take you through step by step on how to do this but before that I regularly create videos in regards to Artificial Intelligence on my YouTube YouTube channel so do subscribe and click the Bell icon to stay tuned make sure you click the like button so this video can be helpful for many others like you if you got access you can access Devon from preview. devin. there I've clicked start a new session and this is how the response is going to my name is Devon I'm a software engineer give me a coding task and I will try to do my best to solve it and on the right hand side you got snapshot by default you have a snapshot that means a default virtual machine you can even create a snap shot after task completes and then save it like this here I've got one snapshot which I've saved I can click this and I can even load that snapshot and activate it but for now I'm going to use the default snapshot I'm going to ask create a chatbot plugin for WordPress the chatbot should be displayed on every page of my website the chatbot is powered by open AI gbd 3.5 turbo and going to click enter I'm also going to provide a credential which is open AI API key I'm going to generate the key from open AI website going to name it as Devon default project and create secret key I copied the key and pasted it here now going to click Send when I click this I can see my user quota exceeded so I'm going to use my previous one of the chat so going to use Python random number package as I've showed in my previous video this old automatically created a python package for me and it pushed the information to my GitHub repo as you can see here here I'm going to provide open a API key and then click Send and going to ask the same question create a chatbot plugin in WordPress it should be in every page it should be powered by open AI gp5 turbo model and then click enter now you can see Devon is typing Devon is thinking let's see what it's going to do I understand you'd like it chatbot plug-in developed by WordPress using open AI GPD 3.5 turbo model I can certainly help you with that here you can see Devon is currently working on creating a WordPress chatboard plugin powered by open AI GPD 3.5 turbo model I'm going to say ignore the previous python package which you created if you not already watched my previous video I created a python package using Devin I fixed an error in my GitHub account using Devon and few more use cases I will link that in the description below so now I'm going to click Send there's an icon here if I click this it automatically shows all the tabs for example at the top Devon's conversation the right hand side there's a terminal at the bottom left you got the browser on the right hand side you got the code editor you can have full screen and the editor expands and you can see the list of files there I'm going to close this you can also show the diff in the same editor which is amazing you can even download The Code by clicking this button now I'm going to go back to the normal mod mode so in the normal mode you can see the current Focus got changed develop the WordPress chatbot plugin and you got the list of things here develop the WordPress chatboard plugin brainstorm and plan features set up the local development environment test the WordPress chatboard plugin and then deploy the chatbot plugin now we can see Devon is working in the Shell this small icon is where Devon is working so automatically you can see the Devon icon or the logo changing into different tabs which means we can understand Deon is working in that tab now you can see it's creating a new react app using npx and it's installing all the required package now it's initializing a git repository it all got installed and it's ready just that you know the whole session is like a virtual machine or container dedicated for this task we can terminate the session by clicking this button you can share the conversation you can even toggle the stats and you can see the stats here session over view 37 lines of code 39 minutes worked 15 messages exchanged two Shi sessions open now you can see the de icon move to the planner and I'm going to click that and you can see in the planner it take the second box now it's going to brainstorm and plan features for the WordPress plugin here the response is Devon is setting up the user interface components for the WordPress chatbot plug-in using react and chakra UI now Devon is working in the editor as you can see here you can see created a file called app.js there you can see the code here I'm going to expand that and here you can see the WordPress chatboard plug-in folder there you got the chatboard front end Source app. J imagine how long it will take for a developer to create this step by step random number generator is my previous task which I asked Devon to do so you can ignore that for the time being now it is writing more code in app.js file as you can see here in the terminal we can see Devon is currently developing the backend for WordPress chatboard plugin so first it's developing the backend now it created a file called openai cho. PHP you can see the plug-in name author is Devon version number one and you can see it's going to use Ajax function now you can see Devon is working in the browser it's trying to load the re application and it's trying to test that applic you can also see it's running the server using web pack I'm not able to interact with the browser maybe for security reason and you can see it's trying to type a message hello chatbot now Devon is working in the terminal shell you can see it's building the scripts the scripts got Gip for optimization now I'm going to download all the files now I got the zip folder here I'm going to right click open with archive now I've got a home folder in that there's Ubuntu folder in that you got random number generator and WordPress chatboard plugin I'm going to right click this and compress this plugin now this got compressed this is how you upload a plugin to Wordpress now I have my website running on my Local Host now going to upload the plug-in in the dashboard plugins add new plugin they're going to upload plug-in choose file and you can see the file here I'm going to choose the zipped file and click open and click install now now it says installing unpacking plug-in installed successfully now I'm going to activate the plugin so plugin got activated so this is a good first step because even for activating a plugin for it to work the code need to be correct in this instance the first step is correct now let's see the chatbot let's go to the homepage visit site and we got an error here on line number 21 so I'm going to copy the error code and now I'm going to tell Devon I got an error when installing the and I'm pasting the error and then click enter now Devon is thinking this usually happens when the the file it's trying to access doesn't exist Devon is investigating resolving the file M time error in the WordPress plug-in now we can see Devon fixed the issue and now it's zipping those files so that it can be directly installed in word press so in in our previous step we manually compressed those files and then installed it but here Deon is doing it for us now Devon tested the WordPress chatboard plugin locally on all pages hello the WordPress chatboard plugin is ready for deployment please find the attached zip file WordPress chatbot plugin. zip and it's telling me the list of steps to follow to install the plugin and I got the plugin here I'm going to click that and download the plugin now the plugin got downloaded going to the WordPress dashboard deactivating and deleting the previous version now going to add new plugin upload choose file and choosing the WordPress chatboard plugin and clicking install and activating the plugin now it's all ready I'm going to visit the site now I don't see any errors on the page all the errors disappeared but I don't see the chatbot going to ask Devin where can I see the chatbot in the WordPress website I don't see it now Devon is investigating why the chatbot is not visible on the WordPress site now to investigate the error further Devon is asking what WordPress theme I'm using and what it supports so I'm going to provide the URL to the WordPress theme I am using and click enter now Devin did go through the theme files and it confirms that it is compatible and it's giving me some suggestion but when I go and read the code I can clearly see these files are not there build static JS you can see that here also it's not there so now I'm going to say this file I can see these files are not there in the plugins folder that could be the issue can you please verify and fix click enter I asked dein make make sure all the JS and CS files are inside the correct folder and also informed zip the plugin so that I can directly install so it updated the planner accordingly and you can see it's going to sip the WordPress chatbot plugin at the end I got the plugin here so going to download it now it got downloaded going to the WordPress website again deactivating the old plugin and deleting it now installing the latest downloaded plugin which is here clicking that and download and opening it install now now activated the plugin now we are going to test the plugin going to browse the website I don't see the chatbot here going to verify if it actually contains those files I can see all the static files are there in the source code I'm going to open a Javascript file and I can see it's all working fine similarly the CSS file and that is also working fine but in the console I see error here so if I could paste the error back to Devin then it should be able to fix it it but overall the chat plugin is neat and clean with proper structure there is no error in the code it got all the fils include those build files so overall I'm happy with the progress one main concern I have is that if you see the time when I started working in this project 9:55 that's when I asked to create a chatbot you can see from that time it took a long time I was going through I was waiting it's 11: now then it's 11:16 11:21 then it went on 12:30 12:44 and finally we got up to here the response time is slow that could be because there might be more demand or more people working on this or else the server is currently being extended or optimized just because it's a preview version so that's one of the main thing uh for this apart from that I see it's like a friendly interface which planned initially ran all the shell commands for for testing browsed the chatbot interface while developing and fixed error while running the code if I nudge it further probably I can even complete the chatbot plug-in but I'm going to stop it here I'm going to try more complex task in the upcoming days so stay tuned I hope you like this video do like share and subscribe and thanks for watching