OpenDevin Tutorial (Open-Source Devin) - Build Entire Apps From a Single Prompt

Summary

The video introduces Open Devon, an open-source version of the innovative coding assistant Devon. Viewers are guided through its impressive interface, which integrates a terminal, browser, code editor, and agent dialogue. The tutorial demonstrates building a simple Python calculator app and an HTML interface, emphasizing Open Devon's ease of use and rapid development capabilities. Despite being in its early stages with some bugs, the project's active GitHub community and quick feature additions make it a promising tool for developers. The video also covers installation steps, including setting up Python environments, Docker, and API keys, and hints at the potential for using local open-source models.

Takeaways

• 🌟 The video introduces 'Open Devon', an open-source version of the impressive 'Devon' demo, which allows users to build entire code bases through prompts.
• 🖥️ Open Devon features an integrated interface with a terminal, browser, code editor, and agent dialogue, similar to the original Devon but without the closed-source limitations.
• 🔧 The presenter demonstrates how to install and use Open Devon, including setting up a Python environment and Docker, which simplifies the installation process.
• 🔑 The video guides viewers on how to export an OpenAI API key for use with Open Devon, highlighting the need for a developer account and the creation of a new secret key.
• 💻 The installation process involves potential issues with Python package management and environment setup, which the presenter addresses with solutions.
• 📝 Open Devon supports multiple AI models and allows the integration of open-source local models, providing flexibility in choosing the AI backend.
• 🛠️ The video shows the creation of a simple calculator app using Open Devon, illustrating the tool's capability to generate and test code automatically.
• 🔄 Despite being a new project with some bugs and incomplete features, Open Devon is rapidly evolving with an impressive rate of development and community engagement.
• 🌐 Open Devon has gained significant popularity, with over 8,500 stars on GitHub and ranking as the top trending repository, indicating its potential impact.
• 🔄 The presenter mentions another open-source project called 'DEA', which they have not been able to get working, suggesting that Open Devon is a more accessible alternative.
• 🔗 The video concludes with instructions on how to use different models with Open Devon, including setting up a local model and using various embedding models for a completely local setup.

Q & A

What is Open Devon and how does it relate to Devon?

Open Devon is an open-source version of Devon, a tool that was showcased in a demo for building entire code bases with a given prompt. It includes features like a terminal, browser, code editor, and agent dialogue, all in an impressive interface.

What are the main components of the Open Devon interface?

The Open Devon interface includes a terminal, a planner, a code editor for viewing and editing code, a browser for selecting different models to run, and options to choose between Lang chains agent and Code Act agent.

How does Open Devon support different AI models?

Open Devon currently supports Open AI and Cloud models, but it also allows users to easily plug in an open-source local model by setting the appropriate environment variables.

What is the significance of the Open Devon project being open source?

Being open source means that the project's code is freely available for anyone to inspect, modify, and distribute. This encourages community contributions, improvements, and transparency, which can lead to rapid development and innovation.

How can one install and set up Open Devon on their local machine?

To install Open Devon, one needs to clone the repository from GitHub, set up a conda environment for Python, install Docker, export the Open AI API key, set the workspace directory, and install the requirements using pip. The process also involves running Docker and setting up both backend and frontend servers.

What issues did the presenter encounter during the installation of Open Devon?

The presenter faced issues related to Python package management and environment management, including the need to install Rust for a dependency, dealing with the ojson package, and running into problems starting the server with uicorn.

How does Open Devon handle the creation of a simple calculator app?

Open Devon creates a simple calculator app by starting a new task, writing the code in the code editor, and testing it through the terminal. It also allows for further iteration, such as creating an HTML interface for the calculator.

What is the current status of the DEA project mentioned in the script?

The DEA project is another open-source version of Devon, but the presenter has not been able to get it working despite daily attempts. The presenter plans to create a tutorial video for DEA once it is successfully operational.

How can users contribute to the Open Devon project?

Users can contribute to the Open Devon project by creating issues on their GitHub repository when they encounter bugs, suggesting new features, or even contributing code if they are open to it.

What is the current popularity of the Open Devon project on GitHub?

Open Devon has gained significant popularity, with over 8.5 thousand stars and being listed as the number one trending app on GitHub at the time of the script.

How does Open Devon compare to the original Devon in terms of user interface and functionality?

