Vom Fenster zum Bot: Conversational UI mit der MS Teams AI Library entwickeln

Die Zeiten starrer Eingabemasken sind längt vorbei. Heute findet ein Großteil der Interaktion zwischen Mensch und Maschine über Chats statt. Die Entwicklungen im AI-Umfeld haben dies noch verstärkt. Doch wie entwickelt man eine Conversational UI (CUI), in das neben schnödem Text auch Adaptive Cards und Dialoge integriert werden können? Jörg Neumann führt in das Thema ein und zeigt, wie einfach Sie eine AI-basierte CUI mithilfe der Teams AI Library und dem Teams Toolkit entwickeln können.

Transcript

1. Vom Fenster zum Bot Conversational UI mit der MS Teams AI Library entwickeln Jörg Neumann
2. THEMEN  AI Development  Business App Development  Frontend Technologies  Development, Consulting, Coaching, Training KONTAKT  Mail: joerg.neumann@neogeeks.de  LinkedIn: www.linkedin.com/in/jörgneumann  X: @JoergNeumann  Web: www.neogeeks.de JÖRG NEUMANN Founder & CEO NeoGeeks GmbH Azure AI Foundry
6. BOTS BOT Text Sprache Cards Desktop Mobile
7. BOTS VORTEILE  Wiederkehrende Aufgaben einfach per Chat erledigen (auch unterwegs)  Konzentration auf die wesentliche Aufgabe, nicht auf das jeweilige Tool!  Alles ist später nachvollziehbar über eine History  Ein Befehl kann auch mehrere Aufgaben erledigen (Agents)  Bots können Fragen beantworten  Ad-Hoc-Aufgabenstellungen möglich  Nützlich auch als Self-Service-Interface für den Customer Support
8. TEAMS BOT ENTWICKELN VORAUSSETZUNGEN  Microsoft 365 inkl. Microsoft 365 Developer Subscription und Recht zur Installation eigener Apps.  Visual Studio 2022 / Visual Studio Code Aktuelle Version, inkl. ASP.NET und Web Dev  Microsoft 365 Agents (vormals Teams Toolkit) Installation über VS Installer / VSCode Extension.  Dev Tunnel Tunneln eingehender Verbindungen. Verfügbar in Visual Studio 2022 version 17.7.0 oder höher. Alternativ: ngrok verwenden.
9. TEAMS BOT ENTWICKELN UNTERSTÜTZTE SPRACHEN  JavaScript  Node.js  .NET/C#  Blazor
10. TEAMS AI LIBRARY FEATURES  Teams Apps leicht mit AI-Funktionalität ausstatten  Prompt Engineering, Moderation, Security  Planning Engine ermittelt die Absicht des Benutzers und ordnet sie Aktionen zu  Wechsel von LLMs ohne Bot-Logik zu verändern
11. DEMO Teams Bots entwickeln
12. ADAPTIVE CARDS Einfache Erstellung  Adaptive Cards basieren auf JSON, das leicht verständlich und editierbar ist Plattformunabhängigkeit  Microsoft Teams, Outlook, Windows, Webseiten, Slack oder eigenen Apps Wiederverwendbarkeit  Einmal entwerfen und ohne große Anpassungen wiederverwenden { "type": "AdaptiveCard", "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2", "body": [ { "type": "TextBlock", "text": "Deine Urlaube", "weight": "Bolder", "wrap": true, "style": "heading", "id": "HeaderTextBlock" }, … ] }
13. ADAPTIVE CARDS Erscheinungsbild  einheitliches Look-and-Feel, unabhängig von der Zielplattform Interaktivität  Benutzerinteraktionen wie das Ausfüllen von Formularen oder das Senden von Daten Anpassungsfähigkeit  Karten passen sich automatisch an das Design und die Möglichkeiten der jeweiligen Plattform an
14. BEISPIELE
15. ELEMENTS Ratings Media Carousel CodeBlock Chart RichTextBlock
16. ADAPTIVE CARD DEVELOPMENT HUB  Best Practices  Referenz aller Elemente und Actions  Adaptive Card Designer  Release/Feature History  Url: https://adaptivecards.microsoft.com/
17. VS CODE EXTENSIONS Adaptive Card Previewer Adaptive Card Studio
18. DEMO Adaptive Cards entwickeln
19. TEAMS AI LIBRARY: FEATURES FEATURES  Localization  LLM modularity  Responsible AI  Predictive engine for mapping intents to actions  Action Planner  Assistants API  Prompt management  Augmentation  Vector data sources  Enhanced reasoning  Feedback loop
20. FAZIT  Bots unterstützen das User-centered Design  Micro Apps, die einzelne Funktion bereitstellen  Teams ist die zentrale Plattform in der Unternehmenskommunikation  Teams Toolkit und Teams AI Library erleichtern die Bot-Entwicklung  Adaptive Cards können flexible und interaktive Oberflächen entwickelt werden
21. Q& A
22. RESSOURCEN: TEAMS DEVELOPMENT DOKUMENTATION  Microsoft Teams-Entwicklerdokumentation  Teams Toolkit Visual Studio Overview  Microsoft Teams Toolkit Overview (VSCode)  Teams AI library  Prepare your Microsoft 365 tenant  Deploy a Microsoft Teams app to Azure by using Teams Toolkit for Visual Studio Code  Designing Adaptive Cards for your Microsoft Teams app
23. RESSOURCEN: TEAMS DEVELOPMENT PORTALS  Teams Developer Portal  Bot Framework Portal
24. RESSOURCEN: TEAMS DEVELOPMENT TOOLS  Microsoft Teams Toolkit for Visual Studio Code  GitHub Copilot Extension for Teams Toolkit  Microsoft Graph Explorer  ngrok – API Gateway
25. RESSOURCEN: TEAMS DEVELOPMENT SAMPLES  Microsoft Teams Samples  Microsoft Teams AI Library Samples  Microsoft Bot Framework Samples
26. RESSOURCEN: ADAPTIVE CARDS DOKUMENTATION  Microsoft Lern: Adaptive Cards Overview PORTAL  Adaptive Cards Development Hub SAMPLES  Made with cards  Adaptive Card Samples for Teams TOOLS  VSCode: Adaptive Card Previewer, Adaptive Card Studio  Web: Adaptive Cards Editor