Managing State in Echo Bot Application for Microsoft Teams

This article explains how to manage state in an Echo Bot application built for Microsoft Teams using the Azure Bot Framework.
It covers how to preserve user and conversation data across sessions, how to test your bot locally, and how to deploy it for Microsoft Teams integration.

🧱 Prerequisites

Before starting, ensure you have the following installed:

• Node.js (v10 or higher)
• Bot Framework CLI
• Microsoft Teams Developer account
• Azure subscription
• ngrok (for tunneling local endpoints)

⚙️ Create a New Bot Project

Use the Yeoman generator for bot projects:

yo botbuilder

Choose the following options:

• Language: JavaScript
• Bot template: Echo Bot
• Include state management: Yes

Then navigate to your project folder:

cd teams-echobot-state
code .

🔧 Configure State Storage

Open the index.js file and import the required state management modules:

const { BotFrameworkAdapter, MemoryStorage, UserState, ConversationState } = require('botbuilder');

const memoryStorage = new MemoryStorage();
const userState = new UserState(memoryStorage);
const conversationState = new ConversationState(memoryStorage);

Pass these objects to your bot constructor:

const { EchoBot } = require('./bot');
const myBot = new EchoBot(conversationState, userState);

🤖 Implement the Bot Logic

In your bot.js file, define and use the state accessors.

const { ActivityHandler } = require('botbuilder');

class EchoBot extends ActivityHandler {
  constructor(conversationState, userState) {
    super();
    this.conversationState = conversationState;
    this.userState = userState;

    this.countProperty = this.conversationState.createProperty('turnCount');
    this.userProfile = this.userState.createProperty('userProfile');

    this.onMessage(async (context, next) => {
      let count = await this.countProperty.get(context, 0);
      count++;
      await this.countProperty.set(context, count);

      const user = await this.userProfile.get(context, { name: 'User' });
      await context.sendActivity(`Hi ${user.name}, you’ve sent ${count} messages.`);
      await next();
    });
  }

  async run(context) {
    await super.run(context);
    await this.conversationState.saveChanges(context);
    await this.userState.saveChanges(context);
  }
}

module.exports.EchoBot = EchoBot;

🧩 Test Locally with Bot Framework Emulator

1. Run your bot:

npm start

2. In a new terminal, start ngrok to tunnel your local port:

ngrok http 3978

3. Open Bot Framework Emulator and connect using the HTTPS URL from ngrok.

Example endpoint:

https://abc123.ngrok.io/api/messages

4. Send a few messages and confirm that the bot counts your messages persistently.

☁️ Deploy to Azure

Use the Azure CLI or Azure Portal to deploy your bot.

Using CLI:

az login
az webapp up --name teams-echobot-state --resource-group MyResourceGroup

Configure Environment Variables

In the Azure Portal, set the following Application Settings:

• MicrosoftAppId
• MicrosoftAppPassword
• MicrosoftAppType=MultiTenant

Then restart your bot service.

🧠 Understanding Bot State

Bot state can be managed across three key levels:

Using UserState and ConversationState, you can track data like message counts, preferences, or session progress.

🧪 Test in Microsoft Teams

1. Go to the Teams Developer Portal.
2. Create a new App Registration for your bot.
3. Under Bots, add your endpoint URL from Azure (https://yourapp.azurewebsites.net/api/messages).
4. Install the app in Microsoft Teams.
5. Start chatting — your bot will now persist user and conversation data.

📂 GitHub Sample Project

✅ Summary

Managing state effectively is critical for building intelligent and contextual bots in Microsoft Teams.
By leveraging Bot Framework State Management and Azure Storage, you can maintain conversation context, enhance personalization, and deliver consistent experiences to users.