So before we get started, I want to show you why this video is worth your time and why it's important to be talking about OpenCode right now because tools00:00

come and go, but momentum and ecosystem usually tells you what's going to stick.00:07

I've collected these three different screenshots here that really show something interesting.00:12

It really shows why OpenCode is worth your time right now.00:17

So when we look at CloudCode on GitHub, it has around 67,000 stars.00:20

But when we look at OpenCode, it has 105,000 stars.00:25

In this month alone, it's gotten 36,517 stars.00:29

On GitHub anyways, OpenCode is more popular than CloudCode.00:35

So I think it's safe to say that OpenCode is not just new and shiny.00:39

It's already ahead in the community adoption signals. But this screenshot here really shows the velocity that's happening.00:43

So it shows that people are switching. People are making content, building plugins, and the workflow is spreading.00:49

So why does this matter? when a tool is moving this fast, you usually get better documentation, more tutorials, more00:57

community configurations, and more. I hit this bug and here's the fix post that makes your learning01:03

curve shorter. All right. Now that this isn't a random weekend project, let's talk about how01:09

open code actually works. So the setup makes sense.01:14

Let's start first by thinking about what01:17

open code really is. So open code is really the open source version of cloud code.01:20

So it can do almost everything that CloudCode can do.01:27

Plus, it has an MIT license and is 100% open source.01:30

And on top of that, it's provider agnostic. You can use it with Cloud, you can use it with OpenAI,01:35

you can use it with Google, and you can even use it with local models.01:41

This is what I think. If01:44

you want flexibility and an open tool that you can shape, OpenCode is probably the better choice.01:45

But if you want to go the official anthropic path and you're already standardized, then01:52

cloud code may be the better choice for you the most valuable point on open code is really this01:57

that it's provider agnostic because when you think about what just happened for instance02:03

anthropic came out with their new ai model and then so did open ai anthropic said that this was02:07

their most powerful coding model and then open ai came out with one that was actually better for02:12

coding right the 5.3 codex and so it's nice to be able to try them both to me this is a really02:16

important point that it's provider agnostic so you can switch around from different ones.02:23

In this video, what I'm going to be showing you guys is how to set up OpenCode on Windows.02:28

We're going to install OpenCode in a Windows-friendly way with WSL.02:32

We're going to connect models and providers and understand where the credentials live.02:37

And I'm going to show you guys02:42

how you can use build mode and plan mode effectively and when to switch between them.02:44

We're also going to set up some project rules with agents.md and a quick refresher on this as well.02:49

And then we'll create some skills and commands that will work globally or per repo.02:55

Why are we going to install it on WSL?03:01

Really, because that's what OpenCode recommends for the best performance and terminal compatibility.03:04

So I'm not going to walk you guys through how to install WSL, but this is the command that you'll want to use.03:09

just go to your terminal, type in WSL dash install, and then it will work for you.03:15

And then we're going to pick it up from right here. We're going to use this command to install open code, and then03:20

we'll go from there. How should we think about open code? Well, open code is easiest to think of03:26

as three layers. First, we have the agents layer.03:31

Who's doing the work? Who's driving right now?03:35

You'll mainly use the build mode and then the plan mode.03:38

The build mode is the do work mode,03:42

and the plan mode is think safely if you're new to a code base plan keeps you from letting an agent03:44

bulldoze the repo and just run off the rails now the second layer is rules how should the agents03:50

behave in this repo that's the agents md that tells the model your project conventions structure03:56

and do slash don'ts rules think of this as like your onboarding notes for a new teammate how to04:03

run tests, the folder structure, formatting rules, what not to touch, how pull requests and commits04:10

work. Without this, you'll end up repeating yourself every prompt.04:16

Now the third layer is the extensions, how we automate repeatable work.04:19

Skills are the reusable playbooks that04:24

the agents can load, and then the commands are like one-shot buttons that you can run with a04:27

slash name. Whenever you're first getting started with open code, you don't want to overbuild a giant skills library on day one.04:32

You just want to focus on two to three real tasks first, and then codify what you end up repeating.04:39

