Accelerate your Sitecore development with GenAI

Accelerate your Sitecore development with gen ai

1. Accelerate your Sitecore development with gen ai By Ahmed Okour Sitecore Technical Manager at americaneagle.com Over 13 years of working on Sitecore implementations 7 Times Technology MVP 1

2. Agenda Introduction to GenAI and (LLMs) ChatGPT Prompt Engineering and Custom GPT OpenAI API Example: Building  AI Sitecore Code Conversion  AI Tools that you can use Github Copilot Builder.io Visual Pilot 2

3. Large language models refer to large general purpose language models that can be pre-trained and then fine-tuned for specific purposes these models are trained for general purposes to solve common language problems such as text classification , question answering document , summarization and text generation across Industries the models can then be tailored to solve specific problems in different fields such as Retail Finance and entertainment using a relatively small size of field data sets by Fine-Tuning LLMs (Large Language Models)

4. Large the enormous size of the training dataset sometimes at the petabytes scale (1 petabyte = 1,000,000 Gigabytes) Parameters: parameters are basically the memories and the knowledge that the machine learned from the model training; It define the skill of a model in solving a problem such as predicting text General Purpose It means that the models are sufficient to solve common problems  by understanding the human language regardless of the specific task Only certain organization have the capability to train such large models, which then can be used by others as a foundation models Pre-Trained and Fine-Tuned meaning to pre-train a large language model for a general purpose with a large data set and then fine-tune it for specific aims with a much smaller data set  LLMs Breakdown

5. With pre-trained LLM, you don't need to be an ML expert. you don't need train a model with training sets All you need to think about is how to design your prompt Which brings us to Prompt engineering Working with LLMs

6. Chat GPT : Prompt Engineering Prompt engineering is the process of refining prompts that a person can input into a generative artificial intelligence (AI) service to create desired output Write clear and specific instructions with detailed context  (Clear != short) Ask for structured output if needed Use few-shot prompting vs zero-shot prompting Keep modifying your prompt until you get the results you need

7. Chat GPT : Prompt Engineering Demo Time Clear Instructions Structured output Few shots prompting

8. Chat GPT : Custom GPTs Custom GPTs are a no-code feature of ChatGPT that lets you customize the chatbot according to the specific way you use it. Custom GPT can be used as guiding rule for Chat GPT, then using that custom GPT you provide additional details

9. Chat GPT : Custom GPTs Let’s you save useful prompt that you regularly use And you can share them with anyone or create a public link You can upload files for additional context You use perform actions with applications outside of ChatGPT

10. Chat GPT : Custom GPTs - DEMO

11. Open ai api OpenAI API allows you to leverage the power of various Models by code to achieve virtually any task. It offer a range of different models with different capabilities and price points You can also fine-tune custom models and use them with OpenAI API https://platform.openai.com/docs/introduction

12. Open ai api OpenAI API Pricing uses tokens as measurements of cost (Input and Output token) 1 token is usually ~= ¾ word or 4 chars in English You need to create account on openai.com, and purchase credits to use the API Pricing Example for GPT-4o

13. Open ai api - Example I built a small website that can convert Sitecore SXA Scriban or MVC code into Sitecore JSS ( Nextjs ) code Using Vercel AI SDK you can use all most of the popular LLMs including GPT4, Gemini and many mode. https://sitecore-gen-ai.vercel.app/ https://github.com/ahmed-ae/SitecoreCodeConversionGenAI https://sdk.vercel.ai/docs/introduction

14. Open ai api - Example One of the API types is Chat Completion, which lets you ask LLM any prompt you want You need to specify which model to use You need to send 2 different messages System : This to instruct the model to behave in specific way, e.g., act like a Sitecore code conversion tool User : This is your prompt that you want the model to execute Temperature : Controls randomness: Lowering the value will results in less random completions. As the temperature approaches zero, the model will become deterministic and repetitive. Max_tokens : The maximum number of tokens to generate shared between the prompt and completion

15. Open ai api – Code Demo https://sitecore-gen-ai.vercel.app/ https://github.com/ahmed-ae/SitecoreCodeConversionGenAI

16. Copilot is AI Pair programmer that offer auto-complete style suggestion as you code Powered by LLM developed by Github , OpenAI and Microsoft Trained on billions of lines of code in public repos in Github Trained on all programming languages Github Copilot is available as an extension in VS Code or Visual Studio You don't need to leave code workspace! You can try it with 1-month free trial AI Tools – Github copilot

17. Github Copilot is context-aware and specifically designed for software development Gather context to answer your question from: Current Open File Other open tabs in the IDE AI Tools – Github copilot

18. AI Tools – Github copilot – Demo Time Code Completion Code Generation /explain /fix /tests @workspace

19. Builder.io Visual Pilot is a Figma plugin that lets you convert Figma designs directly into code with responsive style in mind It support most of the popular js frameworks and styling libraries Eg , React, Angular, Vue, Typescript, Tailwind etc https://www.builder.io/c/docs/import-from-figma AI Tools – Builder.io Visual Copilot

20. Simply Select that layer in Figma you want to convert into code Select which framework, styling and language you want the output code to be AI Tools – Builder.io Visual Copilot

21. Demo Time Links https://www.builder.io/c/docs/import-from-figma https://youtu.be/bnrazLxUDLE https://www.builder.io/c/docs/figma-best-practices AI Tools – Builder.io Visual Copilot

22. Recommendation for courses https://learn.deeplearning.ai/ Has plenty of free courses on AI Recommended course: ChatGPT Prompt Engineering for Developers https://www.coursera.org/ Paid and free courses Wide set of courses for all levels Offers Online Certificates

23. Q&A ASK QUESTIONS!