Build ChatBot with Kendo UI and Gemini

Learn how to build a Chatbot with Kendo UI and Gemini

Transcript

1. Dany Paredes @danywalls www.danywalls.com Build ChatBot with Kendo UI and Gemini
6. Gemini Nano for Chrome
7. https://developer.chrome.com/docs/ai/built-in
9. Agenda 1. Scenario 2. Libraries 3. AI Studio 4. Building The Service 5. Using Kendo UI and Kendo Uploads 6. Gemini Request and Response 7. Connecting Everything!!
10. Dany Paredes Senior Software Engineer @celonis www.danywalls.com linkedin.com/in/danywalls Angular GDE x 4 Progress Champion 2024 Writer Google Dev Library and Kendo UI
11. Scenario We want to build a bot where we can upload a page screenshot or photo and it detects which Kendo UI for Angular components can help us to build it, with a nice recommendation explaining what each one does and why to use it, plus links to resources.
13. The Power of Kendo UI
14. Editor Preview Both npm i -g @angular/cli
15. Let’s go!!!!
16. Editor Preview Both https://github.com/danywalls/donweb-chat
17. Editor Preview Both ng new donweb-chat
18. MarkedJS
19. Conversational UI The Conversational UI package delivers the Kendo UI for Angular AIPrompt and Chat components which allow the user to participate in chat sessions with other users and chatbots and to interact with AI via prompts.
20. Conversational UI The Conversational UI package delivers the Kendo UI for Angular AIPrompt and Chat components which allow the user to participate in chat sessions with other users and chatbots and to interact with AI via prompts.
22. AI Studio
23. Editor Preview Both npm i @google/generative-ai
25. Editor Preview Both ng g s services/gemini
26. Editor Preview Both
27. Editor Preview Both
28. Editor Preview Both
29. Angular & Kendo UI
30. Editor Preview Both
31. Editor Preview Both
32. Editor Preview Both
33. The Logic handleFileUpload(file, FileSelectComponent) fileToBase64(file) uploadFile(fileSelectComponent) createTypingMessage()
34. Editor Preview Both
35. Editor Preview Both
36. Editor Preview Both
37. Editor Preview Both
38. Kendo Chat API https://www.telerik.com/kendo-angular-ui/componen ts/conversational-ui/chat/message-box https://www.telerik.com/kendo-angular-ui/components/c onversational-ui/chat/data-binding https://www.telerik.com/kendo-angular-ui/components/uplo ads/api/fileselectcomponent
39. Template
41. Questions?
42. Next ? How I can build local projects? What about AI on Device ? What about stream ?
43. https://www.linkedin.com/in/danywalls/ https://x.com/danywalls www.danywalls.com