Open Devon aims to mimic the polished user interface and functionality of the original Devon, offering a comprehensive environment for coding assistance, despite being in its early stages and having some bugs.

Outlines

00:00

🌟 Introduction to Open Devon: The Open Source Alternative to Devon

The script introduces Open Devon, an open source version of the impressive Devon demo. The original Devon had a remarkable interface combining a terminal, browser, code editor, and agent dialogue, but was closed source. Open Devon, which has quickly gained popularity with over 8.5k stars on GitHub, is demonstrated with its ability to write a simple Python calculator app and create an HTML interface for it. The presenter highlights the project's newness, potential bugs, and the rapid pace of development, while also mentioning another open source project, DEA, which they have yet to successfully run.

05:01

🛠️ Setting Up Open Devon: Installation and Initial Challenges

The script details the process of setting up Open Devon, starting with cloning the GitHub repository and setting up a new conda environment. It emphasizes the importance of Docker for simplifying the installation process and checks for its presence. The presenter then guides the audience through installing Docker if necessary, pulling the required Docker image, and setting up the Open AI API key. They also mention the need to handle Python package management and environment issues, sharing their personal experience with solving problems related to Rust and oJson dependencies.

10:01

🔧 Running Open Devon: Navigating Bugs and Configuring the Environment

The script describes the steps to run Open Devon, including starting the backend server with uicorn and the frontend server using npm. The presenter encounters and resolves issues with server freezing and restarting the terminal, which resets environment variables. They also discuss the process of setting up a local model and configuring the API keys for different models, aiming for a completely local setup. Despite some bugs with the planner and browser functionalities, the terminal and code editor are confirmed to work well, showcasing the project's ongoing development and potential.

Keywords

💡Devon

Devon refers to a demo of an AI coding assistant that was showcased a few weeks prior to the video's recording. It was noted for its impressive interface that included a terminal, browser, code editor, and agent dialogue, all in a single environment. The video discusses an open-source version of Devon called 'Open Devon,' which the speaker demonstrates and explains how to install and use.

💡Open Source

Open source is a term used to describe software whose source code is available to the public, allowing anyone to view, modify, and distribute the software. The video discusses 'Open Devon,' an open-source version of the original Devon demo, emphasizing the community-driven development and the ability for users to contribute to the project.

💡Interface

In the context of the video, 'interface' refers to the visual and interactive elements of a software application that allows users to interact with it. The original Devon demo was praised for its incredible interface, which integrated various tools like a terminal, browser, and code editor, creating a seamless user experience.

💡Code Base

A code base is the total collection of source code for a software project. The video script mentions that the AI assistants in the Devon demo were capable of building out entire code bases from a given prompt, highlighting the advanced capabilities of the AI in generating comprehensive software solutions.

💡Python

Python is a high-level, interpreted programming language known for its readability and versatility. In the script, the speaker asks Open Devon to write a simple calculator app using Python, demonstrating the AI's ability to generate functional code in a popular programming language.

💡HTML Interface

An HTML interface is the front-end part of a web application, written in HTML, which defines the structure and layout of the web pages. The video describes how Open Devon was used to create an HTML interface for the calculator app, showing the AI's capability to handle both back-end logic and front-end design.

💡Docker

Docker is a platform that allows developers to develop, ship, and run applications in containers. The video mentions Docker as part of the installation process for Open Devon, indicating its use for creating a consistent and isolated environment for the software to run in.

💡API Key

An API key is a unique code passed in by computers to access or identify a user, device, or service. The script describes the need to export an Open AI API key for Open Devon to function, which is used to authenticate requests to the Open AI service and enable the AI functionalities.

💡GitHub

GitHub is a web-based platform for version control and collaboration used by developers to manage and host their code. The video script mentions GitHub as the platform where Open Devon is hosted, where users can find the source code, contribute to the project, and track issues.

💡Environment Variables

Environment variables are a set of dynamic values that can affect the way running processes will behave on a computer. The script explains the use of environment variables to store the Open AI API key, which is essential for the software to access the necessary AI services.

💡Uicorn

Uicorn is a Python web server for asyncio applications. In the script, the speaker mentions using Uicorn to run the backend of Open Devon, which is responsible for handling the server-side logic of the application.

Highlights

Introduction of Open Devon, an open-source version of the impressive Devon demo with a comprehensive interface.

