Create an AI App Using the Latest Microsoft 365 Agents Toolkit Template

Post 6 hours ago - 21 Aug 2026 | Updated 21 Aug 2026 | 21

AI development can sound complicated when you are just starting out.

You may hear terms like LLM, agents, Azure OpenAI, SDK, orchestration, manifests, provisioning, and wonder where to begin.

The good news is that Microsoft has made the starting point much easier.

In this beginner-friendly tutorial, we will build a simple AI agent using Microsoft 365 Agents Toolkit, the Visual Studio Code extension that provides project templates and scaffolding for Microsoft 365 agents and apps.

Microsoft has evolved the toolkit from the old Teams Toolkit. For new agent-based development, Microsoft recommends the Microsoft 365 Agents SDK rather than TeamsFx.

By the end of this tutorial, you will understand:

What Microsoft 365 Agents Toolkit is
How to create an AI project from a template
How the generated project is structured
How the AI code works
How to customize the agent
How to run and test it
How you can turn the basic example into a real AI application

What Are We Building?

We are going to create a simple AI agent that can understand questions and generate answers.

Think of it like this:

User
  ↓
Microsoft Teams / Copilot
  ↓
Our AI Agent
  ↓
AI Model
  ↓
Generated Answer

The important part is that we don't have to build everything from scratch.

The Microsoft 365 Agents Toolkit creates the basic project structure, configuration files, debugging setup, and application scaffolding for us. Microsoft describes the toolkit as a way to create agents and apps from templates, automate setup, and run/debug them across Microsoft 365 experiences.

1. What Is Microsoft 365 Agents Toolkit?

If you are a beginner, think of the Agents Toolkit as a project generator for AI applications.

Instead of manually creating dozens of files, configuring authentication, creating manifests, and setting up debugging, the toolkit gives you a ready-made starting point.

It is available as an extension for Visual Studio Code and supports JavaScript and TypeScript development, with Python support also available in the toolkit.

It can help you build applications and agents for places such as:

Microsoft Teams
Microsoft 365 Copilot
Outlook
Office
Web applications

The toolkit can also provide automated provisioning and deployment support.

2. What Do You Need?

Before writing code, install the following:

Required
Visual Studio Code
Node.js
Microsoft 365 Agents Toolkit extension

An AI model/service such as Azure OpenAI or another supported LLM service

Microsoft's current Teams-agent walkthrough lists Visual Studio Code, Node.js, and the latest Agents Toolkit as the basic development environment.

You can install the toolkit from the Visual Studio Code marketplace.

3. Install Microsoft 365 Agents Toolkit

Open Visual Studio Code.

Then open the Extensions panel.

Search for:

Microsoft 365 Agents Toolkit

Install the extension.

After installation, you should see an Agents Toolkit icon in the Visual Studio Code Activity Bar.

Microsoft's current documentation refers to the extension as Microsoft 365 Agents Toolkit, although older tutorials may still call it Teams Toolkit.

Beginner tip: If you find an old tutorial saying "Teams Toolkit", check its publication date. Microsoft has moved its newer agent development experience toward Microsoft 365 Agents Toolkit and the Microsoft 365 Agents SDK.

4. Create Your First AI Project

Now comes the fun part.

Open Visual Studio Code and click the Microsoft 365 Agents Toolkit icon.

You should see an option similar to:

Create a New Agent/App

Click it.

Depending on the current toolkit version, the available templates can differ.

For a Teams-based AI agent, Microsoft currently documents this flow:

Create a New Agent/App
        ↓
Teams Agents and Apps
        ↓
General Teams Agent
        ↓
Select AI/LLM service
        ↓
Select programming language
        ↓
Choose folder
        ↓
Enter application name

This is the current template-based workflow documented by Microsoft.

For a JavaScript/TypeScript Agents SDK project, another current workflow is:

Create a New Agent/App
        ↓
Custom Engine Agent
        ↓
Weather Agent / Basic Custom Engine Agent
        ↓
Choose Azure OpenAI
        ↓
Choose JavaScript or TypeScript

Microsoft's July 2026 documentation specifically describes these current templates.

5. Why Use a Template?

Imagine creating an application manually.

You might need to create:

package.json
environment variables
AI client
authentication
app manifest
debug configuration
deployment configuration
server
agent logic

That's a lot for a beginner.

A template gives you the starting structure automatically.

For example:

