0:07
Hello everyone, welcome back Johnny
0:10
YouTube channel. In this video, I'm
0:12
going to show you this AI pound diagram
0:14
creation tool. Next AI jaw.io.
0:19
This is their GitHub. You may familiar
0:24
online diagram creation website. They
0:27
have their app.d diagrams.net is website
0:31
for free to use. You can create your own
0:33
diagrams. You also can create your own
0:37
jaw.io website as I showing you in my
0:41
previous post. Uh there's a way you can
0:44
create your own jaw io similar website
0:47
using docker run command here. Very
0:50
impressive. Now since AI is became
0:54
standard for our production. Now there's
0:57
a new project called the next AI draw.io
1:00
which we can use those AI tools to
1:04
create the chart or diagrams or
1:07
whiteboard for you immediately just with
1:10
some prompt you entered in there. So
1:13
that's what this video for. I'm going to
1:15
show you how to get your own next ai.io
1:19
how to connect your AI tools together
1:22
and use it. Now let's jump into it.
1:30
project itself does have a demo website
1:35
which you can use to generate your
1:38
diagram immediately without create your
1:40
own. Here is the one I generated before.
1:44
You do able to see some diamonds from
1:49
here with some prompt.
1:54
The reason why I suggest you to create
1:57
your own because uh API
2:00
call has a limitation for this website.
2:04
The developers API has been overwhelmed.
2:08
So sometimes you may be able to see some
2:12
issue when you're trying to use it
2:14
because the daily limitation and the
2:17
request or has cap on it. So let's even
2:22
the developer suggest us to use our own
2:25
API key. So in this video we going to
2:28
show you how to use that or if you have
2:31
your own API key you also can set it up
2:41
For example if you have your open AI key
2:45
then you can enter it here with model
2:49
In this video, I'm going to show you how
2:51
to create your own Nex AI joio website
2:55
on your own server and how to get your
2:59
AI this API keys and then put it in. I'm
3:04
going to use one of my Google cloud VM
3:08
as a demo to show you the steps how to
3:11
create it and eventually we're going to
3:14
create our own domain AI jaw and then we
3:19
can use your own customized domain to
3:26
So let's start to play with uh docker uh
3:30
using the docker command provided by
3:39
So from the github project page you
3:43
should be able to find out the docker
3:47
command. It's pretty simple. You can
3:50
just copy this command and then I'm
3:52
throw it into docker playground shift
3:57
plus insert key. So that's the paste
4:00
command. So you can paste this docker
4:03
run command which is going to this
4:07
project on port 3000. And we are not
4:10
entering our open API key here yet. uh
4:14
but that won't stop us to create this
4:17
application. When we test it the the
4:20
command works well then we can move to
4:23
our docker server environment and then
4:27
get the API key to work on.
4:34
It's pretty fast as you can see 3,000
4:37
this port has been listing in here. You
4:40
can just directly click on it. It should
4:50
After a couple seconds, the website is
4:54
up and running. It's almost exactly the
4:56
same as we showed you from the demo
4:59
side. Here, create the diagram with AI.
5:03
You can create a paper to diagram
5:05
animated diagram AWS architecture
5:09
replicate flow chart creative join. Here
5:14
you need to enter your prompt and then
5:18
telling the AI tools what kind of
5:22
diagram you want to create it. For now
5:25
even we asking create the background it
5:29
will not do anything since we don't have
5:32
API key here. So at least we know how
5:35
it's working. Now next step we going to
5:38
show you how to get the API keys. So
5:42
basically you just need to copy this to
5:45
your browser and then follow the step by
5:48
step I show you and then you can get
5:50
your free API key. There's no cost
5:57
I'm going to use Open AI as an example
6:00
to show you how to get your own free API
6:03
keys. Just paste the URL into your
6:07
browser. Assuming you already have a
6:09
free Open AI account as I'm having, you
6:13
can create your own new secret key here.
6:18
If you don't have your existing key
6:21
store somewhere, then you might need to
6:23
create a new secret key just like I am
6:26
showing here. Or even if you never used
6:29
it, so you don't have one, then create a
6:31
new secret key here. Just saying my last
6:42
So then you're going to have a chance to
6:44
copy this key out and then put into
6:50
here you can use it in your docker
6:54
ground command which is what we are
7:00
I'm going to use one of VM I created in
7:04
Google cloud. This is a free VM. If you
7:07
don't know how to get your free forever
7:11
virtual machine in Google cloud, then
7:14
you can watch my videos here to try to
7:17
get your own free VM. Then you can play
7:19
with it. It doesn't has to be powerful.
7:22
The free tier VM is more than enough for
7:24
you to get this website running. I do
7:27
have a SSH session in browser. So you
7:31
can see I'm running um 22 2404.
7:36
My hard drive has um around 16 gig to
7:40
use and the Docker has been running on
7:44
this machine for a while. I don't have
7:47
any other Docker running on this machine
7:50
right now. So which I can throw into my
7:58
We're going to copy this command and
8:01
it and we're going to put our API key
8:04
here. Then you can copy this
8:09
directly into your virtual machine
8:17
and to let it run. There's no local
8:20
image. That's why it's go online to pull
8:26
3000 the port. Just make sure you have
8:29
this port open. We're going to go back
8:32
to our virtual machine here. Then open a
8:57
All instance in the network
9:08
only allow port 3000.
9:12
Great. Now we can go back our computer
9:21
That's our public IP.
9:26
You can try to access to it.
9:30
Again, right away it's going to prompt
9:33
you up exactly same interface we will
9:36
see in the demo side. Of course, in this
9:39
right now, we have AI connect to it. So
9:43
now we can ask them to create a a zoo
9:47
diagram to show a basic landing zone top
9:52
ofology. Let's send it. So getting shape
9:58
Yeah. Create generating diagram.
10:04
Perfect. So it did their work. Maybe not
10:08
perfectly for your requirement. You need
10:12
to make your prompt more specified for
10:16
your diagram based on what you need. But
10:20
the lab will automatically added some
10:22
component which give you a good started
10:25
just like we can show you. They have
10:29
subnet, firewall, VM those kind of
10:33
things which also give you a good start.
10:35
You don't have to uh find it from
10:38
online. they already put those icons
10:41
into the diagram. So, this works well.
10:44
Um, regarding how to create the diagram,
10:47
you can try to go to the GitHub project
10:51
to find out how. For this video, I'm
10:55
going to show you the next step which is
10:57
to how to using your own domain.
11:04
To complete this step, you do need some
11:08
your own domains, your own MPM setup or
11:12
maybe Cloudflare account. I'm using
11:15
Cloudflare to manage my DNS record. So
11:18
that's what you can see from screen
11:19
which I found is very easy to use and
11:22
very powerful with lots of security
11:24
feature. I don't have AI joist DNS
11:28
record. So I'm going to create one. I'm
11:31
going to create a a record. I'm going to
11:33
enter and then IPv4 address because we
11:38
going to using a reverse proxy mpm I'm
11:42
using here. So in that way I have to put
11:46
my mpm public IP into this settings a
11:52
record point to the mpm and mpn going to
11:57
proxy the request to the final server.
12:02
So, we're going to add a proxy host.
12:05
We're going to put a domain which is AI
12:09
draw. Please make sure you add this in
12:13
here. Now, we can put the
12:17
into this forward or the name IP. Of
12:21
course, the port is 30,000. U make sure
12:25
it's publicly accessible.
12:27
Uh we need to configure our SSL request
12:31
a new SSL certificate here. We're going
12:34
to agree to the term let's encrypt
12:37
that's our SSL service provider.
12:41
Save it. So it's going to turn and going
12:44
to request a new SSL certificate.
12:48
When it get ready, it will show that the
12:51
record into our list mpn engine x proxy
12:56
manager proxy host list. So we see this
13:00
one here now mostly are ready. So let's
13:04
give it try to see how it looks like.
13:06
Now we're going to use in
13:11
So now it's fully working. We have our
13:15
own AI draw io website. We also have our
13:21
open AI embed into the configuration and
13:26
we are using our own domain to access to
13:33
We already deployed it through a docker
13:36
just like recommended from the original
13:39
project developer. Here we're using the
13:42
docker run command. There's also another
13:46
easy way to deploy it if you have Verso
13:50
account. So here it says this the
13:52
easiest way to deploy your next.js app.
13:56
It's still similar vers platform. So it
13:59
even created a button for us to make it
14:02
everything simple. So we're going to try
14:05
this one. I do have vers account and use
14:09
it for some other project. So we're
14:11
going to do same thing. We're going to
14:14
create a new repository for this project
14:17
which going to clone from the author's
14:20
GitHub project. So it's in my hobby
14:24
plan. So going to go to create. You may
14:26
want to know one thing is environment.
14:30
You need to create all those environment
14:33
variables for your project which we're
14:36
going to do that. Perfect. We just
14:38
deployed a new project to NX perfectly.
14:42
We continue to dashboard.
14:44
Let's try to launch it.
14:48
Well, it works. As you can see, just a
14:52
couple of clicks using the version. You
14:55
can deploy it in couple minutes and it's
15:00
same as what we see from the demo and
15:03
it's also completely free. If you do
15:06
have a free account hobby plan then you
15:10
should be able to do it same as what I
15:12
did here. You also can customize
15:16
your domain. Right now we are using
15:20
vo.app app subdomain to access to it but
15:24
you also have option you can customize
15:26
it to your own domain add it here. So
15:30
this part will not cover here because it
15:32
just need to add domain as long as you
15:35
have whistle account you should be able
15:37
to figure that out by yourself. If you
15:39
have any questions for this video just
15:42
let me know. Put your comments feedback
15:45
into this video's description. I will
15:48
respond back as soon as possible. Thank
15:51
you for watching and see you in my next
15:54
video. Don't forget give me thumb up if
15:57
you like this video. Also subscribe my
15:59
channel if you haven't. Bye for now.
![Video thumbnail for Create Your Own Diagram Editing Site with AI Capabilities [5 Min Docker]](https://video-meta.open.video/resized-posters/ro286OVPc72/res640.webp?cb=0)