It's really good to just start with a well-rounded agents MD and04:44

using the agents effectively, the build agent and the plan agent.04:48

This is a setup that we're going04:52

to have. We're going to use cursor for editing, open code for agent runs in a WSL environment.04:54

And now the goal is cursor is the editor, WSL is the runtime, open code runs in WSL and edits the same05:00

files that cursor has open so the biggest win here is really consistency one copy of the repo05:06

one set of credentials and one tool chain the workflow is going to be like this we're going05:12

to open up the repo and cursor using the wsl file system integration open a wsl terminal in that05:17

same repo folder and then run open code from there now a good rule of thumb is if your ide05:24

shows that wsl in the bottom left then you got your setup properly working let's hop over to05:29

our file system and open up cursor and i'll show you guys how to set this up i'm going to assume05:36

that you have wsl installed at the very least now whenever we open up a terminal we're going to go05:41

to the top here and this little arrow that's pointing down we'll click that and we can switch05:47

to wsl just by hitting this the ubuntu and now we're in our wsl what we're going to do is we're05:52

going to make a new folder for. Our project. Let's see where we're at right now.05:59

We'll go inside of coding projects or inside of the coding projects.06:03

We're going to make a new directory and we're going to call it open code demo.06:07

We'll go ahead and change into that directory. Open code demo.06:11

And now we'll just go ahead and run a cursor dot. We're going to open cursor up inside of this directory.06:16

And here at the bottom, you can see it's opening up the remote and setting it up.06:22

Now we have that going and there's nothing inside of here yet.06:26

Now we need to install open code and it really doesn't matter in which order you do this like we didn't have to open up the06:29

directory before installing open code i'm just getting it set up so you could do this before but06:35

on the opencode.ai docs it gives us this command to run we're gonna run that now it's finished06:40

installing we're gonna go ahead and run open code in this directory looks like we may need to reset06:46

our terminal i'm just gonna copy this and we're gonna open a new one you have two options here06:51

you could run the terminal user interface here with a separate window, which is the way that I06:56

like to do it or inside a cursor. I'll show you why I like to have it in a separate window.07:01

If we hit control P, it conflicts with cursor.07:06

It's a little bit harder to use there. That's why I have a separate window open for it.07:09

Now that we're inside of open code, what's really nice is that they automatically include free models without us doing anything.07:15

You can see we're running on this model here, the big pickle from OpenCodeZen, and we can ask anything.07:22

Just say hello to make sure it's working. Even just for a simple hello though, it took 16 seconds just to hit back.07:28

Hello, how can I help you? Even though OpenCode does include free models, it takes a little while.07:34

They're not the best. When we hit Control-P, we can see all the different commands that are already07:39

built into OpenCode, and they're broken down by category.07:45

The suggested category for switching sessions, switching models, and they have a few here for free as well.07:49

The mini max, the Kimi and the GLM five and the big pickle.07:55

And we can also connect popular providers here.08:00

I have the chat GPT plus plan. We're going to go ahead and select that.08:03

And we're going to connect it with browser.08:08

And I'm just going to log in here. We have authorized successfully.08:11

We can go ahead and close this. And now we can choose which model that we want to use.08:15

I'm going to use the GPT 5.3 codex because that's their most advanced model right now.08:20

But if we wanted to switch models, then we would just come back here and we can choose which model we would like to use.08:26

The next thing here is whenever we're switching between modes, we're going to use the tab button.08:33

We can see when we hit tab, it changes down here from build to plan and back and forth.08:38

Really using open code effectively or cloud code or any sort of AI assisted programming08:44

application, it really comes down to using both the build mode and the plan mode effectively.08:50

I'm going to break down when to use which for you. The build mode is just do the work mode.08:56

The agent gets full tool access, edits, bash for implementation.09:00

You want to use this when you're ready for code changes and that's best for adding features, refactoring, fixing tests.09:04

a tip as well is keep your prompts specific make change x run test y show diff now the09:11

plan mode that's the thing safely mode is restricted by permissions to prevent unintended changes it09:18

