►
From YouTube: Getting started with Teams Toolkit for Visual Studio
Description
In this 30-minute developer focused demo, Garry Trinder guides viewers through creating, debugging and deploying Microsoft Teams apps built using Teams Toolkit for Visual Studio 2022, released GA in August 2022. Step through Toolkit installation and project creation process. Note the available project templates (notification and command bots, tab, and message extension). Presenter creates tab and bot projects. See configuration and components in code behind scenes. Tips to speed up development time throughout, and questions answered at end. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 20, 2022.
Demo Presenter
• Garry Trinder (Microsoft) | @garrytrinder
Supporting materials
• Demo - Introduction to Microsoft Teams Toolkit – John Miller (Microsoft) | @jmillerdev
• Learn - Teams Toolkit overview for Visual Studio | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-overview-visual-studio
• Documentation - Microsoft Teams JavaScript client SDK | https://learn.microsoft.com/javascript/api/overview/msteams-client
• Repo - Teams/Fx | https://github.com/OfficeDev/TeamsFx
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
B
Er
I'm
A
Cloud
developer
Advocate
at
Microsoft
mainly
focused
around
Microsoft
365..
In
this
case
it's
going
to
be
Microsoft
teams
and
I'm
here
today
to
talk
to
you
about
teams
toolkit,
but
teams
toolkit
for
visual
studio.
We
had
a
session
last
week
from
John
Miller
who
went
through
teams
toolkit
at
the
high
level,
and
it
was
very
much
focused
on
Visual
Studio
code.
So
there
is
a
visual
studio
code
extension
about
teams
development
and
there
was
lots
of
Interest
around
what
was
coming
with
visual
studio.
So
here
we
are
based
on
that
feedback.
B
We're
going
to
have
a
a
getting
started
session
with.
Basically,
if
you're
new
to
teams,
development
or
you're
using
visual
studio,
your
c-sharp
developer
using.net,
then.
Hopefully
this
is
something
that
you've
been
looking
for
and
we'll
help
you
get
started.
Building
apps
for
Microsoft
teams,
and
so
let's
get
started.
Then
so
teams
talk.
It
is
basically
an
add-on
to
to
visual
studio.
That's
going
to
add
in
new
Microsoft
teams,
project
templates
and
it's
going
to
extend
Visual
Studio
code
with
lots
of
features.
B
So
what
I'm
going
to
show
you
today
as
well?
Is
it's
all
generally
available?
There's
nothing
preview
in
here
and
so
teams
talk
it
for
visual
studio
was
actually
released,
made
generally
available
in
August
of
this
year.
So
you
may
have
missed
it.
You
may
have
been
on
holiday
at
the
time
it
got
released
with
the
latest
version
of
Visual
Studio
2022,
which
is
17.3
so
I'm,
going
to
show
you
that
when
we
step
through
how
you
can
install
it,
how
you
can
create
project
and
and
get
those
apps
running.
B
So
let's
first
start
with
how
you
can
install
the
toolkit.
So
one
of
the
things
which
through
me
at
first
is
it's
not
an
extension.
So
what
you
actually
need
is
you
need
the
installer
to
modify
your
installation
of
visual
studio
so
download
the
installer
or,
if
you've
got
it
saved
and
you
download
somewhere
just
Just
Launch
that
and
hit
modify
and
you'll
bring
up
the
the
the
screens
to
be
able
to
modify
the
workloads
that
you've
got
installed.
B
And
if
you
take
a
look
under
the
asp.net
and
web
development
workload,
you
will
see
I
just
click
that
down
here.
We
have
the
Microsoft
teams
development
tools.
So
basically,
if
you
want
to
install
them
check
that
box
I
hit,
modify
and
that
will
install
everything
for
you,
I've
actually
pre-installed
it.
So
it
is
still
there.
I
don't
actually
want
to
to
remove
it.
B
B
So
we've
got
our
welcome
screen
what
I'm
just
going
to
go
through
step
through
now
the
the
project
creation
process.
So
let's
create
a
new
project.
You'll
find
that
you
have
under
all
platforms.
You'll
have
a
new
option
for
Microsoft
teams.
So
let's
select
that
only
one
option
for
the
platform,
so
Microsoft
teams
app
so
we're
going
to
select
that
click
next
and
then
we've
got
our.
You
know
standard,
give
your
project
a
name.
So
let's
call
it
Community
call
and
I'm
going
to
hit,
create
and
now
teams
talk.
B
It
is
it's
kicked
into
action
and
provided
us
with
a
number
of
different
options
for
different
types
of
templates
that
we
can
select
from
to
scaffold
our
teams
app.
So
we've
got
four
high
level
types
of
of
apps
that
we
can
create.
We've
got
two
Bots
one
notification
bot.
So
this
is
good
for
if
you're
wanting
to
react
to
external
events
in
in
another
system,
you
want
to
push
a
message
into
teams,
maybe
with
an
Adaptive
card,
get
some
kind
of
response
back
and
great
place
to
start.
B
So,
if
you
choose
the
notification
bot,
you
do
have
further
options.
You
can
change
the
type
of
trigger
that
you
use
and
also
what
is
what
technologies
are
used
in
the
implementation
as
well,
so
we
have
a
HTTP
trigger
using
web
API
server,
and
then
we
have
a
mix
of
HTTP
trigger
and
timer
triggers
as
well,
but
using
Azure
functions
as
the
in
the
implementation
and
then
a
final
option
of
both
triggers
together
with
with
Azure
functions.
B
We've
also
got
a
command
block,
so
a
command
bot
is
kind
of
your
if
you've
been
using
Bots
conversational
Bots.
What
you
have
commands
act
commands
that
you
can
create
and
so
that
people
who
download
the
bot
can
interact
with
the
features
of
that
bot.
This
is
a
great
way
of
getting
started
to
be
able
to
scaffold
that
app
and
create
new
commands
and
and
kind
of
step
into
those
conversational
type.
Bots.
B
Third,
we've
got
a
tab.
Everyone
knows
what
a
tab
is
in
in
Microsoft
teams,
I
would
suspect
so
yeah.
This
is
a
tab
project
which
is
really
quite
nice
and
we'll
go
and
look
into
this
actually,
so
this
is
using
Blazer
behind
the
scenes
in
in
its
implementation.
It's
got
some
really
cool
features
that
the
toolkit
gives
you
some
interoperability
between
c-sharp
and
the
team's
JavaScript
SDK
as
well,
really
really
cool
and
we'll
go
look
at
that
in
a
second
and
finally,
we've
got
message
extension
as
well.
B
So
basically,
if
you
want
to
extend
that
message
box
with
with
different
actions,
you
can
use
a
message
extension
in
here
and
just
want
to
point
out
that
the
two
Bots
and
the
message
extension
do
require
any
Rock
to
actually
run
them.
That
is
a
dependency
at
the
moment,
so
you
have
to
kind
of
set
that
up
in
the
background
and
have
have
that
really
so
use
the
the
toolkit
and
if
you're
kind
of
thinking,
oh
no
I,
can't
use
engrock,
I'm
Enterprises
has
decided.
B
We
can't
use
it
for
whatever
reason
there
are
plans
to
move
away
from
engrock.
Just
at
the
moment
we
have
that
dependency,
and
so,
if
you
are,
if
you
do
face,
that
issue,
be
great
to
know
that
you
have
that
issue
for
the
beginning,
so
that
we
can
move
forward
and
it's
on
our
roadmap
to
move
away
from
from
from
ngrok
anyway
and
but
the
tap
you
don't
need
enrock.
So
let's
go
and
create
our
tab.
B
So
we
have
our
project.
That's
been
scaffolded.
I
just
want
to
quickly
run
through
this.
So
if
you
are
familiar
with
the
screen,
so
we've
got
your
WWE
root.
Folder
and
we've
got
an
fx
folder.
We've
got
some
components
in
there
as
well.
We've
got
the
interop
folder,
which
contains
the
interrupt
classes
between
c-sharp
and
the
team's
JavaScript
SDK
as
well.
We
have
our
pages
shared
layouts
and
also
templates
as
well.
The
templates
is
where
our
manifest
lives
so
for
teams
application
we
we
need
a
manifest.
So
this
is
in
here.
B
This
is
our
template.
We,
but
it
also.
This
project
comes
with
templates
for
deploying
to
Azure
as
well,
so
you
get
bicep
templates
right
out
the
box
and
so
that
when
you
come
to
provision
they're
already
there,
which
is
great,
you
can
come
and
inspect
these
and
modify
them.
However,
you
like
add
them
in
CI,
CD
pipelines
that
you
might
already
have
or
yeah
a
great
way
of
of
getting
getting
started
over
files
as
well.
To
take
a
look
at
is
a
permissions.json
file.
B
So
with
this
application,
when
we
actually
start
to
run
it,
it's
gonna
configure
create
a
app
registration
for
us.
So
we've
got
some
settings
in
here
where
we
can
Define
what
the
the
permissions
are,
what
the
resources
are
for
both
delegate
and
application
permissions
as
well
and
I'll
just
knit
back
to
as
we're
talking
about
config
I'm,
going
to
look
back
to
the
FX
file
as
well,
where
we
have
lots
of
project
level
configurations.
We've
got
some
parameters
for
Azure.
These
are
used
by
the
bicep
templates.
B
We've
also
got
configs
as
well
for
local
development
and
some
project
settings.
If
I
look
at
the
the
local
configs,
you
can
see
here
that
we've
got
some
placeholder
values
for
for
the
app
name,
and
these
are
all
reused
within
the
the
Manifest
template.
So
you
can
add
your
own
properties
into
here
and
then
reuse
inject
them
into
the
templates
so
that
every
time
you
go
to
launch
your
your
project,
I'll
run
it
sorry
in
Microsoft
teams
that
manifest
is
going
to
get
updated
with
all
of
the
values
that
are
in
these
files.
B
Really
nice
way
of
centralizing
those
properties.
Okay,
enough
of
going
through
the
project
structure.
Now,
let's
actually
see
how
we
can
run
this
this
application,
so
teams
toolkit
has
been
added
in
as
a
as
a
menu
item
on
the
on
the
project,
so
I've
right,
clicked
on
the
project
and
we
can
see,
we've
got
teams
talk
it
and
we
can
see,
expand
the
the
options
that
are
available
to
us.
B
We've
got
a
few
options,
so
we've
got
prepare
the
team's
apps
dependencies,
and
so
this
is
the
what
you
need
to
do
before
you
actually
run.
Do
the
F5
kind
of
launching
of
your
application.
This
is
where
it's
going
to
kind
of
do
the
initial
setup
update
the
Manifest
do
things
in
Azure
and
this
is
dependent
on
different
types
of
projects
that
you've
got
so,
for
example,
if
this
was
a
bot
project
clicking
that
prepare
teams,
apps
dependencies
would
also
register
my
bot
in
the
bot
framework
as
well,
which
is
really
really
nice.
B
A
few
other
options
which
I'm
not
really
going
to
get
into
today,
but
we've
got
a
nice
shortcut
to
the
Manifest
file,
so,
like
I
showed
you
before,
it
was
deep
in
the
templates.
If
you
don't
want
to
find
it
and
manually,
you
can
just
come
into
the
team's
toolkit
and
click
open
manifest,
and
here
we
go.
We've
got
our
manifest
file.
You
can
see
the
placeholder
values,
so
there's
lots
of
configuration
values
that
teams
talk.
B
So
a
lot
of
the
initial
groundwork
has
been
been
covered
for
you
here,
but
if
you
want
to
come
in
and
change
the
developer
name,
you
know
you
can
either
change
it
manually
in
the
template
or
you
can
create
a
configuration
property
as
well
and
have
that
dynamic
as
well.
So
it's
a
nice
feature
that
teams
toolkit
provided
that
ability
to
just
create
new
properties
and
inject
them
into
the
into
the
Manifest
right.
Let's
go
back
to
teams
toolkit
and
we'll
do
prepare
teams
app
dependencies.
B
So
one
of
the
things
that
toolkit
wants
to
know
is
where's
your
Microsoft
365
tenant.
So
this
is
using
the
visual
studio
account
management
features
so
I've
already
linked.
My
developer
tenant
account
in
here
and
but
I
can
choose
from
different
accounts
if
I
need
to
add
a
new
one.
I
can
obviously
go
through
the
process
here
of
adding
a
new
account
if
I
hit
continue
it's
going
to
do
the
initial
setup
and
we
get
told
what's
happening
in
the
in
the
output.
B
This
is
now
running
and
it's
going
to
have
some
authentication
there
just
to
authenticate
us
with
Microsoft
teams
and
primaries
teams.
We
have
the
side
loading
window,
so
we
can
see
what
values
in
our
Manifesto
have
been
shown
into
teams.
So
we
can
see
the
descriptions
and
the
permissions
that
it's
got
different
versions.
We've
got
the
options
to
add
it
into
to
different
places
in
teams,
so
I
have
a
specific
team
or
a
chat
or
if
I
just
click
add
it
will
add
it
as
a
personal
tab.
B
We've
also
got
some
examples
in
here,
as
well
as
for
for
the
code
where
teams
toolkit
is
providing
us
with
helpers
to
get
the
user
information
of
the
of
the
current
user,
a
few
bits
of
information
as
well.
We
want
to
carry
on
to
provision
and
deploy
to
the
the
cloud
and
actually
publish
your
your
app
to
teams
now
I'm
going
to
go
back
to
visual
studio
and
let's
just
take
a
quick
look
at
the
components
in
here.
So
we
have
a
welcome
component.
B
So
this
is
the
component
that
is
being
displayed
on
that
very
first
screen
that
we
saw-
and
we
can
see
in
here
where
we
have
the
interoperability
with
the
teams
JS
SDK
V2.
So
we
can
call
the
is
in
teams
method
just
to
make
sure
that
yes,
we're
in
teams-
and
there
are
other
helpers
that
are
provided.
B
But
you
know
it's
a
nice
way
of
being
able
to
interact
with
JavaScript
through
through
c-sharp
and
and
reuse,
a
library
that
is
already
out
there
and
a
library
that
you
can
already
use,
and
we've
also
then
got
the
example
line.
Where
we're
using
the
get
user
info,
async
method
on
the
teams
used
credential
to
pull
back
the
user
information
of
the
current
user
as
well.
So.
A
B
A
really
nice
way
of
how
teams
talk,
it
is
providing
you
with
one.
A
link
to
an
SDK,
definitely
recommend
that
you
check
out
the
the
documentation
for
that
SDK.
There's
tons
of
features
in
there
and
it's
getting
dated
all
of
the
time
and
again
another
nice
easy
way
to
be
able
to
to
get
the
the
user
information.
B
Perfect
yeah,
as
I've
got
a
little
bit
of
time,
so
what
I'm
gonna?
What
I
can
do
is
I
can
just
go
through
and
show
you
how
the
the
Bots
work
as
well
as
I,
think
that'd
be
that'd,
be
quite
quite
useful,
so
I
already
have
a
I
should
have
a
project
already
open,
but
it
might
just
be
easier
to
just
start
from
scratch.
So
let's
create
a
new
project.
B
Okay,
so
this
is
now
scaffolded
now:
notification
Bots
using
an
Azure
function
behind
the
scenes
and
fairly
similar
setup
in
in
terms
of
the
project
structure
from
teams
toolkit
perspective,
so
we've
got
our
FX
folder
again
we're
all
our
configuration
and
it's
held
and
in
our
templates
folder
as
well.
We've
got
the
themes,
app
package
and
also
the
Azure
templates,
as
well
and
for
the
the
bicep
files.
B
If
we
take
a
look
at
our
notify
timer
trigger
in
here,
we
can
see
that
it's
a
it's
initial
function.
It
runs
every
30
seconds
if
you've
developed
your
functions
in
the
past.
This
should
be
very
familiar
to
you
up.
What
this
is
doing
is
this
is
using
a
a
timer
trigger.
This
will
run
every
30
seconds
and
what
it's
going
to
do
is
it's
just
going
to
send
a
message
as
an
Adaptive
card
into
a
location
where
that
bot
is
installed.
B
So
we
can
install
things
in
teams
in
all
sorts
of
different
locations
include
personal.
They
can
be
in
the
context
of
a
team
that
can
be
in
context
of
a
chat
or
a
group
chat.
So
there's
an
abstraction
here
that
allows
us
to
return
where
that
bot
is
installed
within
teams,
and
then
we
can
iterate
through
the
installations
and
then
we
can
create
our
adaptive
card
and
we
actually
have
a
card
in
here.
B
B
One
thing
I
did
mention
just
to
reiterate
so
I
was
talking
through
the
different
types
of
apps
that
you
can
create
in
the
different
templates,
because
this
is
a
bot.
There
is
the
dependency
on
ngrok,
so
I
have
engrock
running
in
the
background
not
going
to
show
it
because
they'll
have
my
IP
address
on
there
and
but
it's
running
in
the
background
on
Port
5130,
which
team's
toolkit
is
looking
for.
B
So
one
of
the
things
that
it
does
when
we
go
to
prepare
themes,
apps
dependencies,
it's
going
to
check
and
see
if
ngrok
is
running.
If
it's
not,
it
will
throw
your
message
back
to
say
you
know
you
need
to
have
it
running
on
this
part
to
to
work.
So,
let's
prepare
the
team's
app
dependencies.
Let's
pass
that
ingrot
check
and
again
it's
asking
me
for
the
account
that
I
want
to
use
to
connect
to
my
Microsoft
365
Talent.
B
So
I'll
hit
continue
on
there
again
just
doing
some
work
in
the
background
it's
created
out
an
Azure
ad
app
as
well,
but
it's
also
in
this
scenario.
It's
registering
a
a
bot
with
the
bot
framework
as
well
in
the
background
which
is
again
really
nice,
so
that
has
now
finished.
So
let
me
run
this
app.
B
In
a
few
seconds
there
we
go
so
here
is
our
adaptive
card.
So
here
are
the
values
that
we
were
injecting
into
a
card
and
we've
got
an
action
button
there
as
as
well.
So
we
can
click
that
and
just
go
to
the
Adaptive
cards
designer
page
one
of
the
really
cool
things-
and
this
is
a
new
feature
in
Visual
Studio
2022-
is
I-
definitely
recommend
that
you
turn
on
the
hot
reload
and
hot
reload
on
file
save.
B
So
if
you
want
to
come
in
here
and
make
those
changes
the
Bots
running
in
the
background
it's
going
to
be
triggered
every
30
seconds,
it's
going
to
pick
up
your
new
code
as
well.
So
then
you
don't
have
to
stop
and
restart
the
the
debug
process
and
go
through
those
steps
again.
So
that
will
really
speed
up
your
your
development
time.
B
B
B
The
team
are
also
triaging
the
messages
that
come
through
through
that
way
as
well
and
this
way,
actually,
if
you
do
have
a
bug,
you
get
lots
of
telemetry
that's
sent
for
you
know,
issues
that
you
might
have
found
with
the
tooling
and
so
that
can
get
to
the
the
team
quicker
it
might
speed
up
as
well
the
assistance
that
they
can
give
you.
So
that's
another
new
feature
that
you
can
use
on
that
I
think
yep.
B
Hopefully,
you've
seen
enough
today
that
will
kind
of
get
you
interested
that
you
can
actually
start
installing
have
a
play
around
and
yeah
be
really
interested
to
see
what
you
build.
What
your
thoughts
are,
if
we
can
make
things
better
what
you
like,
what
you
don't
like
and
and
and
yeah
let's,
let's
work
together
on
this
one
and
that's
it.
Thank
you
for
listening
today
and
hopefully
we've
got
a
few
questions.
Fabian
yep.
B
A
Yeah,
no
words,
no
worries
so
I
think
Victor
answered
the
first
one.
Is
it
only
tab
or
command
bot
as
well?
This
Yasser
right
as
well
doesn't
need
it.
Yes,
sir,
do
you
want
to
come
off
mute,
or
did
you
get
your
answer
to
your
question?
If
you're
still
here,
no
I
will
come
back
to
you.
Paul's
asking
are
the
capabilities
in
teams
toolkit
for
visual
studio,
the
same
as
Visual
Studio
code
I
think
you
touched
on
a
little
bit
in
the
end,
but
you
have
a
response
from
that.
One.
B
Yeah,
so
it's
a
great
question
actually
and
I
was
hoping.
Someone
would
ask
this
so
Paul.
Thank
you
very
much
so
yeah.
If
you've,
if
you
have
an
understanding
of
what
teams
talk
it
for
visuals
Visual
Studio
code
gives
you
there's
extra
features
in
the
visual
studio
code
version
such
as
API
connections,
SSO
features
as
well
and
they're,
not
in
the
visual
studio
version.
B
At
the
moment,
it's
primarily
aimed
at
scaffolding
and
get
it
running
there
isn't
so
there
isn't
parity,
that's
not
to
say
that
they're
not
going
to
come
later
on,
but
there's
a
I
guess
a
slightly
different
approach
with
the
visual
studio
version
based
on
feedback
from
the
visual
studio
code
extension.
There
was
a
feeling
that
it
was
just
doing
too
much
and
that
it
was
abstracting
so
much
away
from
you
as
a
developer.
B
It
left
you
without
as
much
control,
so
there's
been
a
kind
of
a
conscious
thought
of
making
sure
that
you're
going
through
the
steps
as
a
developer-
and
it's
not
you
know,
hitting
F5
and
a
a
magic
wand
is
being
thrown
about
and
then
and
and
everything
happening
for
you
so
so
yeah.
There's
not
parity
just
yet
but
yep.
A
Thanks
Gary
for
that
and
I
think
I'll,
somewhere
dude
answered
and
they
send
a
demo.
So
when
we
go
back
and
look
at
the
recording
yeah
sir
you'll
see
how
Gary
had
started
the
installer
went
back
into
it.
I
forgot
into
his
tooling
now
I
think
it
was
under
asp.net
applications
and
then
light
up
the
chat
box
for
teams
development
and
that's
how
you
get
it
inside
the
installer.
A
The
other
question,
which
is
more
of
a
it's,
a
consideration,
question
I,
guess:
I,
wonder
when
to
use
Visual
Studio
code,
vis-a-vis,
Visual
Studio
on
2022
for
teams,
development,
any
guidelines,
I,
guess
it's
more
preferential
at
best.
But
what
are
your
thoughts
around
it?
Do
you
get
a
question
often
Gary.
B
Though
I
know
that
you
know
there's
a
lot
of,
certainly
for
Bots,
there's,
there's
a
lot
of
samples
already
out
there
for
net
and
c-sharp,
and
so
you
know
I
think
leveraging.
The
theme
store
kit
for
visual
studio
will
give
you
a
bit
of
a
a
lag
up
there.
If
you
like,
because
there's
the
sdks
have
been
around
for
for
longer
than
the
the
JavaScript
sdks
have
been
around
but
yeah.
It's
it's
down
to
what
your
preferences
are
right,
I
know,
I,
think
and
and
hearing
feedback.
A
lot
of
people
have
been
thinking.
B
Oh
I'm,
doing
teams,
development,
I
have
to
use
JavaScript,
I
have
to
use
typescript
and
I
think
that's
been
a
real
concern
and
that's
not
the
case
and
you
can
use
dotnet.
You
can
use
anything.
It's
just
you
know
it's
a
web
app
at
the
end
of
the
day
or
it's
just
covering
the
cloud
teams
just
needs
to
point
to
where
your
application
is
running.
So
you
can
use
you
know
different
different,
Technologies
and
and
mix
and
match.