00:00:02
good evening friends
00:00:05
today we're going to get magic ml setup
00:00:07
magic ml is an aide is an AI development
00:00:12
environment for creating chat Bots and
00:00:15
workflows and pipelines and other kinds
00:00:18
of AI ml sort of task based sort of
00:00:23
projects
00:00:24
it requires Docker yarn and node.js18 or
00:00:29
higher you can use npm but I suggest you
00:00:32
use yarn instead of npm
00:00:34
should use Docker you don't need Docker
00:00:37
you could set up the containers
00:00:39
especially the postgres database locally
00:00:41
but we suggest to use Docker it's a lot
00:00:44
easier to get set up and you should
00:00:46
definitely make sure using node.js 18 or
00:00:48
higher we're using some of the latest
00:00:51
isomorphic JavaScript stuff yeah I smart
00:00:55
for me that's it's like the front end
00:00:57
and that requires no JSA team
00:01:00
if you're going to do any of the more
00:01:02
advanced voice video processing stuff
00:01:05
that we have available including Discord
00:01:07
voice you should make sure that you um
00:01:09
also sorry a Google search or any kind
00:01:12
of browser automation you should make
00:01:15
sure that you're installing a chromium
00:01:17
fmpeg and xpfd
00:01:20
um
00:01:20
and then we can get installation right
00:01:23
to get our goal is to kind of get to
00:01:26
this window or at least sort of a blank
00:01:27
version
00:01:28
so the first thing we want to do is
00:01:30
we're going to want to clone the repo
00:01:33
um I'll you also need to get installed
00:01:34
obviously you can do this with the GUI
00:01:38
get I'm going to do this in Linux on my
00:01:40
terminal it's much the same
00:01:42
so let's see I'm going to go here I
00:01:44
actually have the project installed but
00:01:46
I will do this from a new
00:01:49
perspective of a new install
00:01:51
so let's make a new terminal
00:01:53
we've got here and I'll type in get
00:01:56
clone magic ML and I will say uh demo
00:01:59
magic demo
00:02:02
great
00:02:06
and it will take a little while this
00:02:07
clone is quite large
00:02:10
um okay well let's go and talk about
00:02:12
what we're going to do next
00:02:14
uh npm install well
00:02:18
well I did say we should use yarn
00:02:21
I can use npm install or you can use QRS
00:02:23
whatever you want
00:02:26
um Ellie's yarn install
00:02:31
nope sorry I'm sorry to go in there
00:02:32
first so I put the CD into my folder
00:02:38
and so as of right now we have quite a
00:02:42
lot of dependencies in here we're
00:02:44
extracting them out into a plug-in
00:02:46
system so you can install Discord or
00:02:49
Twitter or whatever kind of plugin you
00:02:50
want
00:02:51
um or many plugins
00:02:54
um with the goal of being able to Route
00:02:56
data from you know you can your agent
00:02:58
can connect to Discord but also be
00:03:00
connected to Twitter and and use both
00:03:02
these data sources input and output
00:03:05
um right now all that's actually an
00:03:07
internal to the project so it's quite a
00:03:09
large install so while that is
00:03:11
installing
00:03:13
um I do have uh another cake that's been
00:03:17
in the oven for a while
00:03:19
um this is just another install of
00:03:21
magical
00:03:24
so assuming that that install is
00:03:26
finished the next thing we're going to
00:03:28
want to do is npm run Dev now this is
00:03:30
the Quick Start I'll show you the slow
00:03:32
start after we've done the quick start
00:03:33
because it's a lot easier for
00:03:35
development to split up the uh these
00:03:39
pieces in case you want to refresh
00:03:40
things
00:03:41
so NPR on dev
00:03:46
and that's going to start abbreviate the
00:03:49
database all these containers with cache
00:03:51
server which is redis
00:03:57
goes through
00:03:59
redis that is
00:04:01
I always wonder
00:04:03
I hear it both ways
00:04:07
go see what the founder said
00:04:11
um it looks like the server is loading
00:04:12
on 8001
00:04:14
and probably somewhere buried in there
00:04:17
our client started up on
00:04:21
4200 yeah so that's our our client so
00:04:24
we're gonna open that up
00:04:27
um so there's a couple of common gotchas
00:04:29
that I'm gonna show you
00:04:31
one of them I'm gonna make a new
00:04:34
temporary window sorry I'm just gonna do
00:04:37
this off of my screen
00:04:39
because I've already opened this here
00:04:41
and I've already accepted my
00:04:42
certificates and you might have an issue
00:04:44
I want to make sure that we just
00:04:46
troubleshoot that really quick
00:04:50
so
00:04:51
we probably won't have any open windows
00:04:59
and it will probably look either like
00:05:00
that window or like this
00:05:04
um
00:05:06
but I'm going to take that into my
00:05:08
temporary window to show you this
00:05:09
troubleshooting thing real quick
00:05:11
so we're using self-signed certificates
00:05:14
and SSL
00:05:16
so you can avoid this by creating your
00:05:19
own SSL certificates and putting them in
00:05:21
the search directory of
00:05:23
um the the project repo but you're
00:05:26
probably not going to do that you're
00:05:28
probably going to want the easy thing
00:05:29
that doesn't require understanding a
00:05:30
bunch of certificate stuff so I'm going
00:05:33
to show you the sort of hockey way to
00:05:34
get around that
00:05:36
if I go into my console you will see
00:05:38
that I have an error and I'm stuck on
00:05:40
this please wait and so if you're stuck
00:05:42
here you see this and then check your
00:05:44
console you don't have to check your
00:05:46
console you just go there but it's a lot
00:05:47
easier to find where you got to go by
00:05:49
checking your console
00:05:50
so I'm going to copy this link address
00:05:54
and make that away and you'll see my
00:05:56
connection is not private
00:05:58
um the reason is just because the
00:05:59
certificate Authority that issued the
00:06:01
certificate is not associated with my uh
00:06:05
like my computer doesn't trust it
00:06:07
basically and
00:06:10
you know your computer won't trust it
00:06:11
either so if you press Advanced you can
00:06:13
proceed to localhost now
00:06:17
I'll help you with one other
00:06:18
troubleshooting thing you might say well
00:06:20
but I don't see in advanced okay great
00:06:23
so let's load Chrome right
00:06:26
pull that
00:06:30
um I recommend using chromium for
00:06:32
development uh just generally it
00:06:35
um has some nice features
00:06:37
but Chrome is nice too
00:06:43
so that's going to load up
00:06:45
I'll just uh load up profile
00:06:49
and if I go to this
00:06:52
you will see oh hey look at that
00:06:55
advanced
00:06:57
okay well it actually allowed me now in
00:07:00
previous versions Chrome it didn't allow
00:07:01
me and uh so what I would type is this
00:07:04
is unsafe if you're not if you can't get
00:07:06
through on Chrome type this is unsafe
00:07:09
you can also type I know what I am doing
00:07:12
but I suggest you type this is
00:07:15
shorter
00:07:17
um and you could look it up you know you
00:07:18
can see that on like a Mac you're gonna
00:07:21
have to do that in order to get through
00:07:23
um
00:07:24
you know it is unsafe but we're
00:07:26
connecting to ourselves I think it's
00:07:28
gonna be okay
00:07:30
okay so you can see we have no spells
00:07:32
um this is actually our back end server
00:07:34
if you type slash spells to our server
00:07:36
you can see it's got no spells
00:07:38
but in our front end we can also see
00:07:39
there's no spells let's refresh that
00:07:41
really quick
00:07:42
and then you can see we've got no spells
00:07:44
for sure so let's create a new spell
00:07:47
um I would like my spell to be named
00:07:50
I'm just going to Echo my response back
00:07:54
so I'm just going to tell I'm going to
00:07:55
call it Echo
00:07:57
cool this is I want my input to be my
00:07:59
output so this is what you should be
00:08:00
seeing
00:08:01
my inspector
00:08:04
um
00:08:06
so let's just give a quick outlay of
00:08:08
what's going on here
00:08:10
um this is called your composer this is
00:08:11
where you actually built your node
00:08:12
graphs you can put node graphs inside of
00:08:15
node graphs and so this is kind of how
00:08:17
you can post them up here you can add
00:08:20
many note graphs open many up and and
00:08:23
kind of switch between them
00:08:26
um over here if you have a node that has
00:08:28
text editor it will show up here
00:08:31
let me show you what that looks like if
00:08:33
I go and create a variable let's say a
00:08:36
few shot variable which is just a fancy
00:08:38
way of saying
00:08:40
AI way of saying
00:08:42
prompt or text
00:08:45
um
00:08:46
I will uh you will see that I have a
00:08:48
text editor right here right and I can
00:08:50
save it and then I can take that and
00:08:52
put into other things it's very useful
00:08:54
for building a few shot templates and
00:08:56
other kinds of tasks
00:09:00
I have a state manager the state manager
00:09:03
um I can store State across the graph so
00:09:06
I have the ability to write and read
00:09:08
State and I also have access to the
00:09:10
state in certain nodes like the code
00:09:11
node so this is kind of a way to track
00:09:15
graph state
00:09:16
uh if you want to you really don't have
00:09:18
to use this but some people like to
00:09:20
think of like kind of a you know having
00:09:22
state that propagates from the beginning
00:09:24
to the end and then you can grab that
00:09:26
state and then even like bring it back
00:09:27
in the next Loop and put it back in at
00:09:30
the start so that you can create kind of
00:09:32
a statefulness that way I tend to use
00:09:34
events and recalling events for kind of
00:09:37
say for loot but this this is a good way
00:09:39
to do it this is also fairly performant
00:09:42
and it's just passing an object around
00:09:45
um the event manager so this lets me
00:09:49
view all the different events
00:09:51
um against uh I can just arbitrarily
00:09:54
create and save events like if I in my
00:09:57
agents I can store event
00:10:00
um events
00:10:02
that's how I start conversation usually
00:10:04
um the primary event is like a main
00:10:06
event and then if you want to store a
00:10:07
secondary event you can put it there
00:10:10
um and that would be like the speakers
00:10:12
as a message and then the agent response
00:10:14
to it or the topic changes and maybe you
00:10:17
want to start the old Topic in the in
00:10:20
the topic change right
00:10:21
um and that way you only have to recall
00:10:23
the last topic to also get the little
00:10:24
topic
00:10:25
um and then you can even do like
00:10:26
comparisons and you know things like
00:10:28
that
00:10:29
um what else we also store facts this
00:10:31
way um but usually I only use the
00:10:33
primary event and I'll just add facts or
00:10:35
I could add agent facts and primary vet
00:10:37
and speaker facts in the secondary
00:10:39
um you know I can imagine a lot of
00:10:41
different ways I might use that I also
00:10:45
have a
00:10:46
recall event
00:10:48
ventricle this is kind of the opposite
00:10:50
this actually gets the event back
00:10:54
um great so
00:10:57
um then I also have an agent manager so
00:10:59
agent manager lets us create agents
00:11:01
agents uh some UI is not too great but
00:11:05
basically you put in like your open AI
00:11:08
key your ethereum keys and then you can
00:11:10
enable different
00:11:12
excuse me um
00:11:13
a uh connectors for your agent this is
00:11:16
Kyle you can have an agent that you know
00:11:18
is multimodally aware of input and
00:11:21
output streams on all of these different
00:11:23
uh sort of
00:11:26
um platforms so right now we're really
00:11:29
focused on Discord and Twitter
00:11:31
um the rest we have written the code for
00:11:32
and tested at some point but they're
00:11:34
temporarily deprecated we'll bring them
00:11:36
back to the new plugin system
00:11:38
um but the two that really focus on are
00:11:39
right here
00:11:41
um and if you want your agent to do any
00:11:42
kind of AI stuff you will definitely
00:11:43
need to put an open AI key
00:11:45
cool
00:11:47
um the Avatar down here is for
00:11:48
previewing uh it will play back voice
00:11:50
and mouth moves eventually we'll have uh
00:11:54
integration with our character creator
00:11:55
stuff this is a little bit temporary
00:11:56
right now just for testing
00:11:59
um but this this is designed to sort of
00:12:01
all unified interact with your agents so
00:12:03
you can uh
00:12:05
communicate with an agent if you want to
00:12:07
you don't have to do embodiment this is
00:12:08
just kind of for fun you can totally
00:12:10
close that and not even think about
00:12:12
avatars as part of your thing if you're
00:12:13
just doing rest crafts and stuff don't
00:12:15
don't worry about the avatar
00:12:17
um so this this whole thing is actually
00:12:19
exposed as a rest API
00:12:21
um right now it's unauthorized we're
00:12:23
assuming you'll bring your own
00:12:24
authorization and wrap it on top
00:12:26
but if the community wants authorization
00:12:28
we'll add it
00:12:30
um Marcel wants to build it
00:12:32
um that means that if you were too
00:12:34
exposes to the internet people could
00:12:35
access these graphs and run them
00:12:37
um if you built the authorization on top
00:12:39
that also means that you know you can
00:12:41
safely just build rest endpoints with
00:12:43
this tool not not even really thinking
00:12:45
about agents or anything at all
00:12:47
but the agents are really a way to
00:12:49
create the statefulness of a of us of a
00:12:52
the agent the difference is that the
00:12:54
agent carries its own State and does its
00:12:56
own action as opposed to somebody coming
00:12:57
and hitting your rest API and basically
00:12:59
just calling this graph right here and
00:13:01
getting an output but if you wanted to
00:13:03
have an uh just you know a rest API
00:13:05
Builder that ran your notebook this
00:13:07
could be really really helpful for
00:13:08
running some arbitrary JavaScript or
00:13:10
python or notebooks or or of course the
00:13:12
whole complex pipeline of logic and all
00:13:15
that
00:13:16
um
00:13:17
so sorry I digress going on into the
00:13:21
rest of the UI here
00:13:24
um you see we have the uh the play test
00:13:25
uh and the console so the console let's
00:13:30
drag it over here
00:13:32
um the console shows you output of
00:13:34
certain nodes
00:13:36
um
00:13:36
and the play test lets you drive input
00:13:39
into the nodes
00:13:40
so the play test there's two different
00:13:41
kinds of ways you can use it
00:13:44
um but I'm gonna have to show you uh in
00:13:46
the context of kind of building up this
00:13:48
uh this little graph we're going to do
00:13:52
um so I have a trigger n
00:13:54
I have an input I have an output right
00:13:59
great I'm gonna
00:14:00
um
00:14:02
take the trigger in and make sure that
00:14:04
it says received from play test and for
00:14:05
this output I'm also going to make sure
00:14:07
that that is true and then for the
00:14:08
output the same I'm going to send a play
00:14:10
test I want to make sure that those are
00:14:11
all true and then in the middle I'm
00:14:14
going to add
00:14:15
an echo node and the echo node just
00:14:18
shows me a result of whatever's coming
00:14:19
through uh but one thing this may be
00:14:22
fixed but we've noticed that if you just
00:14:24
kind of Drive the output directly into
00:14:25
the input the the craft Runner doesn't
00:14:27
really like that because it doesn't have
00:14:28
any work to run
00:14:30
um to set the values
00:14:33
um so we have to have some kind of work
00:14:36
between our inputs and outputs yeah I
00:14:38
mean we it's kind of an edge case that
00:14:39
you would ever not have some kind of
00:14:41
work anyway right even if it was a
00:14:43
decision to not send work so this is
00:14:46
kind of the most MVP
00:14:48
you know minimum viable graph that I
00:14:51
just get some input sense of output
00:14:55
I can save it by going to file save
00:14:58
um and I say pretty constantly also
00:15:00
since this is very very Alpha technology
00:15:02
I highly recommend that as you save you
00:15:04
also export your spells that way later
00:15:07
you will be able to import them back
00:15:09
into your graph
00:15:10
okay
00:15:11
so
00:15:13
um all good got your input got your
00:15:15
output uh got your Echo
00:15:18
and let's say hello world
00:15:22
and you can see well I said hello world
00:15:24
and I got a response of hello world
00:15:27
uh and so it did what I expected it to
00:15:29
do now if I were to not have those
00:15:32
connected what would happen
00:15:36
ah nothing I get no response so clearly
00:15:39
uh this Echo is doing what I expect
00:15:42
um you can also verify that the control
00:15:44
flow is coming through and another nice
00:15:46
thing is
00:15:47
um
00:15:48
it's like test you know this this green
00:15:50
will show you uh nodes that run a nodes
00:15:52
that don't run so if I had another node
00:15:54
here you know I want to fully engaged
00:15:59
let me do that again so it's not
00:16:00
highlighted hello you'll see it's not
00:16:03
highlighted it shows you the execution
00:16:04
flow of the graph
00:16:07
um
00:16:08
so yeah I mean that's uh you know
00:16:11
there's obviously quite a lot to get
00:16:13
into with all the different things but
00:16:15
just keep it simple
00:16:16
um this is kind of how you get started
00:16:19
um I guess the last thing that I'll show
00:16:21
you is importing graphs so if you want
00:16:24
to say load Eliza which is our uh in
00:16:27
development sort of AI project go to the
00:16:31
file go to the open menu let me do that
00:16:33
again really quick open spell here and
00:16:36
you go to the import button right there
00:16:37
and then uh you go to your downloads and
00:16:40
you'll just randomly open one of those
00:16:44
look at that pretty cool
00:16:47
and there you go
00:16:49
um just got a random I mean obviously
00:16:51
this is another test spell I was running
00:16:55
um and that's it
00:16:57
hopefully that was helpful