defaults any risky actions to ask what's going to ask you before it does anything before it runs any09:25

sort of risky commands and that's best for designing code reviewing debugging strategy really just09:30

making a solid plan the practical workflow here is you want to start in plan mode you always want09:37

to start in plan mode and then confirm your approach get that super solid make that bulletproof09:42

and once that's bulletproof then switch to build mode and then you'll implement it and then you'll09:48

switch back to plan mode for review now the next step for us is to initialize open code09:54

in our repo in our directory in our folder and what this is going to do whenever we run09:59

this command here, the init, that's going to generate an agents.md in our repo root.10:05

And now what is that agents.md? It's going to be custom instructions for the repo.10:12

It's going to explain the structure, the conventions, the do's don'ts.10:19

The main point is that it helps open code navigate your code base faster and safer.10:22

That's what it's all about. And here's an example of a simple10:27

agents md template it has the setup commands on how to set up the repo and it has some code style10:30

instructions a tip whenever you're doing this is you'll want to commit your agents md so that your10:37

whole team gets consistent agent behavior the goal is just enough structure that the agent10:44

behaves like a teammate who read the readme now we'll run that command we'll hit init and that's10:50

also what's really nice about open code is whenever you hit the slash, you can see all the10:56

different commands that currently exist. It's currently inspecting the repo.11:00

It's making an execution plan and going with it from there.11:06

This time it looks like it even asked me a question. Is this the correct repository path or should I analyze a different directory?11:10

Let me see. Let's make sure that yep, that's the right one.11:17

Say yep. And on windows, if you wanted to type with11:20

your voice you would just hit windows h and now it will start recording my voice that's how you can11:23

implement that if you wanted to vibe code with your voice it's just the windows key and h that's11:30

the shortcut ah so i see so you see the importance of making sure that you're in the correct mode11:35

whenever you start coding it's currently in plan mode so that's why it keeps asking me questions11:39

and asking me to do more things so we're going to hit ctrl p and we'll make a new session and11:44

this time we'll switch out a plan mode and we'll run init now the agents.md file is created.11:49

And I thought this last message is really important. So I want to point that out to you. It says the repository route is currently empty.11:55

So the commands are And intentionally a bootstrap matrix until real project scripts slash configs are added.12:01

So that really comes back to the whole point. Agents.md is not a write it once and forget it.12:07

Agents.md is this file that's living. It's going to change as your repository changes.12:13

You can see currently all the things that it's done. It even has instructions here for if cursor or copilot rules appear later.12:19

It has build and lint commands. It has everything with the JavaScript, Python, Go, Rust.12:26

so it's really complete. Not all this is going to be super important for your individual repo.12:31

This is a living document. You want to change it as your project changes.12:37

And if you wanted to dig12:41

deeper into the agents.md format and its purpose, you can go to agents.md online and you can see12:42

some more additional information and some good examples of some agents.mds.12:49

And you can see here how they recommend using it. Add the file, cover what matters, add extra instructions,12:53

and you can even use these nestedagents.md files for sub-projects.12:58

At this point, we're pretty ready to start making some cool projects.13:03

We're ready to start using it. I'm gonna ask you to just generate a basic Flask application.13:08

I'm gonna say make a basic Flask website for my plumbing company.13:13

This is our color scheme. And I found this color scheme off of colorhunt.co and I really like this website13:17

because it's color palettes that have been curated by professional designers13:23

and it's their favorite ones and you can even see how many likes each one gets.13:27

So it's a cool resource to check out. It's completed the application and it's given me these commands13:32

to run it locally. We'll go ahead and run those.13:37

Let's go ahead and open that up. Now you can see here how well it's used our color scheme and yeah it looks really nice and I'll show you something13:40

else too. If we make this full screen you can see that on this right side under context it shows us13:47

the number of tokens that we used how much of the context window that we're taking up and also the13:53

number of dollars spent we can track all that here and then we can also track lsps this will14:00

activate as files are read and this is what an lsp is it's a language server protocol it's an open14:05