Demonstration of Open Devon's capabilities in building entire code bases from prompts.

Open Devon's interface includes a terminal, browser, code editor, and agent dialogue.

Support for Open AI and Cloud models with the option to plug in open-source local models.

Difference between Lang chains agent and Code Act agent in Open Devon is unclear.

Building a simple calculator app with Python using Open Devon's interface.

Open Devon's quick setup and execution of a basic app, showcasing its efficiency.

Creating an HTML interface for the calculator app using Open Devon.

Open Devon's affordability in terms of token usage for building apps.

Open Devon's rapid growth with over 8.5k stars on GitHub and being the top trending app.

Mention of another open-source version of Devon called DEA, which the presenter has not successfully run.

Instructions on how to install Open Devon, including cloning the GitHub repository.

Setting up a new conda environment for Open Devon and using Docker for easier installation.

Exporting the Open AI API key for use with Open Devon.

Potential issues with Python package management and environment setup.

Installing Rust and dealing with o Json dependency issues.

Running into problems with uicorn and server setup, and how to resolve them.

Setting up the front end of Open Devon using node and npm.

How to switch between different models, including local open-source models, in Open Devon.

Open Devon's current state with some bugs but rapid feature development.

Encouragement for users to try Open Devon, contribute to its development, and report issues.

Transcripts

do you remember Devon that incredible

demo that we saw just a couple weeks ago

where you gave the agents a prompt and

they built out entire code bases and I

know we've seen stuff like that before

but what really set Devon apart was the

fact that it had this incredible

interface that included the terminal the

browser the code editor and all the

agent dialogue and it was really

impressive but it had one major flaw it

was completely closed source and not

more than a couple days after that demo

went viral now we have a completely open

source version of Devon called open

Devon and today I'm going to show it to

you and that's what you're looking at

right now so I'm going to show it to you

I'm going to show you how to use it and

I'm going to show you how to install it

so this is it and I already set it all

up so let me show it to you first so it

says hello I'm Devon and I asked it

write a simple calculator app with

python so it started writing a new task

here on the right side you can see the

terminal very akin to the original Devon

we have the planner over here we have a

code editor where you can actually see

all of the code and then we have the

browser over here you can select the

different models that you want to run so

right now it supports open Ai and Cloud

3 but you can easily plug in an open

source local model as well and then over

here we have the browser and you can

choose between Lang chains agent and

code act agent and to be honest I don't

actually know the difference between

these two I haven't had a chance to test

code act agent so I'm using langing

chains agent but let's continue so

starting a new task then we go over to

the the terminal and we can actually see

so command LS there it is it looks where

it's at then it's reading from the

app.py it seems there's already a file

that does this it's a calculator app and

so on and so forth and you can see all

the output here it even tested it for me

which is really nice and then after all

that which really just took a few back

and forths and it's a very simple app

build a calculator app all done what's

next on the agenda I iterated on it so

now make an HTML interface for the

calculator so starting a new task and

then it went back and forth spun up

Local Host even tested it made sure it

all worked and then it was done so all

of this was actually pretty inexpensive

tokens wise um but it was really

impressive and you can run the

calculator like this so python

calculator. piy or you can spin up a

server and here's the calculator this is

what it built for me with just that

simple prompt so you put in your number

right here put in another number I'll

say four calculate very very basic but

the point is it works now I'm back at

open Devon and I am running it on Local

Host so this is running locally I am

using gp4 although I could easily swap

out an open source model which I'll show

you in a bit now the important thing to

remember is this project has not been

around long I'm talking days so there

are still some bugs some features still

don't work but it is very usable and the

rate of progression and new features

being added is super impressive

impressive so this is the project open

Devon it has over 8 and half thousand

stars already and if you look at GitHub

trending it is the number one trending

app on GitHub so this is going to grow

quickly and if I scroll down a little

bit there's another open source version

of Devon project called DEA although I

have tried every single day to get this

working and I can't so I'm going to keep

trying as soon as I can I'll make a

tutorial video for that but I am able to

get open Devon working and it works

really well so enough talk let me show

you how to install it I ran into a bunch

of issues hopefully I will show you how

to solve all of them and most of the

issues actually have nothing to do with

Devon they have to do with python

package management and environment

management which you know is the bane of

my existence so open a visual studio

code and that's where we're going to

start click on this button to toggle the

panel and we're going to open up our

