CodeKitHubWhat Is This Tool?
The Microsoft Teams Chat Generator is a browser-based mockup tool that recreates the Teams one-to-one chat view — a header with the contact's avatar, presence dot, name and status, plus call/video/share icons, and a message thread using Teams' rounded, right-aligned bubble style for outgoing messages.
Teams defaults to a light theme (white background, muted Fluent purple #6264A7 accents), matching how most Microsoft 365 users see it, with an optional dark-mode toggle.
Each contact has a presence status — Available (green), Busy (red), Away (yellow) or Offline (gray) — shown as a small colored dot on the avatar, just like the real Teams client.
For entertainment and mock-up use only: build an enterprise product demo, illustrate a Microsoft 365 workflow for a presentation, or storyboard a support scenario. It must never be used to impersonate a real workplace conversation, a real colleague, or fabricate evidence of something someone did not actually say.
Nothing you type ever leaves your device. The whole conversation is drawn with the HTML Canvas API directly in your browser, and the PNG is generated and downloaded locally.
Why Use It?
- Create realistic Teams chat screenshots for enterprise software demos and case studies.
- Mock up how a Teams bot or notification message will look before building it.
- Illustrate an IT support scenario, onboarding flow or workplace-communication example for a presentation.
- Prototype a Teams-style chat UI for an internal tool.
- 100% local rendering — your conversation text never touches a server.
How to Use
- Set the contact name and presence status (Available, Busy, Away or Offline).
- Upload a photo for the avatar, or leave it as a colored circle with initials.
- Choose light or dark theme — Teams is light by default.
- Add message rows: type the text, pick a side (them/me) and a timestamp.
- Watch the phone-shaped preview update live, then click "Download PNG" to save the image.
Example
Input
Contact: "Jordan" · Status: "Available" · Message 1 (them): "Hey! Did you get a chance to look at it?" · Message 2 (them): "Perfect, I will send the rest over tonight" · Message 3 (me): "Just did — looks great, ship it"Output
A PNG image showing a light Teams chat: a header with Jordan's avatar, a green presence dot, name and "Available" status, two light gray incoming bubbles on the left with the name and timestamp above, and a light purple outgoing bubble on the right.The image is generated instantly in the live preview canvas and downloads with a single click — no waiting, no upload.
What you can customize
- Contact name and presence status (Available, Busy, Away, Offline).
- Avatar: upload a real photo (cropped to a circle) or pick a fallback color.
- Light or dark theme, with light as the authentic Teams default.
- Unlimited message rows, each with its own text, side (them/me) and timestamp.
Responsible use
This generator exists to make it easy to create clearly fictional Teams-style screenshots for enterprise demos, presentations and design work. It is not a tool for fabricating evidence, staging workplace harassment, or misleading anyone into thinking a fake conversation happened in a real Microsoft 365 tenant. If you plan to share an image made with this tool, consider adding context (like "fake" or "mockup") so viewers understand it is not an actual conversation.
Frequently Asked Questions
Is it legal or ethical to use this tool?
The tool itself is legal to use for entertainment, product demos, presentations and design work. What is not legal or ethical is using the generated image to deceive someone — for example presenting it as a real Teams conversation to commit fraud, harass or defame a colleague, or impersonate a real workplace chat. Depending on where you live, that kind of misuse can constitute fraud, defamation or harassment. Please only use this for clearly fictional or illustrative purposes.
Does the tool upload my messages or photo anywhere?
No. Every message, name, photo and setting you enter stays in your browser's memory and is drawn directly onto a canvas element using JavaScript. The PNG file is generated and downloaded on your device — nothing is ever sent to any server.
Can I control the presence status dot?
Yes. Choose Available (green), Busy (red), Away (yellow) or Offline (gray) from the presence dropdown, and the small colored dot on the contact's avatar updates to match, just like the real Teams client. If your scenario is about a quick reply or an in-progress conversation, use Available or Busy; if the point of your mockup is that a message went unanswered or was seen after the fact, use Away or Offline to make that read believable.
Does Teams really use rounded chat bubbles like this?
Yes. Unlike Discord and Slack, which show messages as a flat list, Microsoft Teams uses rounded message bubbles: incoming messages appear on the left with the sender's name above, and your own messages appear right-aligned in a light purple bubble. This tool reproduces that exact layout.
Can I upload a real photo as the avatar?
Yes. Click "Upload photo" to use any image from your device as the contact's avatar — it's cropped to a circle automatically. If you skip this, the avatar falls back to a colored circle with the contact's initials.