Guide to Create Configurable Bot - Teams

Note

Bot configuration experience is supported in channel or group chat scopes only.

Start Microsoft Teams app development with your first Teams app. You can create a bot app with Teams using Javascript.

This quick start guide helps you to build configurable bot with Teams Toolkit. You'll see the following output after you've completed this guide:

Screenshot shows the configuration option for the bot in a Teams group chat.

Prerequisites

6 minutes remaining

Ensure you install the following tools for building and deploying your apps.

	Install	For using...
	Teams Toolkit	A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version.
	Microsoft Teams	Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call all in one place.
	Node.js and NPM	Back-end JavaScript runtime environment. For more information, see Node.js version compatibility table for project type.
	Microsoft Edge (recommended) or Google Chrome	A browser with developer tools.
	Visual Studio Code	JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. Use the latest version.
	Dev tunnel	Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. or You can also use ngrok as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm devDependencies).

Note

After downloading ngrok, sign up and install authtoken.

Set up local environment

5 minutes remaining

Open Microsoft Teams Samples.
Select Code. From the dropdown menu, select Open with GitHub Desktop.
Select Clone.

Set up tunnel for local web server

4 minutes remaining

Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:

ngrok http --host-header=localhost 3978

Tip

If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

The window shows the HTTPS URL.

Screenshot shows the ngrok HTTPS URL.

Build and run your app

3 minutes remaining

Go to Visual Studio Code.
Select Open a folder, go to Microsoft-Teams-Samples > samples > bot-configuration-app and then select Select folder.
From the left pane, select Teams Toolkit.
Under ACCOUNTS, sign in to the following:
- Microsoft 365 account
- Azure account
To debug your app, enter F5.

A browser tab opens a Teams web client requesting to add the bot to your tenant.
From the dropdown next to Add, select Add to a team or Add to a chat.
Enter the name of a chat in the search field.
Select Set up a bot.

The bot is installed in the chat.

Reconfigure the bot

2 minutes remaining

Go to the chat and @mention the bot in the message compose area and select Send.
When you hover over the bot from the conversation, an Adaptive Card appears. Select the Settings icon in the Adaptive Card.

A bot configuration Adaptive Card appears.
Reconfigure the bot settings and select Submit.
The bot sends a response message.