json rpc based standard that allows code editors to communicate with language specific intelligence14:12

tools that's quite a mouthful so let me break that down for you i came across this diagram and14:18

think it explains it really well when we have our development tool here it goes back and forth with14:23

the language server you think about you open a document that's going to send a notification14:28

over to the language server if you edit a document it's going to send a notification over to the14:32

language server and now the language server is going to analyze the changes and look for any14:38

sorts of problems and then send it back the main point of an lsp is this it lets any editor get14:44

smart code features you think about autocomplete go to definition references hover docs linting14:50

rename refactors without the editor needing language specific logic the lsp is really going14:56

to assist the agent in writing code now as we build this site out you think there's going to be15:01

a lot of repeat prompts for instance if we're going to add a new page there's going to be a15:07

particular way that we may want to have that page structured there's going to be as we use open code15:12

there's going to be prompts that we would like to save. And that brings us to our next topic, skills and commands.15:18

You can think of skills this way, as a reusable playbook.15:24

They're not commands15:28

you run, they're knowledge modules that the agent can load when it hits a specific kind of task.15:29

So example, this will be a skill for how we write migrations, or how do we make a new endpoint?15:35

How do we make a new page? And how do we write tests in this repo?15:41

The benefit is consistently this,15:45

instead of re-explaining your team standards every time you encode them once.15:48

Now, as you get more comfortable with using open code and as your repo grows, you're naturally going to build skills.15:52

There's no point in putting a whole lot of effort from day one and coming up with all these different skills.15:59

But once you notice yourself repeating yourself, that's a signal that you may want to capture that as a skill.16:05

And there's a particular structure as well for where to put skills.16:11

If you want it to be per project, you'll put it inside a folder.16:14

You'll call it OpenCode and then you'll make another folder inside of that and so forth.16:19

And then if you want it to be a global skill, you can put it inside of your .config16:23

and you can also even add permissions for it. So the discovery behavior works like this as well.16:29

OpenCode walks up to the Git work tree and loads any matching skills.16:35

And global skills are always available in every repo.16:39

And here we see an example of one.16:42

of a front the required front matter it needs a name and it needs a description and then from there16:44

you can continue with it however you'd like and now commands are very similar but you can16:50

think of these as workflow shortcuts commands are more like buttons you press not so much as16:56

playbooks a command is something that you explicitly run like maybe slash test or slash17:01

review or slash ship and you're going to run these in the open code terminal user interface17:08

Commands are really great when you want repeatability, they reduce the amount of typing and the number of prompt mistakes.17:13

And here as well, there's a particular place that you want to put them as well per project and globally.17:19

And here's an example of one for a slash test. You give it a description of which agent you17:25

want and a model, and then you can put in whatever sort of prompt that you'd17:30

like. So run the full test suite with coverage, focus on failing tests, and17:35

suggest edits you can also add arguments and placeholders by using a dollar sign arguments17:39

and you can even what you can see here actually slash component button create a react component17:45

named button that's where that would come in and then for more than one argument you would just17:52

use a dollar sign and then a number you'd give it a description and then write your prompt and then17:58

You would put the dollar sign and then the number of arguments.18:03

Now, you would create a file named config.json in source with the contents18:06

of key value. And again, just to reiterate, commands are like repeatable prompts.18:13

It's do this now. Skills are how we do this here.18:18

Commands are prompts. Skills are those knowledge playbooks.18:23

and if you wanted to go deeper on any of these topics you can just find them in the opencode.ai18:27

docs so you can see for instance for the it breaks down the required front matter for a skill to work18:33

and the places to put the files etc and along with the commands as well gives you a little bit18:38

more meat as if you want to go deeper in these let's go ahead and try to make our own command18:44

and skill now i've actually put together a skill already we'll go ahead and we're going to copy18:49

this folder with this built-in skill and we're going to put it in our config for open code we're18:54

going to put it right there i'll show you what that looks like as well this command helps scaffold a19:01

new open code skill or command and the usage works like this slash scaffold skill name or slash19:05

scaffold command name you are scaffolding a new open code resource the type is one and the name19:12