terminal and what we're going to do is I

like to put stuff on my desktop when I'm

first playing around with it so we're

going to CD to the desktop now switch

back to the open Devon GitHub repository

you're going to click this green code

button right there and we're going to

copy the GitHub repo URL now we're going

to switch back to our terminal and we're

going to type get clone and then paste

in that URL and then hit enter and

that's it we've cloned it to our desktop

next we're going to CD into open Devon

and next we're going to click this

little button right here Explorer we're

going to open folder select the desktop

and then we're going to select open

Devon and now we have the open Deon

project open in Visual Studio code all

right now that we have that going let's

spin up a new cond environment so we're

going to do condac create DN o for open

Deon python equals 3.10 and we're going

to hit enter now I already have an

environment named that because I've gone

through this once to make sure it all

works before I show it to you so you're

not going to see this but go ahead and

install it just hit enter all right once

that's done we're going to grab this

Command right here cond to activate OD

copy paste it and it should say OD right

here it may not in your terminal if your

terminal structure is a little different

but for me I show it right there so

there we go we have o activated the next

thing you're going to need is Docker and

I'm really glad that they use Docker

because it makes the entire installation

much easier and you can actually run

these code environments in a completely

dockerized environment so to check if

you have Docker you're going to type

Docker PS and I do and there it is

however when you run Docker PS you might

get Docker is not recognized and if

that's the case you need to download

docker so you're going to come to docs.

do.com sengine install and you're going

to look for the docker desktop client

that matches your operating system so

I'm on a Mac so I click right there once

you do that it'll download and

everything else is really just drag and

drop or kind of clicking through an

interface it's very very easy you don't

need to do anything in console once

you're done with that open up vs code

again and you're going to type Docker PS

and now you should see at least this top

row right here container ID etc etc so

the next thing we're going to do is pull

the docker image and again this makes

everything really easy so we're going to

type Docker pull

gc.

iops sandbox colon

v0.1 and hit enter and there we go it's

150 megabytes downloads quite quickly

extracts and we're done so that worked

perfectly okay next we need to export

our open AI API key so to start we're

going to use open AI but I'll show you

how to set up a local model towards the

end of the video so if you don't already

have an open AI account go ahead and

sign up you need a developer account

platform.

open.com ai- Keys you're going to click

create new secret key and I'm going to

type odop Devore YT so I know it's for

YouTube and I will revoke this key

before publishing this video click copy

go back and we're going to export it

just like that and then hit enter okay

now we've exported it and basically what

export it does is it saves it as an

environment variable that we can use

with this software however the better

way to do it is to actually create a EnV

file and store it there but I'll leave

that for you to do the next thing we

need to do is set our workspace

directory and so what I'm going to set

it as is export workspace Ford equals

squiggly line/ desktop slop Deon so I'm

going to keep the workspace in the open

Devon folder just to keep it all in one

place so go ahead and hit enter there

all right now we're going to going to

install the requirements and this is

where I started to run into some

problems so I may not run into it again

just because I've solved them already

but if I do I'll show it to you and even

if I don't I'll show you the problems I

had and I'll show you how I solved them

so we're going to type which python okay

and this is only because we want to make

sure that we're using the correct python

for installing with Pip so we grab the

python version we're using then we

simply paste that in type-m PIP install

dasr requirements. txt then hit enter so

one of the issues that I faced is that

this project requires rust and

specifically the dependency o Json

requires rust and I didn't have it

installed and so I had an error here so

I didn't have it this time so this is

going to be a little bit of behind the

scenes but anytime that I do a tutorial

video I go through it once without the

camera recording and I document every

step along the way and I also document

any errors or bugs that I run into so

that when I go to record I it doesn't

take me forever so I did have to install

rust and to do that I used this command

curl d-pro parentheses equals htps D-

tlsv1.2

dssf and then so on and by the way I'll

drop all these commands in a GitHub gist

just so you have them and you don't have

to try to copy them and the next thing I

had to do was restart the terminal so

keep that in mind so one other thing I

want to point out another issue that I

ran into is the o Json issue and to

First fix it I installed rust and then I

ran into another issue with o Json and

to fix that I did this pip uninstall or

Json and then I installed it again using

this longer command which basically

installs the binary version that is

specific to my Apple silicon and that

was the problem and all of these

problems might be very specific to my

machine and you might run into other

