Von 0 zu smart: SPAs mit Generative AI aufwerten

In dieser Session zeigt Max Marschall wie bestehende Apps durch die Integration von LLMs smarter gemacht werden. Erfahren Sie durch Live Coding-Beispiele, welche Schritte notwendig sind, um die Funktionen Ihrer Anwendung mit Sprach-Anweisungen zu steuern und sich in der App zu bewegen, Inhalte zu generieren, komplexe Formulare ohne Kopfzerbrechen auszufüllen, sowie neue Formulare rein durch fachliche Beschreibung "Requirements-driven" zu erstellen. Mit smarten Apps werden komplexe Tasks für die Anwender einfacher, Large Language-Modelle von OpenAI oder Mistral eröffnen dafür neue Möglichkeiten, um Arbeitsabläufe zu beschleunigen und zu vereinfachen.

1. Max Marschall @MaxOSchulte Von 0 zu smart SPAs mit Generative AI aufwerten MaxOSchulte Thinktecture AG 1
2. Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 2
3. Max Marschall Consultant & Developer @ Thinktecture AG @MaxOSchulte Babylon.js , Angular , Ionic & GenAi Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 3
4. Intention Augmenting an App with an assistant, that helps the user based on displayed context. Allowing an assistant to act for me in that context. Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 4
5. DEMO Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 5
6. Intention Augmenting an App with an assistant, that helps the user based on displayed context. Allowing an assistant to act for me in that context. Problem: Integrating GenAI Metainformation Tool calls Leaking secrets "Other" system integration Solution AST parsing TS decorators Client-side "agents" Barebones Angular OpenAI Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 6
7. Architecture Client "Plain" Angular AST parsing Server Python / TypeScript FastAPI / Azure Function OpenAI LangFuse (LangChain) Gen AI Provider OpenAI Whisper Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 7
8. CODE Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 8
9. Meta information → →∑ Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 9
10. Zod Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 10
11. Meta information Typescript Functions /** Class Documentation [...] */ export class DialogComponent { /** * Displays a note {@link Note} for the user to save, edit or discard. * @param data Note data that is displayed to the user. */ @AiTool public showNote(data: Note): void { this.dialog.updateDialog({ role: 'Note', message: 'Note ...', data }); } } Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 11
12. Meta information Typescript Models export interface Note extends BaseData { /** Field is used to Filter Data for this specific type. Must be 'Note'! */ type: 'Note'; /** Title of this note */ title: string; /** List of topic of this note, comma separated */ tags: string; /** Actual text of this note, markdown preferred */ text: string; } Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 12
13. Provide Functionality Generated Tool definition { "type": "function", "className": "DialogComponent", "classDocumentation": "", "function": { "name": "showNote", "title": "showNote", "type": "function", "description": "Displays a note {@link Note} for the user to save, edit or discard.", "parameters": { "type": "object", "properties": { "data": { "title": "data", "description": "Note data that is displayed to the user.", "type": "object", "properties": { "type": { "description": "Field is used to Filter Data for this specific type. Must be 'Note'!", "type": "string", "const": "Note" }, "title": { "description": "Title of this note", "type": "string" }, "tags": { "description": "List of topic of this note, comma separated", "type": "string" }, "text": { "description": "Actual text of this note, markdown preferred", "type": "string" }, "id": { "description": "GUID", "type": "string" }, "date": { "description": "UTC string", "type": "string" } }, "required": [ "date", "id", "tags", "text", "title", "type" ], "$schema": "http://json-schema.org/draft-07/schema#" } } }, "method": "(data: Note) => void", "returnType": "void", "required": [ "data" ], "decorators": [] } } Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 13
14. Assistant Sequence Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 14
15. Provide Functionality Tools Agents Von 0 zu Smart, SPAs mit Generative AI aufwerten Session https://python.langchain.com/docs/use_cases/tool_use/ MaxOSchulte Thinktecture AG 15
16. Provide Functionality Tools Agents Von 0 zu Smart, SPAs mit Generative AI aufwerten Session https://python.langchain.com/docs/use_cases/tool_use/agents/ MaxOSchulte Thinktecture AG 16
17. Assistant Sequence Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 17
18. Client-Side vs. Server-Side Client Server Easy Integration Tooling Python (Ecosystem) TypeScript / JS Secrets / Security Schema Validation SoC ( ) Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 18
19. What Generative AI cannot do make decisions understand non-linear content draw conclusions GenAI is not Intelligent Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 19
20. Use Cases Generate content Summarize content Automation Simplify complexity Analysis ... Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 20
21. UI / UX Avoid auto-commit Enable feedback Highlight probability Clear entry point into AI workflows Progress / generation indicators Suggest common actions Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 21
22. Development mindset "Talking to fast learning & smart junior" No default assumptions Documentation is key Examples are great Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 22
23. Lessons Learned Client-side for PoC Easy transition to server-side Write docs for dummies Unambiguous tools Unambiguous context An Agent is just a loop LLMs do not actually call functions - you do! Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 23
24. Thank You ! https://www.thinktecture.com/thinktects/max-marschall Von 0 zu Smart, SPAs mit Generative AI aufwerten Session MaxOSchulte Thinktecture AG 24