my-ai-agent/
│
├── .vscode/
│
├── appPackage/
│
├── env/
│
├── infra/
│
├── src/
│
├── package.json
└── README.md

Microsoft's current Teams agent documentation describes these major folders as follows: .vscode contains debugging configuration, appPackage contains app manifest templates, env contains environment files, infra contains infrastructure templates, and src contains the application's source code.

6. Understanding the Folder Structure

Let's make this very simple.

`.vscode`

This folder contains Visual Studio Code configuration.

For example:

.vscode/
├── launch.json
└── tasks.json

These files help Visual Studio Code know how to run and debug your application.

You normally don't need to modify these files when you are just starting.

`appPackage`

This folder contains information about your Microsoft application.

For example, it can contain the application manifest.

Think of the manifest as the application's identity card.

It tells Microsoft 365 things such as:

Who am I?
What is my application called?
What capabilities do I have?
Where should I run?

`env`

This folder contains environment-specific configuration.

For example:

dev
test
prod

This becomes useful when your application moves from development to production.

`infra`

infra means infrastructure.

This is where infrastructure-as-code configuration can live.

For example, Azure resources can be described here.

You don't need to understand everything in this folder on day one.

`src`

This is the folder you will spend the most time with.

This is where your application code lives.

For example:

src/
├── app.ts
├── agent.ts
└── ...

The exact files depend on the template you choose.

7. Understanding the AI Part

Now let's look at the important concept.

An AI application normally has at least these pieces:

Your application
       ↓
AI SDK
       ↓
AI model
       ↓
Response

For example, your application might send:

"Explain cloud computing to me."

to an AI model.

The model generates something like:

"Cloud computing means using computing resources
over the internet instead of running everything
on your own computer."

Your application then sends that response back to the user.

8. A Simple AI Function

To understand the concept, let's look at a simplified JavaScript example.

// This function represents the part of our application
// that communicates with an AI model.

async function askAI(question) {

    // Send the user's question to the AI model.
    const response = await aiModel.chat({
        messages: [
            {
                // Tell the model what role this message has.
                role: "user",

                // Send the user's question.
                content: question
            }
        ]
    });

    // Return the AI-generated answer.
    return response.text;
}

The important idea is:

question
   ↓
AI model
   ↓
answer

Don't worry if the actual template contains more code.

The template is doing additional work such as configuration, authentication, agent handling, and integration with Microsoft services.

9. What Is an Agent?

You may be wondering:

"Isn't this just a chatbot?"

An agent can be much more than a simple chatbot.

A basic chatbot might do:

Question → Answer

An AI agent can eventually do:

User request
     ↓
Understand request
     ↓
Decide what to do
     ↓
Use knowledge/tools
     ↓
Perform task
     ↓
Generate response

For example, imagine asking:

"Find my team's meetings tomorrow and summarize
what I need to prepare."

An advanced agent could potentially:

Understand the request.

Access appropriate data.

Find meetings.

Read relevant information.

Generate a summary.

Return the result.

That is where agents become much more powerful than basic question-and-answer applications.

10. Adding a System Instruction

One of the easiest ways to customize an AI application is to change its instructions.

For example:

// Instructions tell the AI how it should behave.

const systemInstruction = `
You are a friendly programming tutor.

Your job is to explain programming concepts
to beginners.

Always:
1. Use simple language.
2. Give examples.
3. Explain technical terms.
4. Provide commented code.
5. Avoid unnecessary complexity.
`;

Now our AI has a specific personality and purpose.

Instead of being a generic assistant, it becomes a:

Beginner Programming Tutor

11. Send the Instruction With the User Question

We can conceptually combine the system instruction with the user's message:

async function askTutor(question) {

    // Send both the instructions and the user's question.
    const response = await aiModel.chat({
        messages: [

            {
                // This message defines the AI's behavior.
                role: "system",

                // Tell the AI how to behave.
                content: systemInstruction
            },

            {
                // This is the actual user question.
                role: "user",

                // Example:
                // "What is a JavaScript function?"
                content: question
            }
        ]
    });

    // Return the generated answer.
    return response.text;
}

Now if the user asks:

What is a function?

the AI knows that it should explain the concept to a beginner.

12. Environment Variables

One important beginner concept is secrets.

Never put API keys directly into your source code.

Bad

// DON'T DO THIS!

const apiKey = "my-secret-api-key";