problems I recommend Consulting Ai and

it will help you just copy paste

whatever issue you're running into and

it usually will give you some pretty

good suggestions so that command is PIP

install D- noach d-- only binary colon

all colon o Json and once I did that it

finally worked and if you do restart the

terminal you need to export the open AI

API key again because as soon as you

restart the terminal all of those

temporary environment variables are

wiped that's why using the EMV file is

always better all right now that that's

all done we're going to try try to spin

up the server and hopefully it works it

uses uicorn and this is the back end so

we need the back end and the front end

working so let me show you what to do

here uicorn open de. server. listen

Colona d-port 3000 now let's see if I

run into an issue last time when I tried

to spin up the server it would just

completely freeze and so I actually had

to restart the terminal anyway so we'll

see if we have to do that here all right

so it is looking like it's hanging again

unfortunately so what we're going to do

is hit controll C to try to quit out of

here although I think it's completely

Frozen so we're going to have to hit

contrl Z and that'll force quit it and

so let's try it again and if this

doesn't work I'm going to try restarting

the terminal completely again all right

maybe I'm being a bit impatient but I

don't think it's working so I'm going to

hit oh I spoke too soon look at that so

the second time it did work maybe it's

doing some downloads in the background

I'm not sure but it did work on the

second go so we have uicorn running at

Local Host 3000 perfect

now what we're going to do is we need to

now install and spin up the front end so

we click the little plus button right

here we wait till we get our new

terminal up and running we're still in

the open Devon folder and we still have

OD cond environment running so just

verify those things now we're going to

CD into the folder called front end and

we're going to be using node to install

it an npm and if you don't have node if

you don't have npm you need to go Google

that and or use Claud or GP or something

and just get those two things installed

it should be pretty straightforward I

believe if you're using a Mac you can

even use Brew so you could do like Brew

install npm and it should work I believe

all right so there it is so that would

work so now we have npm installed all

right so now that we have node installed

let's do npm install and that's going to

install all the front-end packages now

luckily I have much fewer issues using

npm and the whole node e ecosystem and

package management with node much fewer

issues than I do with python so

hopefully you don't run into anything

okay now that we have all of the node

packages installed we are simply going

to spin up the node server now so npm

run start-- space- dport space 3001 and

then hit enter and that's it we should

be up and running now let's give it a

try so I'm going to click on this Local

Host right there actually I'm going to

hold down command then click on the

local host and there we go open Dev

it worked wonderful so it takes a few

seconds to initialize the agent and I'm

going to switch to GPT 4 over here and

there we go hello I'm open Devon what

would you like me to build so I'll say a

simple website that says hello world and

now we'll see it working a little bit

starting new task we can also click over

to the planner now I've noticed the

planner doesn't really update that often

or maybe even at all um maybe that's a

little buggy I've also found the browser

doesn't really work all that well to be

honest the terminal seems to work great

and the code editor definitely works so

I mean there is the code there's the

hello world HTML file perfectly done so

here we go it's starting up a server all

by itself and it visited Local Host 8000

so if I actually go over to the browser

it did switch and go over to Local Host

8000 so it kind of works but there's

some little bug and it doesn't work

completely yeah and if I go back to the

logs from the back end I can see that

there was an error here and it exited so

that's it it so definitely still buggy

but they're making a ton of great

progress now let me show you how to use

basically any model including a locally

run open source model so if you wanted

to use Claud you just export these

things right here so the llm API key and

then the llm model you export this and

you do that from terminal now if you did

want to use a local model you do llm

base URL and you change it to Local Host

3000 and then you can use LM Studio you

can use ol llama you can use anything

you want as long as it exposes an open

AI compatible API endpoint and you can

even select llama 2 for your embedding

model which is really cool so you could

technically get this to be completely

local if you wanted so they are truly

trying to mimic what Devon has done and

Devon is super impressive it is

definitely not the first time we've had

coding assistance it's actually far from

it but it is one of the most if not the

most polished user interface that I've

seen so I'm really excited for open

Devon I've tried this other project DEA

a bunch and I haven't gotten it to work

but open Devon works pretty darn well so

give it a try create issues on their

GitHub repository as you come across

them contribute if you're open to that

and open Devon can be something really

special that helps developers and even

non-developers be really productive at

building code if you liked this video

please consider giving a like And

subscribe and I'll see you in the next

one