Slide 1
Slide 1 text
Max Marschall
@MaxOSchulte
Von 0 zu smart
SPAs mit Generative AI aufwerten
MaxOSchulte Thinktecture AG 1
Slide 2
Slide 2 text
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 2
Slide 3
Slide 3 text
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
Slide 4
Slide 4 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.
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 4
Slide 5
Slide 5 text
DEMO
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 5
Slide 6
Slide 6 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
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
CODE
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 8
Slide 9
Slide 9 text
Meta information
→ →∑
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 9
Slide 10
Slide 10 text
Zod
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 10
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Assistant Sequence
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 14
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
Assistant Sequence
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 17
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
Use Cases
Generate content
Summarize content
Automation
Simplify complexity
Analysis
...
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 20
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Thank You !
https://www.thinktecture.com/thinktects/max-marschall
Von 0 zu Smart, SPAs mit Generative AI aufwerten
Session
MaxOSchulte Thinktecture AG 24