Why?

Because if you push this code to GitHub, you could accidentally expose your secret.

Instead, use an environment variable.

// Read the API key from the environment.
const apiKey = process.env.AZURE_OPENAI_API_KEY;

Your environment configuration can contain the secret separately.

For example:

AZURE_OPENAI_API_KEY=your-secret-key

The exact variable names depend on the template and AI service you select.

13. Connecting Azure OpenAI

If you select Azure OpenAI while creating the project, the toolkit asks for information such as:

Azure OpenAI key
Azure OpenAI endpoint
Azure OpenAI deployment name

Microsoft's current documentation describes this configuration for the Teams agent template.

Conceptually, your application needs:

Endpoint
    ↓
Where is the AI service?

API Key
    ↓
How do I authenticate?

Deployment
    ↓
Which AI model should I use?

For example:

const endpoint = process.env.AZURE_OPENAI_ENDPOINT;

const deployment = process.env.AZURE_OPENAI_DEPLOYMENT;

const apiKey = process.env.AZURE_OPENAI_API_KEY;

Again, use the variable names generated by your selected template rather than blindly replacing its configuration.

14. What Is an LLM?

You will often see the term LLM.

LLM means:

Large Language Model

It is the AI model responsible for understanding and generating language.

Think about it like this:

Your application
       ↓
      Agent
       ↓
      LLM
       ↓
  AI-generated text

The agent is the application logic.

The LLM is the language intelligence.

15. Run the Application

Once the template has generated your project, open the project folder in Visual Studio Code.

Then start debugging.

In many current toolkit workflows, you can use:

Run → Start Debugging

or press:

F5

Microsoft's current Teams-agent tutorial uses this approach to launch and test the generated agent.

The toolkit can prepare the required environment and open the application for testing.

16. Use Agents Playground

One of the nicest features for beginners is the Microsoft 365 Agents Playground.

It lets you test an agent locally without going through a complete deployment process.

Microsoft describes Agents Playground as an integrated local testing and debugging environment for agents.

Your development workflow becomes:

Write code
   ↓
Run locally
   ↓
Open Agents Playground
   ↓
Ask question
   ↓
Check answer
   ↓
Modify code
   ↓
Test again

This makes experimentation much easier.

17. Test Your AI

Try something simple.

For example:

Hello

Then:

Explain artificial intelligence to me.

Then try something more specific:

Explain JavaScript functions
like I am 10 years old.

If your system instruction says that the agent is a programming tutor, you should see responses that follow that role.

18. Add Your Own Logic

Now let's make the application more interesting.

Suppose we want our agent to recognize when someone asks for programming help.

We could create a simple function:

function isProgrammingQuestion(question) {

    // Convert the question to lowercase.
    const text = question.toLowerCase();

    // Check for a few programming-related words.
    return (
        text.includes("javascript") ||
        text.includes("python") ||
        text.includes("code") ||
        text.includes("programming")
    );
}

Then:

async function handleQuestion(question) {

    // Check whether this looks like a programming question.
    if (isProgrammingQuestion(question)) {

        // Send programming questions to our AI tutor.
        return await askTutor(question);
    }

    // Give a simple response for other questions.
    return "I am currently focused on programming questions.";
}

This is a very simple example of application logic around an AI model.

19. Why Templates Are Useful

Without a template, you have to decide:

Which SDK?
How do I authenticate?
Where does the manifest go?
How do I debug?
How do I package the app?
How do I deploy?
How do I connect the AI model?

The toolkit handles much of the initial scaffolding.

That means you can spend more time learning:

AI
+
JavaScript/TypeScript
+
Agents
+
Business logic

instead of spending your first day creating configuration files.

20. From Beginner App to Real AI Product

Our example is intentionally simple.

But you can build much more powerful applications from the same foundation.

For example:

Customer Support Agent

Customer
   ↓
AI Agent
   ↓
Company knowledge
   ↓
Answer

HR Assistant

Employee
   ↓
HR Agent
   ↓
Company policies
   ↓
Answer

Developer Assistant

Developer
   ↓
AI Agent
   ↓
Documentation + GitHub + tools
   ↓
Answer / Action

Sales Assistant

Salesperson
     ↓
AI Agent
     ↓
Customer information
     ↓
Recommendations

The basic architecture remains similar.

21. Declarative Agent vs Custom Engine Agent

