Web-Apps automatisieren mit Ai

by Max Schulte

Slide 1

Slide 1 text

Max Marschall @MaxOSchulte Web-Apps automatisieren mit Ai MaxOSchulte Thinktecture AG 1

Slide 2

Slide 2 text

Max Marschall Consultant & Developer @ Thinktecture AG @MaxOSchulte Babylon.js , Angular , Ionic & GenAi Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 2

Slide 3

Slide 3 text

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. Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 3

Slide 4

Slide 4 text

DEMO Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 4

Slide 5

Slide 5 text

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 into Angular Metainformation Tool calls Leaking secrets "Other" system integration Solution AST parsing TS decorators Client-side "agents" Barebones Angular OpenAI Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 5

Slide 6

Slide 6 text

Architecture Client "Plain" Angular AST parsing Server Python / TypeScript FastAPI / Azure Function OpenAI LangFuse (LangChain) Gen AI Provider OpenAI Whisper Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 6

Slide 7

Slide 7 text

What Generative AI is not / can not Intelligent Making decisions Problems understanding non-linear content Drawing conclusions Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 7

Slide 8

Slide 8 text

Use Case Generate content Summarize content Automation Simplify complexity ... Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 8

Slide 9

Slide 9 text

UI / UX Avoid auto-commit Enable feedback Highlight probability Clear entry point into AI workflows Progress / generation indicators Suggest common actions Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 9

Slide 10

Slide 10 text

Development mindset Shit in / Shit out "Talking to fast learning & smart junior" No default assumptions Documentation is key Examples are great Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 10

Slide 11

Slide 11 text

CODE Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 11

Slide 12

Slide 12 text

Assistant Sequence Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 12

Slide 13

Slide 13 text

Provide Functionality Meta Information TypeScript Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 13

Slide 14

Slide 14 text

Provide Functionality Tools Agents Web-Apps automatisieren mit Ai Session https://python.langchain.com/docs/use_cases/tool_use/ MaxOSchulte Thinktecture AG 14

Slide 15

Slide 15 text

Provide Functionality Tools Agents Web-Apps automatisieren mit Ai Session https://python.langchain.com/docs/use_cases/tool_use/agents/ MaxOSchulte Thinktecture AG 15

Slide 16

Slide 16 text

Assistant Sequence Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 16

Slide 17

Slide 17 text

Client-Side vs. Server-Side Client Server Easy Integration Tooling Python (Ecosystem) TypeScript / JS Secrets / Security Schema Validation SoC ( ) Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 17

Slide 18

Slide 18 text

Lessons Learned Client-side for PoC Easy transition to server-side Write docs. for dummys Unambiguous tools Unambiguous context Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 18

Slide 19

Slide 19 text

Thank You ! https://www.thinktecture.com/thinktects/max-marschall Web-Apps automatisieren mit Ai Session MaxOSchulte Thinktecture AG 19