is two. If you look at it like this, you're going to run slash scaffold either skill and the name19:19

is whatever you put there. And then it's going to follow these instructions for each one to help us19:25

create either a skill or a command. And we also have global skill and global command.19:30

We have that loaded in our global. We'll go ahead and try it out.19:36

After you add a new command, you're going to need to restart your open code.19:39

We'll hit control C and we'll open it up again. If we go19:44

ahead and use our command and we'll run scaffold and we'll make this a new command and19:47

we're going to call this one a website or let's say a web page actually this will be a command19:55

that we run that will go ahead and make a new web page inside of our app now if we look20:00

inside our directory it's put together a web page command for us create a web page from a20:06

prompt with clear structure and styling so it's even bootstrapped to our command for us let's20:11

go ahead and hit ctrl c to get out of it and we'll reopen it if we do a web page then it runs that20:16

prompt for us another thing too is you can see we're on gpt 5.3 codecs but if we wanted to change20:23

our level of thinking we can hit ctrl t and now we're adjusting the level of thinking on that but20:29

we'll keep it regular for now it's completed a a web page here index.html and it's included20:36

everything that it needs. Now, when we look at our context, you can see we're already at 17,00020:43

tokens. That's not too bad. It's only 4% used, but I'll show you the command as that starts to get20:49

higher. You can just run slash compact, and that's going to compact the session.20:55

That's going to21:00

summarize the session. Now we went from 4% used to 2% used and 9,000 tokens.21:00

Let's go ahead and21:07

scaffold a new skill we'll call this skill and we'll say that this is a copywriting skill and21:09

we can see now that it's bootstrapped for us a copywriting skill what i want to do though is21:16

i'm a really big fan of high focus language so high focus language is whenever you speak to21:22

the person directly and you show them the value very clearly everyone has their own definitions21:27

on what high focus means to them i have some instructions here and i'm going to go ahead and21:32

reference those instructions we can see that it completed it successfully and included this in its21:38

references and it's added the document to the copywriting skill so we can go ahead and delete21:44

this one let's go ahead and modify the copy on this page currently we see it says plumbing done21:51

right the first time from emergency leaks to full fixture installs our experienced team keeps your21:58

water flowing and your home protected. Let's go ahead and use our skill.22:03

Whenever we run the slash skills command, you can see because it was just added.22:07

It's not loaded. We just need to go ahead and do control C open code.22:10

And now if we let's switch sessions, actually, this is the one here and we'll22:15

go ahead and we'll run skills and we'll say, this is the skill we want to run.22:20

And I'll say, adjust the copy on the home page, looking at the copy.22:25

now after it's made the changes it says that it's updated the copy to be more benefit led and high22:30

focus aligned and it gives us a summary of the changes that it's made you can see the clearer22:36

user value and next steps is a little bit more solid that should give you a really solid22:41

introduction to open code just to recap this is the workflow that you'll do every time that you22:46

open up a new code base you put the repo in one environment preferably the wsl environment then22:51

you'll open up open code in that same environment, you'll connect your model provider there, use whichever one you want.22:57

Then you'll do your slash init to generate your agents.md.23:03

Then as you develop, you'll come up with different commands that you think you23:08

want to add either for your global projects or for that individual repo.23:11

And then you'll also add skills. Remembering the difference, commands are like buttons, repeatable prompts, and23:15

skills are more like playbooks for the agent to follow.23:21

If you wanted to go deeper on any of these topics, there's this really awesome article that I read23:25

about how coding agents actually work and inside of open code.23:29

Even this architecture breakdown is really nice. It gives you a really deep dive into how everything is working.23:33

If you want to check this out, what you can do is click the link in the description, join our school community, and there23:39

will be a post that has this video on it. And I'm going to link this article as well.23:45

If you want to check that out, that'll be there. That'll be it for this video.23:48

Thank you so much for sticking to the end. If you enjoyed this video give it a like, subscribe for more content like this.23:51

If you'd like to check out some of my other tech demos you can check that out right over here.23:57