Microsoft's current Agents Toolkit also supports different approaches.

A declarative agent is a simpler way to define an agent's behavior using configuration and instructions.

For example:

Name:
Programming Tutor

Instructions:
Help beginners learn programming.

Conversation starters:
- Explain JavaScript
- Explain Python
- Help me debug my code

Microsoft's current documentation shows that a basic declarative agent can be created directly through:

Microsoft 365 Agents Toolkit
        ↓
Create a New Agent/App
        ↓
Declarative Agent
        ↓
No Action

and then provisioned from the toolkit.

A custom engine agent, on the other hand, gives you much more control over application code, AI orchestration, tools, and business logic.

For beginners, I recommend starting with a simple template and gradually moving toward custom agent logic.

22. What About TypeSpec?

If you explore the newest Microsoft 365 Copilot development documentation, you may also encounter TypeSpec.

Microsoft currently documents a TypeSpec-based declarative agent workflow in Agents Toolkit:

Create a New Agent/App
        ↓
Declarative Agent
        ↓
Start with TypeSpec for Microsoft 365 Copilot

You don't need to learn TypeSpec before building your first AI application.

Start with the basic template.

Once you understand how the application works, TypeSpec and other advanced approaches become much easier to learn.

23. A Beginner's Mental Model

If all of this feels like too much information, remember just this:

                    ┌───────────────┐
                    │     User      │
                    └───────┬───────┘
                            │
                            ▼
                    ┌───────────────┐
                    │  AI Agent     │
                    │               │
                    │ Instructions  │
                    │ Logic         │
                    │ Tools         │
                    └───────┬───────┘
                            │
                            ▼
                    ┌───────────────┐
                    │   AI Model    │
                    │     LLM       │
                    └───────┬───────┘
                            │
                            ▼
                    ┌───────────────┐
                    │    Answer     │
                    └───────────────┘

The Agents Toolkit helps you create and run the application around this architecture.

24. Common Beginner Mistakes

Mistake 1: Putting API keys in source code

Don't do this:

const key = "secret-key";

Use environment variables or the authentication mechanisms provided by the template.

Mistake 2: Changing everything immediately

When the template creates many files, it can be tempting to modify everything.

Don't.

Start with:

1. Run the generated application.
2. Understand the generated code.
3. Change one thing.
4. Run it again.
5. Repeat.

This is much easier to debug.

Mistake 3: Expecting the AI to always be correct

AI models can generate incorrect information.

Treat the model as an intelligent component, not an infallible database.

For business applications, add appropriate validation, grounding, permissions, logging, and human oversight.

Microsoft also warns that AI template samples should be reviewed and tested for the specific use case and that AI responses can be inaccurate.

25. What Should You Learn Next?

Once your first application works, learn these topics in this order:

Level 1 — Programming

Learn:

JavaScript
TypeScript
async / await
functions
objects
arrays
modules
environment variables

Level 2 — AI

Learn:

LLM
prompts
system instructions
tokens
context
embeddings
RAG
function/tool calling

Level 3 — Agents

Learn:

agent architecture
tools
memory
orchestration
multi-agent systems
authentication
permissions

Level 4 — Microsoft ecosystem

Learn:

Microsoft 365 Agents Toolkit
Microsoft 365 Agents SDK
Azure AI Foundry
Azure OpenAI
Microsoft Teams
Microsoft 365 Copilot
Azure

26. Final Takeaway

Building an AI application doesn't have to start with hundreds of lines of code.

With the latest Microsoft 365 Agents Toolkit, you can start with a ready-made project template, choose your AI service and programming language, and let the toolkit generate much of the initial application structure.

The most important thing for a beginner is not memorizing every generated file.

Instead, understand this flow:

Template
   ↓
Project
   ↓
Agent
   ↓
AI Model
   ↓
Instructions
   ↓
Tools / Data
   ↓
Application

Start small.

Create the template.

Run it.

Ask the AI a question.

Read the generated code.

Change one instruction.

Run it again.

Then gradually add your own data, tools, APIs, authentication, and business logic.

That is how a simple template can become a real AI application.

Useful Microsoft Documentation

The key idea: don't try to build the entire AI platform yourself. Start from Microsoft's template, understand what it generates, and customize it one piece at a time.

artificial-intelligence artificial intelligence agent javascript

Amrith Chandran Technical Content Writer | Blogger

0 Comments Report