{"componentChunkName":"component---src-templates-tags-js","path":"/tags/AI/","result":{"data":{"allMarkdownRemark":{"totalCount":6,"edges":[{"node":{"id":"cb065704-0aec-5758-ba5c-0574cad52242","html":"<p>Are you a developer who wants to use AI in their day to day coding but don’t have access to tools like <a href=\"https://github.com/features/copilot\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitHub Copilot</a>, <a href=\"https://github.blog/2024-04-29-github-copilot-workspace/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitHub Copilot Workspace</a> or Cloud based services like <a href=\"https://azure.microsoft.com/en-au/products/ai-services/openai-service\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Azure OpenAI</a>? If yes, read on and you’re going to have super powers by the end of this post.</p>\n<!--more-->\n<h2 id=\"why-bother\" style=\"position:relative;\"><a href=\"#why-bother\" aria-label=\"why bother permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why bother?</h2>\n<p>If you’re wondering what is all the fuss and why should I bother, I have to tell you AI is moving like a speed train and if you don’t jump in, you’ll be left behind and it would be very hard to catch on later. AI can help you enhance your coding skills, increase your productivity, and help you learn a great deal more than you do in your job.</p>\n<p>Here are some reasons why any developer needs to use AI:</p>\n<ul>\n<li><strong>Automated code generation</strong>: AI can generate code and save you time and effort. You can get suggestions with snippets of code and even get the rest of your code completed as soon as you have some of it written. This can speed up your coding and development process by a great deal.</li>\n<li><strong>Code review</strong>: AI can help to review code and identify potential issues, bugs, security vulnerabilities and code smells before they even become problems. This can improve the overall quality of your code and products and reduce time spent fixing bugs after go live.</li>\n<li><strong>Personalised learning</strong>: AI can provide personalised learning experience for you and help improve your skills and knowledge in a way which is tailored to your needs and learning style.</li>\n<li><strong>Natural language (NLP)</strong>: In addition to all of the previous points, you get to use your natural language to interact with AI using prompts, voice etc which makes the whole process even faster.</li>\n</ul>\n<h2 id=\"setup---lets-get-cracking\" style=\"position:relative;\"><a href=\"#setup---lets-get-cracking\" aria-label=\"setup   lets get cracking permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setup - let’s get cracking</h2>\n<p>Enough talk, let’s get into the action. You will need these before you can leverage AI in your development environment:</p>\n<ul>\n<li><a href=\"https://ollama.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ollama</a> which is an open source project allowing you to interact with LLMs locally. If you don’t have it setup, <a href=\"/blog/2024/05/28/local-llms/\">use my earlier post</a> to get setup. We also need to have a model installed which supports code generation.</li>\n<li><a href=\"https://code.visualstudio.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">VS Code</a> which is also an open source code editor which has billions of users globally. <em>You can use <a href=\"https://www.jetbrains.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JetBrains</a> if you are using that already BTW</em>.</li>\n<li><a href=\"https://www.continue.dev/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Continue</a> which is an extension which allows you to leverage LLMs in your code editors using cloud or local hosted models.</li>\n</ul>\n<h3 id=\"install-the-code-generation-model\" style=\"position:relative;\"><a href=\"#install-the-code-generation-model\" aria-label=\"install the code generation model permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Install the code generation model</h3>\n<p>Go into the environment which you have Ollama installed and install the <code class=\"language-text\">starcoder</code> model. You can get the 3b parameter version or if you’re adventurous like me, get the 7b version which is roughly 4GB.</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"63456791684493100000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`ollama pull starcoder2:7b`, `63456791684493100000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">ollama pull starcoder2:7b</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>And you should see the model being pulled and installed.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f80157b18b008a25f3bf964a2fb98e78/ab98c/pullmodel.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 20.740740740740744%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA+klEQVR42j3P7UuDUBQGcD/Worex0pmZXl/urjZd6qblxojqSxCtFdXofwgGo1W46D9/Ol5iH36cBw48nKPEaYEo6YMHEaKzAeI0RxCl6FL2RATGT2F5Ag4PYfsB2qZDGEzGYblird7VlN5giGJ4iXJ8DVfEVJbhfb5A9fOL5VdFVvggy+/Vf64wX3wi7pfQ7Q5aRwwHhkNcSQmTc8TZBZJiBDfowWACN7cT3D28SPePr2uTpxmmz2+UZ/C7GRUKqKYP7aTG5VTy0RXycizfrDE/hGrY0Om1pnqMxp6GjZ1DbO6qaOxr2Grq2G4ZdJlDZR40i6NtdaS69A9FZIBrryy18wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Pulling down the startcode model in Ollama\"\n        title=\"\"\n        src=\"/static/f80157b18b008a25f3bf964a2fb98e78/302a4/pullmodel.png\"\n        srcset=\"/static/f80157b18b008a25f3bf964a2fb98e78/01bf6/pullmodel.png 270w,\n/static/f80157b18b008a25f3bf964a2fb98e78/07484/pullmodel.png 540w,\n/static/f80157b18b008a25f3bf964a2fb98e78/302a4/pullmodel.png 1080w,\n/static/f80157b18b008a25f3bf964a2fb98e78/0d292/pullmodel.png 1620w,\n/static/f80157b18b008a25f3bf964a2fb98e78/b3608/pullmodel.png 2160w,\n/static/f80157b18b008a25f3bf964a2fb98e78/ab98c/pullmodel.png 2356w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"install-the-extension\" style=\"position:relative;\"><a href=\"#install-the-extension\" aria-label=\"install the extension permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Install the extension</h3>\n<p>First you need to install <a href=\"https://marketplace.visualstudio.com/items?itemName=Continue.continue\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Continue extension</a> in VS Code. You can click on the link from here or go into your VS Code extensions and get it installed.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/2ec0daeea40fd60badd27bb93e4b4058/6114f/vscodeext.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 31.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABbElEQVR42k2RzUvjQBiH+3eYNMlkkjaJaTr90K2KSlUW9qiC4HXvHhT/Hi/Cssv+AQoLWvqBsAseBC8e9KQHK5hLLUrhcRL82IGHl5dhnnfmNwUhfYIoRvplpFfC07jSo9GcIUkShBBI3ZfLek8KXNfFtm0Mw/igWCziOE5eCwvtb6xu7VBpb6O+fkeGtfzg0dExu3v7+EGMUnVUtUpdxcSxHi4llmXl4kyU1fe+0GoqVlbaJLUmanaZUhjnkzbXN5hfWsOWEaYxhWmaGBrzjUyQybL6LsuFSVJlOgqRwsELKjiuh1fyOfhxSOf0JKfb7dHv9zU9Op0Og8GAn79/6dtWCMNQx+R9CucW2zRb89hWkVKkEK7ONAj4d3NJtsZPY25v7xgOH7i/H/Ly8sxkAhdX11RrNZ27n+f8IazPfEE1ZnFsC+FH2EJS9kPOzi8YjUekaaplw5xMmKaPPI2e+TP4S5jUsR39Sf89+RUAsOoevZeb5QAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Installing continue extension in VS Code\"\n        title=\"\"\n        src=\"/static/2ec0daeea40fd60badd27bb93e4b4058/302a4/vscodeext.png\"\n        srcset=\"/static/2ec0daeea40fd60badd27bb93e4b4058/01bf6/vscodeext.png 270w,\n/static/2ec0daeea40fd60badd27bb93e4b4058/07484/vscodeext.png 540w,\n/static/2ec0daeea40fd60badd27bb93e4b4058/302a4/vscodeext.png 1080w,\n/static/2ec0daeea40fd60badd27bb93e4b4058/0d292/vscodeext.png 1620w,\n/static/2ec0daeea40fd60badd27bb93e4b4058/b3608/vscodeext.png 2160w,\n/static/2ec0daeea40fd60badd27bb93e4b4058/6114f/vscodeext.png 3823w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"configuring-the-extension\" style=\"position:relative;\"><a href=\"#configuring-the-extension\" aria-label=\"configuring the extension permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Configuring the extension</h3>\n<p>Once you have both of those installed, you can go ahead and configure your extension to use your local Ollama instance. Open the <code class=\"language-text\">config.json</code> settings for Continue using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>, then typing <code class=\"language-text\">> continue: open config.json</code>. Keep in mind that Continue supports a <a href=\"https://docs.continue.dev/setup/select-provider\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">whole host of providers</a> other than local ones. Go ahead and add the models you want to the config file. Do not forget to change the IP address to match your own instance if it is not available on <code class=\"language-text\">localhost</code>.</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"53467439845902590000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`{\r\n  &quot;models&quot;: [\r\n    {\r\n      &quot;title&quot;: &quot;Llama 3&quot;,\r\n      &quot;provider&quot;: &quot;ollama&quot;,\r\n      &quot;model&quot;: &quot;llama3&quot;,\r\n      &quot;apiBase&quot;: &quot;http://localhost:11434/&quot;\r\n    },\r\n    {\r\n      &quot;title&quot;: &quot;Starcoder 7b&quot;,\r\n      &quot;provider&quot;: &quot;ollama&quot;,\r\n      &quot;model&quot;: &quot;starcoder2:7b&quot;,\r\n      &quot;apiBase&quot;: &quot;http://localhost:11434/&quot;\r\n    }\r\n  ],\r\n  &quot;customCommands&quot;: [\r\n    {\r\n      &quot;name&quot;: &quot;test&quot;,\r\n      &quot;prompt&quot;: &quot;{{{ input }}}\\n\\nWrite a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.&quot;,\r\n      &quot;description&quot;: &quot;Write unit tests for highlighted code&quot;\r\n    }\r\n  ],\r\n  &quot;tabAutocompleteModel&quot;: {\r\n    &quot;title&quot;: &quot;Starcoder 7b&quot;,\r\n    &quot;provider&quot;: &quot;ollama&quot;,\r\n    &quot;model&quot;: &quot;starcoder2:7b&quot;,\r\n    &quot;apiBase&quot;: &quot;http://localhost:11434/&quot;\r\n  },\r\n  &quot;allowAnonymousTelemetry&quot;: true,\r\n  &quot;embeddingsProvider&quot;: {\r\n    &quot;provider&quot;: &quot;transformers.js&quot;\r\n  }\r\n}`, `53467439845902590000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-json line-numbers\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\r\n  <span class=\"token property\">\"models\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\r\n    <span class=\"token punctuation\">{</span>\r\n      <span class=\"token property\">\"title\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Llama 3\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"provider\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"ollama\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"model\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"llama3\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"apiBase\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"http://localhost:11434/\"</span>\r\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token punctuation\">{</span>\r\n      <span class=\"token property\">\"title\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Starcoder 7b\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"provider\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"ollama\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"model\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"starcoder2:7b\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"apiBase\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"http://localhost:11434/\"</span>\r\n    <span class=\"token punctuation\">}</span>\r\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"customCommands\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\r\n    <span class=\"token punctuation\">{</span>\r\n      <span class=\"token property\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"test\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"prompt\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"{{{ input }}}\\n\\nWrite a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.\"</span><span class=\"token punctuation\">,</span>\r\n      <span class=\"token property\">\"description\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Write unit tests for highlighted code\"</span>\r\n    <span class=\"token punctuation\">}</span>\r\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"tabAutocompleteModel\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\r\n    <span class=\"token property\">\"title\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Starcoder 7b\"</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"provider\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"ollama\"</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"model\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"starcoder2:7b\"</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"apiBase\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"http://localhost:11434/\"</span>\r\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"allowAnonymousTelemetry\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"embeddingsProvider\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\r\n    <span class=\"token property\">\"provider\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"transformers.js\"</span>\r\n  <span class=\"token punctuation\">}</span>\r\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<h2 id=\"testing\" style=\"position:relative;\"><a href=\"#testing\" aria-label=\"testing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Testing</h2>\n<p>Let’s test our setup, go ahead and open a file in which you have any code written. Select a code block and press <kbd>Ctrl</kbd> + <kbd>L</kbd> which opens the chat window, type <code class=\"language-text\">Explain this code to me in a few sentences</code> and press enter. You should see the explanation getting generated in the chat window:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/90a091790edb4e4bfc9a3317d27a018d/38abd/explain.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.7037037037037%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAACHElEQVR42p1UWa6jMBDkFtnY4hVjbCAhb6KR5v7Hqqk2eVE0X6P3UQLs7uqlKql6ZaC1Qtt2aJoGSilYa6GVhup7XM5nNHXN+/YNiXHOoef95/mZsZUcDmEsJNfrleQaxlgmeIQQMUwZfhzRdT3RoSUudYPL5YKahaQJQds2hbRS7GRdV6SUSlUhlg4E2gX4dMc4z5iWGcvGuCUheEs4aKPQs4m9066gknGXZXmTeu9fXRoobeHjjHT7wsiYtGas84jHMuFG5Byx5AlxHOBIrtUVlbED5pzweGxvYiHTeicclhXz7z+Y1lu5+7U9EGMssSlyAqPhrSlQQqiZvG0b7vd7SRi5LxlX9nglqWF1HSzs4GF8QK8szDCy88yVeJ6PEI76JVwle3s+n9gej0Iqlb0fyi6tk5ETFt7FG0dfE7Z7ZkxEThw1kpjCBYoq4jmuqxJlnSRzl4rvstiaCnonS6d9DLtgAUVyNzikKWAMns4IGAaec98irNa7mFVgYpbgvoPp6LFuJxRhFEfePbbbQuxR1/JsC76tsltnt1Al5rViEdkbSTS7FIPu3hLP1WU/7+fLf/XH9/F4fKOSCpZdLjnjNkUqFwvh4XAokKDP9+/v4+vs87wQSnKgsjeKsdCHEwkbFvk38H9RdRxtoiUynT9yZCvOF8IfkBVC+eEbkqQwILPTidLX7Pr4U8L+qor07uV0+RMQQU6n04/wFxOIojU4QUrfAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Local LLM being used in VS Code using the Continue extension\"\n        title=\"\"\n        src=\"/static/90a091790edb4e4bfc9a3317d27a018d/302a4/explain.png\"\n        srcset=\"/static/90a091790edb4e4bfc9a3317d27a018d/01bf6/explain.png 270w,\n/static/90a091790edb4e4bfc9a3317d27a018d/07484/explain.png 540w,\n/static/90a091790edb4e4bfc9a3317d27a018d/302a4/explain.png 1080w,\n/static/90a091790edb4e4bfc9a3317d27a018d/0d292/explain.png 1620w,\n/static/90a091790edb4e4bfc9a3317d27a018d/b3608/explain.png 2160w,\n/static/90a091790edb4e4bfc9a3317d27a018d/38abd/explain.png 2766w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"using-tab-for-auto-completion\" style=\"position:relative;\"><a href=\"#using-tab-for-auto-completion\" aria-label=\"using tab for auto completion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Using tab for auto completion</h2>\n<p>You can use tab to complete code in your code file. Create a new file called <code class=\"language-text\">index.js</code>, enter below comments:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"40358654305242080000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`// a function which calculates fibonacci sequence\r\n// and returns the nth number in the sequence`, `40358654305242080000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-javascript line-numbers\"><code class=\"language-javascript\"><span class=\"token comment\">// a function which calculates fibonacci sequence</span>\r\n<span class=\"token comment\">// and returns the nth number in the sequence</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p>Go to the next line and wait until your see the function name getting generated, if it didn’t type the function name and wait, it should generate the function and show you in highlighted grey text:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/944e3c4cc7a9ee991cfb44aef5fb39dc/8ae78/codecompletion.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 35.55555555555556%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA40lEQVR42o1R2W7DIBDkPxpzGLDNYRtI4tZR+/+fNQUalLSylD4Me2p2hyVfnyv8GmHWDZPz2PeA/SPgelnwvnmkMCLFEYJzMMZegsRoEc8p44w1zNiuM257ynbJRBPCouGsAhccnL8GYYxWxxoD5xy0HtH3Ct2J4i3j1FF0Gc9bPBPUmD22JyUppYT3Htba6nPOQCmtOJLVakc9pDxCCLhMWEi11nXTNsC5nyFSKYzjcB8+w+ceYyxstlL2ULk+DANICUpTI25Sil/B7zn2kNhqv2S3P7ykKa/N/nXBQ/l/rvwNPdDFs73BBzQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Continue generating code from comment\"\n        title=\"\"\n        src=\"/static/944e3c4cc7a9ee991cfb44aef5fb39dc/302a4/codecompletion.png\"\n        srcset=\"/static/944e3c4cc7a9ee991cfb44aef5fb39dc/01bf6/codecompletion.png 270w,\n/static/944e3c4cc7a9ee991cfb44aef5fb39dc/07484/codecompletion.png 540w,\n/static/944e3c4cc7a9ee991cfb44aef5fb39dc/302a4/codecompletion.png 1080w,\n/static/944e3c4cc7a9ee991cfb44aef5fb39dc/8ae78/codecompletion.png 1096w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Press <kbd>Tab</kbd> and the code should be persisted.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/9478b770b792262cc21c73a5266cd384/cd536/compleetedcode.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34.44444444444444%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA+0lEQVR42pVR7W6DMAzkQdZ8QTCkQJNSaAntD/b+73QzaZnGpknbj5OjO/lsXzJqB1TdgPoUQXWD+2PAfL9gHAPi5NH3Dq6SkPJvyKg6IrBpw+hCgA8tbmGEoxrWGhSFgTH/MNRagQrCzU+4+isbezYiiDeBw0FAML43CfGV2+uZzS2OJZ/aP3B2ZzavoHjI2qSUZGxv9WxiTqvfdd5QJ5MYZgzr6a7Gstwwxwti7OHHGUVJcG0Hci3apsb7MrHeY5peemFZP6U/yIjPs6ZME7Q2qeb5ml2e6pPTid+w6cawbsxOyyrSEFJ9ZrCtLsQ+N/WCVOpHplvPGsEH8F7IN0UNhFEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Getting autocomplete on tab\"\n        title=\"\"\n        src=\"/static/9478b770b792262cc21c73a5266cd384/302a4/compleetedcode.png\"\n        srcset=\"/static/9478b770b792262cc21c73a5266cd384/01bf6/compleetedcode.png 270w,\n/static/9478b770b792262cc21c73a5266cd384/07484/compleetedcode.png 540w,\n/static/9478b770b792262cc21c73a5266cd384/302a4/compleetedcode.png 1080w,\n/static/9478b770b792262cc21c73a5266cd384/cd536/compleetedcode.png 1114w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"refactor-code\" style=\"position:relative;\"><a href=\"#refactor-code\" aria-label=\"refactor code permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Refactor code</h2>\n<p>When you’re writing code, you could ask AI to refactor the code for you. Go ahead and clear the content of the file and replace it with below:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"20751653364029600000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`function calculateTotal(items) {\r\n  let total = 0;\r\n  for (let i = 0; i < items.length; i++) {\r\n    total += items[i];\r\n  }\r\n  return total;\r\n}`, `20751653364029600000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-javascript line-numbers\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">calculateTotal</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">items</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\r\n  <span class=\"token keyword\">let</span> total <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\r\n  <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;</span> items<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\r\n    total <span class=\"token operator\">+=</span> items<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\r\n  <span class=\"token punctuation\">}</span>\r\n  <span class=\"token keyword\">return</span> total<span class=\"token punctuation\">;</span>\r\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>Now press <kbd>Ctrl</kbd> + <kbd>I</kbd> and type refactor this code in the prompt and press <kbd>Enter</kbd>. Wait for the model to do its thing and you should see the result which you can accept or reject:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e7877870f4f16f7ba767c9e1abc90f81/082c8/refactor.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 27.40740740740741%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAwklEQVR42o3O206DUBCFYV5ECvsEe1eIRNNCBam2VAgl8f1f5ncwva3pxZeszExWJlIqpSm2tOUq0BaeTvIhOJrcUmeaOjc03vJmEl715q5KJ0QqTRmfHT8vnqXMuRaO69YwB82UJYw2fsgkTiZeCxVfwTJJybdXXNyGQZztk4gfNoh+LdTG8HncM44ty3JgmRumuWO47Oj7SnYVp/OO40dJ+x7u6tpAvfdERgozr8nkyyyYG/vHSXa3vM6d3P3H5opfYo2Z7MBe/BUAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Code refactoring using local LLMs\"\n        title=\"\"\n        src=\"/static/e7877870f4f16f7ba767c9e1abc90f81/302a4/refactor.png\"\n        srcset=\"/static/e7877870f4f16f7ba767c9e1abc90f81/01bf6/refactor.png 270w,\n/static/e7877870f4f16f7ba767c9e1abc90f81/07484/refactor.png 540w,\n/static/e7877870f4f16f7ba767c9e1abc90f81/302a4/refactor.png 1080w,\n/static/e7877870f4f16f7ba767c9e1abc90f81/0d292/refactor.png 1620w,\n/static/e7877870f4f16f7ba767c9e1abc90f81/b3608/refactor.png 2160w,\n/static/e7877870f4f16f7ba767c9e1abc90f81/082c8/refactor.png 2734w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"ask-questions-about-your-codebase\" style=\"position:relative;\"><a href=\"#ask-questions-about-your-codebase\" aria-label=\"ask questions about your codebase permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Ask questions about your codebase</h2>\n<p>You can also ask questions about your codebase by pressing <kbd>Ctrl</kbd> + <kbd>L</kbd> and typing <code class=\"language-text\">@codebase</code> and then your question.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 829px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/6eb6420cf2603c3e0a390bcdd9c65f8b/9d76a/codebase.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 192.962962962963%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAnCAYAAAAPZ2gOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAE1UlEQVR42oWW2VbjSAyG/Q4QCCGbs4fYsePsCWFNoLnkDbjlnsPra/Qpkcfd05y50KkqVZXWX6oKepOd9JOl9Ltt6XS6MhqNdOzIcDjM575ut9vS7Xal1+sZwb+5uTFijzFo3UwlHCTSabckbLXsUKPRkH6/b0JYt5Q/GAwkDENbu2DWCGbebDbtTNCoV2XQ68rF5aUJHMdjScZjqVarcnFxIeVy2ehS930OsReGTVM8n89MWK1WkwANLLhQqVwbE7q85FLJ+E4IKc4RjGI8qOud6+trCWBeXV3ZIk1TmU6nRlk2kTiO8xhBxLS4jqLIeFgJEaoA32Ei+OPjQ76/v+Xr60s+Pz/l7e1NXl5e5Pn5WQ6Hg7y+vtoIwXfabrdqQGaxDSqVipRKJTN9t9vZ5SRJcppMJmZ5kX7i4XpApiDihqtsoA06uv7feZHn/NlsdhToeCKOrRNsMB1yZUUiRD8RXgaetWJyIEJxfn5uREiK82K2i8SdAFCSMbeQbDFiOcBmjdVAy4Fer9dNKXecMMgE4gamukAyjrtcRBk8iLmvi9YXwW8CSQb4QSDusEHWPMME3DPOnL35fC7L5VI2m41hFYNyl3GFQ66Fzfv7+xx3wOjx8VH2+72Rz29vby2z3CUEuUCfYCFzBN7d3cnT05MBdrVa2RwFCGHv4eFBFotFDpnfBBJoXHML2QTgWIEgiDXuoQCh6/XaiDPwfhPo+EIYMcRSjx+xglAKzkjIv3gMNfZNnWuSNOO5QNJfO3UKb6JFEIfNhrS0TXU6mvl2aOu2jr2uFkCLcw1LKtnGmMC7MdK99Ah0RnymmuFsIeNsJd1hLOOpZlXnUbqQZLqWdL41XhTF1hutH3qzZOH1icDZJJN5mkg8WUm8+iXR8iDj9atEi73E618SL/cyWhx0/irZbGFN1mqZKsEqsmtFr4K6WiWJgng10r6nrmaTVAZ9rahBX6KbgcTRUNIklqHyWE/Vk1rtmJgA/719A9Kxtv+2ajpXq0t0Zu3cJZ3zRDDa/ELnpeMIUTEIs46NZV563hR8hO/N4ideMakmEFjgMnGkpbMGtICXcBAGygzcAWr2wSK4JNYAn8RyBg8DLEMY0r2vARngQzh8DTkOvWGwxzkf2csbLNmmVRFDNP0fcY7zVAkCUc7cgI1k4gMzNCtaf+3WRbKnUwVwz8li6G0fRqxaI4XLNhpJqpb3T50Ia4gn3hBn1pQn3YaRNXwrPVrV+/u7xRFXZgBbDzFPNVkcHusagbFegj86vdEkMzrxcJuwBW4qRJVwkItJkkrU78lcwR3rmNB0lfBioKXKWUoWYYwoNgv97UAgwlyzuaWCZ1p+2cnKTNeLcSzLOJI0jo7u4okq8pfTmoN/I9AKzsAY74e9K6qwraNBSZMw1A4z4B1XgDsfo7DOXPZK8U+Pf9nKvDGFJ9RGpbPTSMzhOeXtCxfJFrWIlU4OVEeBE9b4R8BfRz9jOCxfVUwY0skYwnGbMvPngVBQjpQca0JCyRFD+AjkHsYF292DvnJ3KrCSl56jvrh2XtELiFAx0iDsK7La7PSh2ZiVuONALdKfPy3/bdH2UOKKrGOXtJ+dnZ3ZwmNiJXh6U3AHzf73+ZOK32RLSrV6BDVaiKET8SCGWOM/g+LlvxEC/wHidWhQmGvB8wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"using context to ask question about the codebase\"\n        title=\"\"\n        src=\"/static/6eb6420cf2603c3e0a390bcdd9c65f8b/9d76a/codebase.png\"\n        srcset=\"/static/6eb6420cf2603c3e0a390bcdd9c65f8b/01bf6/codebase.png 270w,\n/static/6eb6420cf2603c3e0a390bcdd9c65f8b/07484/codebase.png 540w,\n/static/6eb6420cf2603c3e0a390bcdd9c65f8b/9d76a/codebase.png 829w\"\n        sizes=\"(max-width: 829px) 100vw, 829px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"use-documentation-as-context-for-your-questions\" style=\"position:relative;\"><a href=\"#use-documentation-as-context-for-your-questions\" aria-label=\"use documentation as context for your questions permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Use documentation as context for your questions</h2>\n<p>You can use documentation when interacting with AI which adds more accuracy to the response. The team have done a fantastic job and have pretty much any language or framework you can think of linked. You can use the <code class=\"language-text\">@docs</code> and then select your preferred documentation, or just simply type the doc name if you know it.</p>\n<p>Let’s open the chat window using <kbd>Ctrl</kbd> + <kbd>L</kbd>, then type <code class=\"language-text\">@react</code> and then <code class=\"language-text\">How do I update the page based on a parameter?</code> then press <kbd>Enter</kbd>.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 784px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7c25b147c7111cd502e4fd4fede99b5c/4971b/docs.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 135.92592592592595%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABYlAAAWJQFJUiTwAAADYUlEQVR42oWVyU7jQBCG/QwsWQjZnDibY8fZE7IAAiQkDtwQF8Qj8P6nmvqKlGXQjObwu7qrq/+urdtBs9mUdrst1WpVWq2W9Ho9Q73RMN3V1dU/cX19Lc1mQ8bjWDG2fQGD0WgkpVJJwrAjSZIqEmko4eXlpZTL5b8Ce0ixi+ORDIdD6YShBLVaTSqVii3iUelEwukYg3q9bnPkb7CffUjmASF3u11TvL+/y9fXl3x8fMjt7a08PDzI3d2d3N/fy8vLi83B4+OjPD095UB3PBxkPp9LQP4gxYPX11f5/PyUt7c3eX5+loMarddrubm5kePxKNvt1oB+v9/LbrczbDYbw3Q6lQB3CRFS3+CGGGRZZphMJj/GPneJ7Ww2+y5Kv9+3kBnHcWxFAhQnTdP/wu2QAa3ihcHLUCuFzvXFNiGaYisV5z4OvDquKILWoHWQFxcX+dzB3HU4BAJi9yrjMv1EgxIyqSANg8HAQkICbIohkybqYIRUlwleLpdLA4mmBcBisbBNq9XK5p58iseYFOFMToh3AGKIfINXzz3AU8bofIwNe4nEHQsIjzBQeFsQOpuclAPwDsmBxepiQ1SdTsfyGcBKASAkPAebfaPnEkBCfllHkk9IccwIWcAIUgw8FEjOz8+tulQRWcTZ2VmudzsLGVe9bfwhQNKT/jj8hvcptkh0XGGk9SHwopAzckLOKIZfK9ZIhReNdSLz60cXYB/wIQ+U3MP1yroxc7+ipKWYS3LHIVEUWdiBP5Z4SG9BgAd4iUccBopechivEICYq5ffFD+tWq3kZGCop1sf6hoESyXiEPOa6qt+TugK8pc3tl8rTsnwQjFUHQmu8SLzWtc16XojGhRKwf8GNCmIztlLlEbIJw9ZyRbkUfMS6c9n0G7JKGxLTzcxj3jdG98y1INAX0k7QLsF4oCXN9a/VkVd3hCGhrpJxrJOE9lnE9kptnrIYZqZbqG220kq09FQ56nZjrltmmd7vug378Mk1aRrnlLypOhGPUlpJc1TNtM2Gicy5YbwCCvmahtp5cungljINKa9Nhry6vTaUADagDB6KrNTdSkI/YZkPj/dMr+qRuj3EQ95ORhTVSpefCBcsgYJje09Chl6I/THgbD5c7EIkfchIAr/L/utKs6tI06/kT/9TBQXoJ8adgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Using documentation when interacting with AI\"\n        title=\"\"\n        src=\"/static/7c25b147c7111cd502e4fd4fede99b5c/4971b/docs.png\"\n        srcset=\"/static/7c25b147c7111cd502e4fd4fede99b5c/01bf6/docs.png 270w,\n/static/7c25b147c7111cd502e4fd4fede99b5c/07484/docs.png 540w,\n/static/7c25b147c7111cd502e4fd4fede99b5c/4971b/docs.png 784w\"\n        sizes=\"(max-width: 784px) 100vw, 784px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"perform-actions-with-slash\" style=\"position:relative;\"><a href=\"#perform-actions-with-slash\" aria-label=\"perform actions with slash permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Perform actions with slash</h2>\n<p>You can kick off an action using the slash in the chat window, this could be edit, comment, share, commit, test (which I had in the config and shows you how to do custom ones) or any predefined custom command.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 703px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b00b9ec1b0c6178195d8bc356933be1e/242e2/slash.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 77.77777777777777%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB9klEQVR42qVUXW8SURDlN0jLfl8WlkB3Yb93KWzpUiVEoVCMaaqJNqkf0fTF+KA+1EQb+8OPM9diTB9U8OHkzsydOXNmZ3crQgjYto16vQ7DMKBp2l+hqiqEZcEidDodNBoNCa6vxFGCJE2RJgkazSZqtZos+BM4p9VqwXFamE4n2HP30O160HUdFUVRZMK/EP0OrlvXrmNSYa/XI/buf8N1XZimicpwOEQcx8iyDCmPvgW4Nooi+UwrnueBVXIH7sT+JuBa3/elLQnDMEQQBBiPx8jzXMrmra83twkkIUtlQpae0Ka5AXflhCZtfRNIQiZjAlbHz5OV9vt9qXIrQp6fVRVFgbIs5YvKF47jbEfIIzN4U4PBAO12e2OiO4QxbSkgsiEyGtuiT7HZdLbALWEah0gjH2kcYFTs46gsYAsDwtRgWwbqlv4Ld31hUkyQLU8TQvBSDhboFifIJ6eIj57ASR/BLxaIyhU6+zP0yPYPfsIbzil3gXC0REAID0/gDuZ0t0Qnm8C0BP0c5peIF+8xPf+C/PEHVJNnKE4/4vj1NUZnn3D/+RUeXnzF7OU3GX/w4gqrdzdYvb3B8s13HD79jNmra2THl9ANUqgZJlTdxL1dFbuKDo2C1ZpGvkK+hh2yq3RXranYYf82xuc6h/P5NA0DPwD0uNZ9K6j/wQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Slash actions in using continued\"\n        title=\"\"\n        src=\"/static/b00b9ec1b0c6178195d8bc356933be1e/242e2/slash.png\"\n        srcset=\"/static/b00b9ec1b0c6178195d8bc356933be1e/01bf6/slash.png 270w,\n/static/b00b9ec1b0c6178195d8bc356933be1e/07484/slash.png 540w,\n/static/b00b9ec1b0c6178195d8bc356933be1e/242e2/slash.png 703w\"\n        sizes=\"(max-width: 703px) 100vw, 703px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>I will use the test command, select the code in your file and press <kbd>Ctrl</kbd> + <kbd>I</kbd>, then <code class=\"language-text\">/test</code> and finally <kbd>Enter</kbd>.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/03718092b6ae83d66dbc3f9bb03f008a/5df5d/test.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 55.55555555555556%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB70lEQVR42o2T2ZKaUBCGeYmMC7sLCWcTBEsWRcEAOhljKsm8/6P86YMzk6kkF7n46L+76IU+B4NxhnWyQRAwuI4Dy5xiMnrA6OEDxq+MRhiPx5hMp5gSk8mEuOs3Jve4EQQ+lBLgYg2mYogogdjswNKS2IOvtwi5QMg+wvdMONTUdWyyhK2x7lbHXReG63pYLudIkhWSqMQqzpD3N+y7R5weL8jrM9LigDQvsN5mCFiEIJQIhaJGEqs0B1cr8JDB8zwY+rFYLDDzqJN172pbGhOefY/ZtkO+A8+f0xQ+HBrCpTyd6/kz0j70YDblDgV934dQEut0DRVJRDF1JssFg1xxSMWhtJXhb02W8U8QQ4wNvtZU0B8mLE4Vum8tup9XtE8lukuMqlEoKoHyqAaKoyQrX3yJ4vDqy7d3hgln8zkOdYn+VqP52uHy/IT2esDxesKJilc1R7YXyKu/yf7whwmXesKdQH0psa9jHM8FDl2G7Y69KyQHvd3xAa3/heHTUoMgoFOt0FwbtN97+uwL6luLllZw/tGiv+7QfslQfY7Q9wku5xT7JkLTxuj6FGV9X4fG8GczLKmgogNJyxybPEa2SxHlOaJCX5WIDiYAk8sBoYIBrfkL7B2Gvox6j/oPMacac8AirTFNC5a+Nv/JL9Q8T4bUI1i1AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Using commands to perform an action\"\n        title=\"\"\n        src=\"/static/03718092b6ae83d66dbc3f9bb03f008a/302a4/test.png\"\n        srcset=\"/static/03718092b6ae83d66dbc3f9bb03f008a/01bf6/test.png 270w,\n/static/03718092b6ae83d66dbc3f9bb03f008a/07484/test.png 540w,\n/static/03718092b6ae83d66dbc3f9bb03f008a/302a4/test.png 1080w,\n/static/03718092b6ae83d66dbc3f9bb03f008a/5df5d/test.png 1572w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"use-files-as-context\" style=\"position:relative;\"><a href=\"#use-files-as-context\" aria-label=\"use files as context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Use files as context</h2>\n<p>You can use files in your context by using the <code class=\"language-text\">@files</code> tag. Simply type that in the search box and you will get prompted to select a file, or you can type the file name directly. Then type your question and press <kbd>Enter</kbd>.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 814px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/651042de665bf6ed228b76a388626396/a4262/file.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 158.14814814814815%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAACXBIWXMAABYlAAAWJQFJUiTwAAAEfUlEQVR42m2W2XbiRhCG9Qg+XgEJAxJoA4FYBAzYYx/b8ULmzm+QuZpcJXn/cyr1ldTE48lFUdXb37X81cLLti8Sj0vJs1Si4VCKopBhoyeTiYxGI4njWMbjsURRJEmS2FyWZTZ2+zjDHm+QLWQwTGQYhXJ9fS1hOJBut3sECsNQBoOBHUAD4sa9Xs/Gbg+2N4xYjOTy8lIBEpnNSpmVM/ED3+ZaVy25uroyabUarXOXF5fmQKaRbTYbSdNU+v2+eKm6zm1sCjq+XAdd6aq0W+0GDGk30pJWu32Uju9LV0EHg1CCbk98PxCvzWKrJcN+T76sKtlVG9ks11IWc5lOkIUUKmO1i+lC8slUcs3beFaYzsaFJNlEPZ1KFJbixZorPIw1D398/y5//fO3/Pjzh3z79rscDm/y8vIsT08P8vj4YPZiPv9VFnNZLvWydCdep9OxXOXRSNbLlSznC1ktVCPLSnWlBxp7pVqjWFaqq6q2EV1brdYKuBePypDcnsafKmgSxRKrjMJEwn5sMhiohGrrfKgRRfHIdDjU+aheY0+vm4gHdyg5SR6EdemNCkqjQCsddINaB432G/snXYsftMWDBoTMIrwbNTkFFI2MRvGRl0g9V++D6FAGgY/mIQuOa4Sf57lJOaeyUwPhIB3BfjTrU12DIScnJ3J6emrnPTbiHQtoPJuVpUz0wCxNZJpC9pms12tN/lLmVlUtnBaIeeYYY3Pe44dWc3zEZnGinuR6WdF4Q8+WehHe4hljwsQmKodhISOA4TILHORWFzYXMIdXAGAz54BdugwQIF8rxYBJbDYDyIvC7a4gpAPbadKFzbmLiwtzysNtFhggvCAOEA9dSmraBEIjcAmCzRpnoB62R8UYcAsbeDFcKISGVNoVFANhnvF2u5VpkwpLjWqjDV4RrgsZUAA5zGUIm4ca4rTJG3NJmslUwQmdcI8hs0h+7O1rqMMhQgYUWsDFuaalyjPJtINWqiuePQ015XVv+GhFoQifiwKIqybA5rHaeFSSX72o0orPm5TAUZwyYlMU3HZlJ4cOEDA2EwXhVmqTO3LFXucMaXJp81zyyYFrIb9pfOe5SwcHmXOc/SwG6B4HKr3f72W321kl8ZDq4ZFVVMes4TEeuks+igEC4r5or6+v8vb2Jg8PvNCPdsH7+7u+1C82fn5+tj10FhG5dv0JEDBIysTZ2ZmF7Ghwfn5+nPuoOQiJXWo+igfLXfvRauTTFYTPI2HXvVy/LO4bzDkK+FGY8wCh0txK7ngA7u/v5ebmxnL29e5e7lSefns2XqZK6KL4j6eu9Zx4hOUqBMfW+gH6okXY72/s8Gq9lcV6I/uvd/Z1i0eRRpJY/+O9+wdxBDwcDuYRwHP96j2+HGS1wbNbub3ZqcdLLciterxW2cjt7VYrXRo4KYGj9pFzgLhOqPzNiLOxFPqRz6dz/bDn6m39FiL8TbGXSSXQfxbuUf0IZoBUpmZ9/Uz5nbZ+yTrNU+Ufu4G1bjf4JWdOKArgRw8hqmsfx6//G38m82f5F50ImtN4ShJhAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Using files as context\"\n        title=\"\"\n        src=\"/static/651042de665bf6ed228b76a388626396/a4262/file.png\"\n        srcset=\"/static/651042de665bf6ed228b76a388626396/01bf6/file.png 270w,\n/static/651042de665bf6ed228b76a388626396/07484/file.png 540w,\n/static/651042de665bf6ed228b76a388626396/a4262/file.png 814w\"\n        sizes=\"(max-width: 814px) 100vw, 814px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"understand-errors-in-terminal\" style=\"position:relative;\"><a href=\"#understand-errors-in-terminal\" aria-label=\"understand errors in terminal permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Understand errors in terminal</h2>\n<p>When you get any errors or issues in your terminal, select the error text and press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> and you will get an explanation:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/821cb30d4dd42dfbf54bfb70b1814401/2bfae/terminalerror.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 48.888888888888886%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABuElEQVR42mVS7Y6jMAzkHVY0pYWEkITwWaBbtqraql2pf/r+DzRrB3Hau/sxMnHweMZO5LxHVVVwzoVYOh++pVLI85ygoLWGMSbEJZcjy7K/UBQF5TWiz+MRz+cTl8sFp3mGpcKy6eHaAb5pUbUNtHFQRCJlRpD/I5N0r9A0FtFMJO/3G6/XC+fzGZo62bpDM5zQTp9E3sGUJXWnIlL9Gyvhei60QjRNEx6PB263WyAsTAFXkbJ+Qj0QDiOsK/9YZev8D1u01gZwLg8OJKIjWWZ11+sVrNZaA1838N2Icf7C6XKG9TWRUJGSYY6/wcQcV5VRXdcYhgFt24al5HRpfYu6PwZ1VT/C+SoQLkuhZakF/9oPhLzR1c5qyZQe2vqgzDAZbb6wvHmNNN1jv1+QpmnAShYss0KeIyvk9feNxzweMJLtjp6U2u2QCgGZJAEq2SHnHH1vt1vCEhM+EyJPRUzYd91il7ocCnp3iYDeCiJIAgFDig2UiKHiOOTFJsYm/oCghoLuGBHbZNs8XEkK86rE9PWgZ3NH1YxhEVyw3yWYxhPmw51exJ2sZlB2gum+IbVFVtBIcosfkCgcf+5wqSkAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Getting terminal errors explained\"\n        title=\"\"\n        src=\"/static/821cb30d4dd42dfbf54bfb70b1814401/302a4/terminalerror.png\"\n        srcset=\"/static/821cb30d4dd42dfbf54bfb70b1814401/01bf6/terminalerror.png 270w,\n/static/821cb30d4dd42dfbf54bfb70b1814401/07484/terminalerror.png 540w,\n/static/821cb30d4dd42dfbf54bfb70b1814401/302a4/terminalerror.png 1080w,\n/static/821cb30d4dd42dfbf54bfb70b1814401/0d292/terminalerror.png 1620w,\n/static/821cb30d4dd42dfbf54bfb70b1814401/b3608/terminalerror.png 2160w,\n/static/821cb30d4dd42dfbf54bfb70b1814401/2bfae/terminalerror.png 3804w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"summary\" style=\"position:relative;\"><a href=\"#summary\" aria-label=\"summary permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Summary</h2>\n<p>This was another exciting step towards enabling everyone around the world to use AI in their day to day tasks without having to pay any fees or be dependant to any cloud provider. I hope you enjoyed and could get the setup up and running, and stay tuned for more AI content.</p>","timeToRead":5,"frontmatter":{"title":"🖥️ Use local AI to supercharge your coding skills","unformattedDate":"2024-06-07T00:00:00.000Z","date":"Jun 07, 2024","path":"/ollama-continue/","author":"Yaser Adel Mehraban","tags":["AI","LLM","GenerativeAI","Ollama","Continue"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECAP/aAAwDAQACEAMQAAABjtyqTouezfgTW4Z//8QAHBAAAwACAwEAAAAAAAAAAAAAAQIDAAQRFCEj/9oACAEBAAEFAmrVW1bUcz5IrD6Sior3ElhimBfV15KP/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BIT//xAAYEQACAwAAAAAAAAAAAAAAAAAAAhARMf/aAAgBAgEBPwFsKn//xAAfEAABBAICAwAAAAAAAAAAAAABAAIREjFBIWFxkaH/2gAIAQEABj8CID3e0blzoxCJJ2i6+9IutPGFWpKnB6UfVFAfK//EABsQAQACAwEBAAAAAAAAAAAAAAEAETFRYSFB/9oACAEBAAE/IfG0YSg8FM9hV1uGuRgRLdaSvI+XqHwQ5I5oO5QX2bxtKE6BbP/aAAwDAQACAAMAAAAQnBiC/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEQITH/2gAIAQMBAT8QuxmI/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERQf/aAAgBAgEBPxBJRWGlZ//EAB4QAQACAgIDAQAAAAAAAAAAAAEAESExQVFhcZGh/9oACAEBAAE/EANryrPLxFRCUho7de8XLlNoHBoD8fbnaG4Nlc04hsZVgvTNmE6YU3bWoG/MZVpwNR7ni9i57m4ittT5Wf/Z"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/6c270bf0842922bfe21f7a9ea04967db/5efc9/localaivscode.jpg","srcSet":"/static/6c270bf0842922bfe21f7a9ea04967db/e4d02/localaivscode.jpg 750w,\n/static/6c270bf0842922bfe21f7a9ea04967db/5efc9/localaivscode.jpg 1024w","sizes":"(min-width: 1024px) 1024px, 100vw"},"sources":[{"srcSet":"/static/6c270bf0842922bfe21f7a9ea04967db/cd166/localaivscode.webp 750w,\n/static/6c270bf0842922bfe21f7a9ea04967db/402a0/localaivscode.webp 1024w","type":"image/webp","sizes":"(min-width: 1024px) 1024px, 100vw"}]},"width":1024,"height":1024}}}}}},{"node":{"id":"e5eabf9f-bc7e-5e6f-9888-abd1e8ac7b4c","html":"<p>If you have worked with <a href=\"https://openai.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">OpenAI</a> or any other <a href=\"https://en.wikipedia.org/wiki/Generative_artificial_intelligence\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Generative AI</a> model aka <em>LLMs</em>, you would know that writing a good <strong>prompt</strong> is a very key part of how we interact with those models. However, it’s often ignored which most probably means people are not getting the most out of these super capable models.</p>\n<!--more-->\n<h2 id=\"the-why\" style=\"position:relative;\"><a href=\"#the-why\" aria-label=\"the why permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The why</h2>\n<p>The most important part of interacting with LLMs is writing a good prompt, and that’s why it is important to make sure not only you know how to write a good prompt, but also are aware of what tools are available which might help you do just that. I wrote this post to introduce <a href=\"https://github.com/danielmiessler/fabric\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">fabric</a> to you all since it has changed the way I personally use my local models and I can’t believe how did I not know about it before.</p>\n<h2 id=\"introducing-fabric\" style=\"position:relative;\"><a href=\"#introducing-fabric\" aria-label=\"introducing fabric permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Introducing fabric</h2>\n<p><strong>fabric</strong> is an open source tool which augments humans using AI. I know it sounds a little fancy, but believe me when you get to know its features and usefulness, you would totally be onboard with the definition.</p>\n<p>In short, fabric is a tool which not only has many patterns (a comprehensive prompt for a specific purpose) already baked in, but also allows you to use them with LLMs like OpenAI or even local LLMs (<a href=\"/blog/2024/05/28/local-llms/\">read my last post on how to install Ollama</a>) if you have them handy. Furthermore, you can add your own patterns if you like to the mix too and contribute back to the community if your pattern deemed useful to others.</p>\n<p>Enough talking, let’s get it installed and show you some cool features.</p>\n<h2 id=\"prerequisites\" style=\"position:relative;\"><a href=\"#prerequisites\" aria-label=\"prerequisites permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Prerequisites</h2>\n<p>You would need a few things installed to be able to seamlessly install fabric. I am using WSL to install it, but you can install it in a <em>linux</em> distro of your choice.</p>\n<ul>\n<li><strong>pipx</strong>: fabric uses pipx to install itself, so get it installed by running:\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"52350335434698960000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`sudo apt install pipx`, `52350335434698960000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> pipx</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n</li>\n<li><strong>python3-dev</strong>: Since it is using Python extensions, you would need to install the header files:\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"84848266583696880000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`sudo apt-get install python3-dev`, `84848266583696880000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> python3-dev</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n</li>\n<li><strong>ffmpeg</strong>: Fabric depends on this library and <strong>libavcodec-extra</strong> when handling multimedia:\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"42464079872131236000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`sudo apt-get install ffmpeg libavcodec-extra`, `42464079872131236000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> ffmpeg libavcodec-extra</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n</li>\n</ul>\n<h2 id=\"installing-fabric\" style=\"position:relative;\"><a href=\"#installing-fabric\" aria-label=\"installing fabric permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Installing fabric</h2>\n<p>You wouldn’t believe how simple the installation process is. First navigate to a folder where you intend to clone the repository, clone the repo and then navigate into the fabric folder:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"40146348777761820000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`cd /where/you/keep/code\r\n# if the path is a mounted drive you might have to run this with sudo\r\ngit clone https://github.com/danielmiessler/fabric.git\r\ncd fabric`, `40146348777761820000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token builtin class-name\">cd</span> /where/you/keep/code\r\n<span class=\"token comment\"># if the path is a mounted drive you might have to run this with sudo</span>\r\n<span class=\"token function\">git</span> clone https://github.com/danielmiessler/fabric.git\r\n<span class=\"token builtin class-name\">cd</span> fabric</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span></span></pre></div>\n<p>Now use <em>pipx</em> to install fabric:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"69694634903882195000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`pipx install .`, `69694634903882195000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">pipx <span class=\"token function\">install</span> <span class=\"token builtin class-name\">.</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Once installed, call the setup function where you have provide four API keys for OpenAI, Claude APIs, Google and YouTube APIs which you can get them from their respective consoles.</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"11620495145812427000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`fabric --setup`, `11620495145812427000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">fabric <span class=\"token parameter variable\">--setup</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>When you are finished, you need to exit bash and go back in to have access to fabric:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"14187771618667067000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`exit`, `14187771618667067000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token builtin class-name\">exit</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>And in your terminal:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"34683470481779980000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`bash`, `34683470481779980000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"powershell\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-powershell line-numbers\"><code class=\"language-powershell\">bash</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Now you can run fabric and see the list of available patterns:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"53761064504367350000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`fabric --list`, `53761064504367350000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">fabric <span class=\"token parameter variable\">--list</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Which should show you the list of available patterns.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/35df9457c4ff4bceaf77c02c94cf0afe/6edca/fabric-list.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75.18518518518519%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABgUlEQVR42p1T2W7CMBDMF/QAUaClIRDClZA4zuE4IQEK5aWq1P//manXhapIVG3yMFpblkezM7tGtXvF2/sHdvsjsryEUPB5gjAR8HwOxlOEsQCLvmoYCcj1Rr2FsGcuxnMfo+kKj9YUo9kKRpiu4SwZJgqOG6LzNEa7N0S7b6Glaut0PqPVs66+6bOCkeQbMEUaJAVkdUDPnOCua35/+In77mW9BiOIcxD8SCKWG5j2Un0wf/3wFwymlLETKc9K9E0HN51Bc0JZ7ZEWO1Cllv1YwlZGN1WpPYyyClyUuk49jmd70ZzQC4X2b8Uz0NllAtbUU8ldJv1vwlhWCMUaND6kMi22WAaJHp/bBl4aWak8zLfax6x8gVT3SBEPRnMMxnOttBYhqSJ1lDZV8pFUEhZ+jIeBXd9Dl6V6dHwu9cbQLFqOB3Oy1CtVJyCD2hOqXVJKZEPHRX/onDbCrJ22Qa3RDHIVTLE9It8cNM7B1CYMklx7R2Oj91p5SRZQKE1m8RMKKaJKvrPzSQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Getting the list of available patterns from fabric\"\n        title=\"\"\n        src=\"/static/35df9457c4ff4bceaf77c02c94cf0afe/302a4/fabric-list.png\"\n        srcset=\"/static/35df9457c4ff4bceaf77c02c94cf0afe/01bf6/fabric-list.png 270w,\n/static/35df9457c4ff4bceaf77c02c94cf0afe/07484/fabric-list.png 540w,\n/static/35df9457c4ff4bceaf77c02c94cf0afe/302a4/fabric-list.png 1080w,\n/static/35df9457c4ff4bceaf77c02c94cf0afe/6edca/fabric-list.png 1351w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"features\" style=\"position:relative;\"><a href=\"#features\" aria-label=\"features permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Features</h2>\n<p>Now let’s explore some cool features that will change they way you use LLMs forever. But first, we need to set our default model to make sure we are not charged by OpenAI or other available online models:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"11658558840659427000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`ollama list\r\n# replace the name of the model with whatever you have available\r\nfabric --setDefaultModel llama3:latest`, `11658558840659427000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">ollama list\r\n<span class=\"token comment\"># replace the name of the model with whatever you have available</span>\r\nfabric <span class=\"token parameter variable\">--setDefaultModel</span> llama3:latest</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<p>Now we’re ready to go. First off, let’s use one of the features which I use almost every day. I have subscribed to many YouTube channels be it tech or not, and many of those post long videos on a daily basis. You can summarise the whole video using one command:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"27326009494619476000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`yt --transcript https://youtube.com/watch?v=uXs-zPc63kM | fabric --stream --pattern extract_wisdom`, `27326009494619476000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">yt <span class=\"token parameter variable\">--transcript</span> https://youtube.com/watch?v<span class=\"token operator\">=</span>uXs-zPc63kM <span class=\"token operator\">|</span> fabric <span class=\"token parameter variable\">--stream</span> <span class=\"token parameter variable\">--pattern</span> extract_wisdom</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>We’re using the <code class=\"language-text\">extract_wisdom</code> pattern here, but you can use any other pattern you want. The API key you provided for YouTube is used here to get the transcript and pass it to the LLM using the pattern you have chosen. Super cool and fast response makes this a really great setup.</p>\n<p>Let’s try something different:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"96074577321918320000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`echo &quot;An idea that coding is like speaking with rules.&quot; | fabric -sp write_essay`, `96074577321918320000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"An idea that coding is like speaking with rules.\"</span> <span class=\"token operator\">|</span> fabric <span class=\"token parameter variable\">-sp</span> write_essay</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Here we’re passing an idea and ask fabric to call our model and ask for an essay. The result will truly amaze you.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/4e68d6bbc83aa0b72e598ada2b89ab6a/f1f01/fabric-essay.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 44.44444444444444%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABm0lEQVR42jWS3XKbMBCFeZLWiTEgQBLi3wa7buOpO81FOrnITN7/QU7PEfHFeiVZnP32rJLb/RXr9Yb1xwum5QLb9LBhhO8mtOMJoZ+RGoddZrE3HlndorA9DlWHwg+owgzjR+Rc73KH5Ik/aRl4sUPOy4eKof1XfqbIY59TyPDDut1E6va4RXdCxbznvaRqRigK28G4Hq6bUYeJZxMLdNwfUao6CUUnSglnjEJkbohitl94NiDJKZRFshA/1Do1DakaUoWY068QZclClkSGWYISc8MKP55Rch0JC5JJLAb3ypZtRb/439biEIUUzXSOAs10QTNfMKwvMfx4QSIKRf4wmz7sCx/b15kKSixXUVph+80vP65wFFWrw/oL3eknTCChPBKNqB5riRl6o6x9DJFRRIKBVO3pGgnn+x+0H+9o7n8RjlckEtJAvqUlnguH72mF3aHGU263dVbz3EOvQS9AQ5B/hs+lalj89hvZ5weWt3/08oxEFAe2JmG1uNFthLJAQ9Mg/LAgpTUKiWrKuYbSLSjZriN13Z/xH0lDGTrscRk5AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"writing an essay based on a prompt via fabric\"\n        title=\"\"\n        src=\"/static/4e68d6bbc83aa0b72e598ada2b89ab6a/302a4/fabric-essay.png\"\n        srcset=\"/static/4e68d6bbc83aa0b72e598ada2b89ab6a/01bf6/fabric-essay.png 270w,\n/static/4e68d6bbc83aa0b72e598ada2b89ab6a/07484/fabric-essay.png 540w,\n/static/4e68d6bbc83aa0b72e598ada2b89ab6a/302a4/fabric-essay.png 1080w,\n/static/4e68d6bbc83aa0b72e598ada2b89ab6a/0d292/fabric-essay.png 1620w,\n/static/4e68d6bbc83aa0b72e598ada2b89ab6a/b3608/fabric-essay.png 2160w,\n/static/4e68d6bbc83aa0b72e598ada2b89ab6a/f1f01/fabric-essay.png 2212w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"taking-it-to-next-level\" style=\"position:relative;\"><a href=\"#taking-it-to-next-level\" aria-label=\"taking it to next level permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Taking it to next level</h2>\n<p>There are two library in macOS called <code class=\"language-text\">pbcopy</code> and <code class=\"language-text\">pbpaste</code> which allow you to copy text from and paste text into your terminal, but at large. Fortunately we can leverage a library which allows us to do exactly that in WSL or any other linux distro called <code class=\"language-text\">xclip</code>. Let’s get it installed and running:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"67851091814654984000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`sudo apt install xclip\r\n\r\nnano ~/.bashrc`, `67851091814654984000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> xclip\r\n\r\n<span class=\"token function\">nano</span> ~/.bashrc</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<p>Now paste these two lines at the end of the file:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"37387826260222214000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`alias pbcopy='xclip -selection clipboard'\r\nalias pbpaste='xclip -selection clipboard -o'`, `37387826260222214000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token builtin class-name\">alias</span> <span class=\"token assign-left variable\">pbcopy</span><span class=\"token operator\">=</span><span class=\"token string\">'xclip -selection clipboard'</span>\r\n<span class=\"token builtin class-name\">alias</span> <span class=\"token assign-left variable\">pbpaste</span><span class=\"token operator\">=</span><span class=\"token string\">'xclip -selection clipboard -o'</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p>Exit nano with <kbd>Ctrl</kbd> + <kbd>X</kbd>, then enter Y and press <kbd>Enter</kbd>. Last we need to refresh our terminal:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"661618160155108600\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`source ~/.bashrc`, `661618160155108600`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token builtin class-name\">source</span> ~/.bashrc</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>We’re good to go. Navigate to any site which has a long article, I use <a href=\"https://www.abc.net.au/news/2024-05-30/rba-should-hike-interest-rates-in-june-but-will-it/103909992\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">this one talking about interest rates in Australia and what might happen in June</a>. Copy all the text in that page and then type this in your terminal:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"98334808914564350000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`pbpaste | fabric -sp extract_insights`, `98334808914564350000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">pbpaste <span class=\"token operator\">|</span> fabric <span class=\"token parameter variable\">-sp</span> extract_insights</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/cb088eba0d396238922477c8812e1fe5/e1190/pbpaste.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 26.666666666666668%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA/UlEQVR42j2P2U7DMBBF8xEIBI3akjhestjOYmdpAlRC/P8fXWYM6sPRjCfj45tsXHa4cUk0PuAiDArZolSE7iCI/F0hLwxOV4W3q0z9WTSJV5q9nCs85wJPpxKZ7iZ0w0osqGpPEgdBtdCWcKianuZ9+iapl+1AswHaBhgfUfsZLd2V3Yi8bJAN84E+7o9Lf1ILYfy/zEPTsiKRbEcYF6EoBEu7cYN2IVVD4ou0yOy4wk0b2n4G9+kcbvAE94aScGr+E0GPGhLUtMuwhGWMiweUjciW7Qv75zfCcqCmZUVpGlpkAafis3ykCylRvN1x3H8Q1g9MxDDvqdppxS9sE5k7BtHZ4AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"using pbpaste to get an entire article in the terminal and pass it to fabric\"\n        title=\"\"\n        src=\"/static/cb088eba0d396238922477c8812e1fe5/302a4/pbpaste.png\"\n        srcset=\"/static/cb088eba0d396238922477c8812e1fe5/01bf6/pbpaste.png 270w,\n/static/cb088eba0d396238922477c8812e1fe5/07484/pbpaste.png 540w,\n/static/cb088eba0d396238922477c8812e1fe5/302a4/pbpaste.png 1080w,\n/static/cb088eba0d396238922477c8812e1fe5/0d292/pbpaste.png 1620w,\n/static/cb088eba0d396238922477c8812e1fe5/b3608/pbpaste.png 2160w,\n/static/cb088eba0d396238922477c8812e1fe5/e1190/pbpaste.png 2203w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"what-next\" style=\"position:relative;\"><a href=\"#what-next\" aria-label=\"what next permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What next</h2>\n<p>There are many cool features you might be interested in, but I just highlight two more which I think are the most practical. Setting a <em>context</em>, and adding <em>custom patters</em>. Setting a context is done by adding a markdown file called <code class=\"language-text\">context.md</code> in the <code class=\"language-text\">./config/fabric/</code> directory to add context to your pattern. This could be anything you like, for example you might add your goals or the essence of your existence and why you do what you do day to day.</p>\n<p>From the custom patterns perspective you can always add your custom patterns which you do not want to upload to fabric in the <code class=\"language-text\">~/.config/custom-fabric-patterns</code> directory. However, whenever you want to use them with fabric you need to move them into the <code class=\"language-text\">~/.config/fabric/patterns</code> directory. Just beware that any time you update fabric, the folder get updated and every custom pattern will be deleted, so you need to copy them from the custom folder before using them.</p>\n<h2 id=\"summary\" style=\"position:relative;\"><a href=\"#summary\" aria-label=\"summary permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Summary</h2>\n<p>Hope you now have a good cause to go setup fabric and spend a little bit more time with your local LLMs and get better at writing prompts and extracting information or getting what you need faster and more effectively. Stay tuned for more AI content 👋🏽.</p>","timeToRead":4,"frontmatter":{"title":"🔮 fabric, augmenting humans using AI","unformattedDate":"2024-06-01T00:00:00.000Z","date":"Jun 01, 2024","path":"/fabric/","author":"Yaser Adel Mehraban","tags":["AI","LLM","GenerativeAI","fabric","promptengineering"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7BAAAOwQG4kWvtAAACwUlEQVR42m2Sa0ySURiA0axV648/bG1t/ehnv9qqtaYTJ6n7DAOcJGlETqfTFQUrChd9xtSlhpKQaJOZE7zNlBpe8AZq6cDLHHnLVPCaGCqJQ0K+700warbO9m7nvDvv856z9yEQ/lmAgj+6F559SUJf4LR8JWirbSt/vsG6bq5YW+7OMSd77wH4/a7w06IQQKfXHzoA0WohYGgIDnvPGvtJs9wiGyowz+gLTUsj4u94I28G+rPXoCd3Fe8Qz3LACqfnG2xnoR+O+TgoivoT9shHUALqD4T9jq+SeoOMktUek9wFE2Wb2ECBBa/jftlVC2cwo9KKLaq23ZOVVmxEsrDTm2PeVmXOGbVlmylSqenUnxca1bZAg3KNOFq3IZisdsxOVe2CvnzD1Ve2jhmq7Nhw7Q7oKmwwoPgBzaJFyEvTuQWsLqjJXcLbqt1QmDuP0yhNNgSp5BJS7jRnqkosc+3yHWiUOaHm9QZUSBYw1bttaFLaQSGzgFQ4Afx7emBnDAOPbQTu/UnIEVlxWf1PnC0YxcKjFM4IRAVIdKWGEEluWrmZoIW09MHdhBSdg8X+5HqQNQ7PXkzDQ74BOE8NICw2QnbRIHCeG4D38ivwpd/gcckyMDgfISyyyhlH1wCNoZZ4v0uKKueGkEpLSddqp5L5Y/Ck2IQ/yvuMC8TjoNDYQd7phNvcVqAyazFqstpNSWvH6Hd1GDmpFQsj17iQ2A6IYbT2oSzWUd9svIokJraci6Y2KmNZ75d4ommsuBMgS2mDYPIbPJiixG/xx4HJG4MbnGGISdICQm/Do+M8sBY9k1l/Zn/KXt08QE/4vCIGhIa/FdLSe+E8qcgdSqsDamqXg0gulV8KyedeIUpFxKtyRdT1agklvik+NfXDcZ+PB4T2OOSTMyNDe+Li5YLuCyFiB8Jo0EcghcH/LfLl4G/+F9J4nFtMefroAAAAAElFTkSuQmCC"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/64bf948aba70b827b708605fff9f762b/1cdee/fabric-logo.png","srcSet":"/static/64bf948aba70b827b708605fff9f762b/7440e/fabric-logo.png 750w,\n/static/64bf948aba70b827b708605fff9f762b/1cdee/fabric-logo.png 753w","sizes":"(min-width: 753px) 753px, 100vw"},"sources":[{"srcSet":"/static/64bf948aba70b827b708605fff9f762b/6abb8/fabric-logo.webp 750w,\n/static/64bf948aba70b827b708605fff9f762b/e748a/fabric-logo.webp 753w","type":"image/webp","sizes":"(min-width: 753px) 753px, 100vw"}]},"width":753,"height":392}}}}}},{"node":{"id":"4f4f7548-6059-5cdd-9666-b25628bb1cd8","html":"<p>Many learners ask me how they can get access to <a href=\"https://azure.microsoft.com/en-au/products/ai-services/openai-service\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Azure OpenAI</a> and <a href=\"https://en.wikipedia.org/wiki/Generative_artificial_intelligence\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Generative AI</a> since they don’t have access to an enabled subscription. I knew there are open source tools which allow people to work with these models, but I never had a use case to go and try this out.</p>\n<!--more-->\n<h2 id=\"-the-need\" style=\"position:relative;\"><a href=\"#-the-need\" aria-label=\" the need permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🩺 The need</h2>\n<p>I have a kid in high school and she wanted to give <a href=\"https://chat.openai.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ChatGPT</a> a try for a task she was working on, I was afraid she would use it to get the answer right away instead of figuring out how to solve the problem. This forced me to look into how I can have a better control over how she could use LLMs without “cheating”.</p>\n<p>That’s when I stumbled upon <a href=\"https://ollama.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ollama</a>, a great cross-platform, open source project which happens to be the easiest way you can get an engine running with many available models. Although their Windows version is experimental and in development, you can install it on <a href=\"https://learn.microsoft.com/en-us/windows/wsl/about\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Windows Subsystem for Linux aka WSL</a>.</p>\n<h2 id=\"️-prerequisites\" style=\"position:relative;\"><a href=\"#%EF%B8%8F-prerequisites\" aria-label=\"️ prerequisites permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🖥️ Prerequisites</h2>\n<p>Before we start our process, you need to know that you will need a system which has a decent GPU since running AI locally demands that. This could even be your laptop which has a graphic card, or even better your gaming PC with that crazy spec you spent that much money on.</p>\n<p>You most likely need docker installed as well since I will use it to run the web UI, but this is not mandatory.</p>\n<h2 id=\"️-installation\" style=\"position:relative;\"><a href=\"#%EF%B8%8F-installation\" aria-label=\"️ installation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>⚙️ Installation</h2>\n<p>Of course you need WSL enabled and a distro installed, but don’t worry as soon as you enable <strong>Virtual Machine Platform</strong> and <strong>Windows Subsystem for Linux</strong> in your windows features, all it takes is a few commands:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"15196369316265267000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`wsl -- install -d ubuntu\r\nwsl --update\r\nwsl --set-default-version 2`, `15196369316265267000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">wsl -- <span class=\"token function\">install</span> <span class=\"token parameter variable\">-d</span> ubuntu\r\nwsl <span class=\"token parameter variable\">--update</span>\r\nwsl --set-default-version <span class=\"token number\">2</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<p>Before we install any packages, it’s always a good idea to update the current ones, this becomes more important if you have had WSL enabled for a while.</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"85946761095945650000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`sudo apt update && sudo apt upgrade`, `85946761095945650000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update <span class=\"token operator\">&amp;&amp;</span> <span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> upgrade</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Now it’s time to install Ollama:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"57172958959863160000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`curl -fsSL https://ollama.com/install.sh | sh`, `57172958959863160000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">curl</span> <span class=\"token parameter variable\">-fsSL</span> https://ollama.com/install.sh <span class=\"token operator\">|</span> <span class=\"token function\">sh</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>This will take a while to finish, so get a coffee and be patient. Once it is installed it will start the Ollama engine and shows you it’s running. To test it you can open a browser and navigate to <code class=\"language-text\">http://localhost:11434</code> which should show you it’s running:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 487px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a1ef1bb866740823f28c1122cc093f34/7b439/ollama-running.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34.44444444444444%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAABa0lEQVR42o2OWU/bUBCF/UwdZ6NCJSAUoqQxDkGNs1wHsUbgBMeBbDSYkAXMvrV9qvjzH9dUrcRD1T58OnPmjDRHsepHCLtFZa/5i30Xc7eB2G9Rqh1gbtcxdxoUtmwK27b0NkWZF+WutHtAuea8Q+ldPtI8u6LuXeBIbZz6TL/9pNYf0Z7c0B5fYXc8umc+naGPOxixd/SVes9jy2ljyRJVWeI3yvHtDw7P72mOb2hN73And0y+v2B7Pv3LJ/r+A+7JlOH1MwN5153IB70hrjel1h6w4XTYbHb/oOiFMnqhQqBG0Xoj8Dmpn9eKZNZMsl9K6JIVeRMQZIYpyJUsVsvVdyipZJJsJo2uZ1mY/8RiIsHcx1mSS0tk0mlSqWUWFxJoqko4FHpDC6l/Rcnn81REBbvhkMutYBgGy/KJEAJRXUdYAsuyiEajxOPxf6JomkZIfv0wM0Mwh8MakUgEVe5U2SrIAh+Lxf6LV8no4FvZ7msgAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Ollama running in WSL\"\n        title=\"\"\n        src=\"/static/a1ef1bb866740823f28c1122cc093f34/7b439/ollama-running.png\"\n        srcset=\"/static/a1ef1bb866740823f28c1122cc093f34/01bf6/ollama-running.png 270w,\n/static/a1ef1bb866740823f28c1122cc093f34/7b439/ollama-running.png 487w\"\n        sizes=\"(max-width: 487px) 100vw, 487px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Now you can pull down a model and interact with it:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"38857199863488920000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`ollama run llama3`, `38857199863488920000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">ollama run llama3</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Once it’s done, it will wait for you to enter your prompt:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/898b49ba227947039dc7028e714f2526/b4904/ollama-waiting.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 5.185185185185186%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAU0lEQVR42h3DMQqAIBiA0S7RUg0WIhGmqZQODeX+n6Kh+5/gC3rwGhGh3pVSCjlnQoiklPDeY63FOUc8ds554+0vnsUha0vsBsZpQmv9N8aglOIDD9wfYloWc+AAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Ollama waiting for a prompt\"\n        title=\"\"\n        src=\"/static/898b49ba227947039dc7028e714f2526/302a4/ollama-waiting.png\"\n        srcset=\"/static/898b49ba227947039dc7028e714f2526/01bf6/ollama-waiting.png 270w,\n/static/898b49ba227947039dc7028e714f2526/07484/ollama-waiting.png 540w,\n/static/898b49ba227947039dc7028e714f2526/302a4/ollama-waiting.png 1080w,\n/static/898b49ba227947039dc7028e714f2526/0d292/ollama-waiting.png 1620w,\n/static/898b49ba227947039dc7028e714f2526/b4904/ollama-waiting.png 1768w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>And upon <kbd>Enter<kbd> it shows you the response:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/508037ed321b1d8cdc8a23680350a727/54421/pentagons-area.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 32.96296296296297%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAz0lEQVR42nWRSxKEIAxEuYXAKF9F3Ize/3IZOiCl1rjoSgzy0iFi3790HEdXSomC87QURe/I2SLnKARP1lpSSpGU8lUixkjLstA8z4Qcl40xZMplADhvwnc9r3Xk0FlHFOu6Us6ZEMdxfHXwr47aUwzcto1yERwCOk0Td+PO3rMb1K8ufanjv2EY7iNjXEBDCDw6IgT42VWquyOtNQs5gFeowBLWVICxgAokNgEKF6f62zaXz3fFBAAzMM51MXUUx7C62dDBWn+6s6c+7QwOf/ssvVdPUOA3AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Ollama answering to prompts using Llama3 model\"\n        title=\"\"\n        src=\"/static/508037ed321b1d8cdc8a23680350a727/302a4/pentagons-area.png\"\n        srcset=\"/static/508037ed321b1d8cdc8a23680350a727/01bf6/pentagons-area.png 270w,\n/static/508037ed321b1d8cdc8a23680350a727/07484/pentagons-area.png 540w,\n/static/508037ed321b1d8cdc8a23680350a727/302a4/pentagons-area.png 1080w,\n/static/508037ed321b1d8cdc8a23680350a727/0d292/pentagons-area.png 1620w,\n/static/508037ed321b1d8cdc8a23680350a727/b3608/pentagons-area.png 2160w,\n/static/508037ed321b1d8cdc8a23680350a727/54421/pentagons-area.png 3009w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"running-as-service\" style=\"position:relative;\"><a href=\"#running-as-service\" aria-label=\"running as service permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Running as service</h2>\n<p>Another issue I was facing now was that I didn’t want to keep my terminal running, so a better way would be to run Ollama as a service. Since WSL does not use the <code class=\"language-text\">systemd</code>, you can’t run services by default. So we have to first enable it:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"27059587294950950000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`nano /etc/wsl.conf`, `27059587294950950000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">nano</span> /etc/wsl.conf</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Then enter these lines anywhere in the file:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"29521744590599664000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`[boot]\r\nsystemd=true`, `29521744590599664000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token punctuation\">[</span>boot<span class=\"token punctuation\">]</span>\r\n<span class=\"token assign-left variable\">systemd</span><span class=\"token operator\">=</span>true</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p>And finally exit the nano with <kbd>Ctrl</kbd> + <kbd>X</kbd>, select Y to save your changes. Now we have to restart our WSL. Exit our of WSL by typing exit, and then run:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"2875793424427431000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`wsl --shutdown\r\nwsl -l\r\nwsl run Ubuntu-22.04`, `2875793424427431000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">wsl <span class=\"token parameter variable\">--shutdown</span>\r\nwsl <span class=\"token parameter variable\">-l</span>\r\nwsl run Ubuntu-22.04</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<div class=\"custom-block info\"><div class=\"custom-block-body\"> <strong>Note:</strong> Replace the name of the distro with whatever you have which is shown from the list command.</div></div>\n<p>And finally start the service:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"17098467379844618000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`sudo systemctl enable ollama\r\nsudo systemctl start ollama`, `17098467379844618000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> systemctl <span class=\"token builtin class-name\">enable</span> ollama\r\n<span class=\"token function\">sudo</span> systemctl start ollama</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<h2 id=\"-user-interface\" style=\"position:relative;\"><a href=\"#-user-interface\" aria-label=\" user interface permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>📱 User interface</h2>\n<p>This is great, but my kiddo can’t use my terminal to interact with these models. So I went on a hunt to find a user interface which can use Ollama, and not long after I found <a href=\"https://openwebui.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Open WebUI</a> which allows you to leverage Ollama and interact with it via a user friendly UI. Plus it has the benefit of persisting your conversation history.</p>\n<p>You can install it directly on the WSL, but I’d much prefer to use the docker version of it, but first you need to enable the WSL integration on the Docker Desktop app:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a2008c9803a34cfc3f3665c7f0630bc6/99375/wsl-docker.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 68.88888888888889%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAABj0lEQVR42pWT6W7jMBCD/Q7bnLYlH5Is+U7SAn3/F+NyxmmALbZo8uODZDgmSM4kW94/0cYBf44FdmfzD2+nUs99bp8m8/2EblzRdIMKC5VPqEkbR5zKGrtXBE13o+CiRAqHYSa8TytcGl9yp4JVN6OJE2o6bOKCOowwbSARR7p7WdC6COsSY/bImx6lo3BIrKB/ub/NYbphWD/Upe9n+DThZBod0oEOD4VQPS94rrzGNXRahZ6R5b45zesAeS88K5qdbQvrt8iWlH7G0UYcTGBk+1ih/beV2v/n3OcGWdkETvjCuAvXhCs0XXXCQk3HJ9PeaZTjF+W3O5F6MhO4KhR07K4lsoM5I2pc6/SDhyiftwqcvnvc78hvs9JN6Jd3pPmG8fLBHVw1vnRZCemCsk0oVKTB7v7v+YnsUFgOZVR3EtlzqR3jyykLLnUImmK40oXTrn7+p3C6+oF+vKrDyB5F/NxOyIl0s8s55WLr6ZcpO+7gTJfT/Rwfz1Ugeo4omg5F7RXptyC5Pm9dfwn+BWwVgBd9ZWaVAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enabling WSL integration in Docker Desktop\"\n        title=\"\"\n        src=\"/static/a2008c9803a34cfc3f3665c7f0630bc6/302a4/wsl-docker.png\"\n        srcset=\"/static/a2008c9803a34cfc3f3665c7f0630bc6/01bf6/wsl-docker.png 270w,\n/static/a2008c9803a34cfc3f3665c7f0630bc6/07484/wsl-docker.png 540w,\n/static/a2008c9803a34cfc3f3665c7f0630bc6/302a4/wsl-docker.png 1080w,\n/static/a2008c9803a34cfc3f3665c7f0630bc6/99375/wsl-docker.png 1525w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Once you have that done, simply run the docker command:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"24490440737839040000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`docker run -d -p 3005:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main`, `24490440737839040000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">docker</span> run <span class=\"token parameter variable\">-d</span> <span class=\"token parameter variable\">-p</span> <span class=\"token number\">3005</span>:8080 --add-host<span class=\"token operator\">=</span>host.docker.internal:host-gateway <span class=\"token parameter variable\">-v</span> open-webui:/app/backend/data <span class=\"token parameter variable\">--name</span> open-webui <span class=\"token parameter variable\">--restart</span> always ghcr.io/open-webui/open-webui:main</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Note I changed the default port to 3005 since I have a few other apps running on port 3000 in development. Once the container is up and running all you need to do is to open a browser and navigate to <code class=\"language-text\">http://localhost:3005</code>:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/368ee4ee03bfeba427f8f1cea9a080e0/32ac3/openwebuilogin.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 78.51851851851852%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAACB0lEQVR42oVU2W7iQBBE4r7MbQMLRmAMxg4iCogshwDBAwjxwv9/TGWqlSHGm00eStMz7qme6sOxYrEIDcMwkMlkEI/HkUwmxU6lUmJrpNNp+Z5IJGSfz+cR5oiFybLZLGazGa7XK7bbLabTKVarFTabDQ6Hg6zL5RL3+x3n8xmXywWDwQC5XE7ufxEWCnLI6I7j4Ha7YbfbYTweC8FiscB+vxcwyOl0wvF4lCC2bT8TFhRZpVJBz+6h2+3KKymHUmlzDcvWKdGSSVb8JHsQlstlBEEAb+LBKJVkT5SUzWBEtVoVhG2irPYlRVgKSyZprVbDaDSGp2ROJhOR66u12Wz+CMs0MZwv0O71UFAFiumC1Ot1cTCVQ7vVQotQe57/Bkv51tT6lMO3tzn+vr9j9voqcrMqV8xPtC2+Q175Fj79Hm1jWib6/YFUrdPtSIFsu4tOpwPLstBoNL4FX/hHdUZDqWG3PAh5iXlj24xGI7iuK7mk3W63v3Km/MJgivrBC5oq8BMh8xiFPmdatHRWPgpDfTeik8KnMxplcNVg9R1niMAPpFfDfhrip4uiCfkhLIOgTcIXGcG1GjNHEdZghoLqO7z/zyxrsOokksYtV6B7ld/0q3TjR1MUi7YALzKi53lwh65M0JAF8n34/kSKtVqv1XzPVa82//+3iZLSUSO654zr8+jdD0cPkQWTUrV7AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Open WebUI login page\"\n        title=\"\"\n        src=\"/static/368ee4ee03bfeba427f8f1cea9a080e0/302a4/openwebuilogin.png\"\n        srcset=\"/static/368ee4ee03bfeba427f8f1cea9a080e0/01bf6/openwebuilogin.png 270w,\n/static/368ee4ee03bfeba427f8f1cea9a080e0/07484/openwebuilogin.png 540w,\n/static/368ee4ee03bfeba427f8f1cea9a080e0/302a4/openwebuilogin.png 1080w,\n/static/368ee4ee03bfeba427f8f1cea9a080e0/32ac3/openwebuilogin.png 1249w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Click on sign up and add your user, don’t worry the password is only stored locally inside the docker container volume. Once you signed up, you will need to add the Ollama address in the settings:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/26b12b6d378269593fe0ceae46f386af/e1190/openwebuiollama.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAABR0lEQVR42q2TyW6DQBBE5wsidrOJzSwGjEEWueYUyYdw5P9/pUK1ReQslrCcQ8FAd9e8bgZlmiZ834dt2+CaMgxDtD5vla7rUEEQoO97pGkqpq7rwvM82YTrraLPbreDYuHxeES23yMMQwnkeY6iKCThKvdm/V2EiOMYwzBA0zSopmkwzzM+pgmXywXjOKKqKvB9UZayu+M4UnyPjh0RxLIsKG8h7E8naZkBisQ0Pp/PEuu6DofDQXKyLPsldsaupGVeSJQkieCThoVMoBjrTt11LEvxOt9brYSs/zIsl/Y4i7W9W63ka/s/xRzexZCJNCQ2C+4Nf4toqmhS1w2iKPqT7mFDzqBtWyH8N8O6rp8m5OhkhnKwl2PxDKFjOzBfNJi6AUWTZz6Is1CFWYzX+R1Rm0Pxh+YJp4j8qCzTgheHGKY3BGWCT95vbgT39NUgAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Adding Ollama URL in the Open WebUI settings\"\n        title=\"\"\n        src=\"/static/26b12b6d378269593fe0ceae46f386af/302a4/openwebuiollama.png\"\n        srcset=\"/static/26b12b6d378269593fe0ceae46f386af/01bf6/openwebuiollama.png 270w,\n/static/26b12b6d378269593fe0ceae46f386af/07484/openwebuiollama.png 540w,\n/static/26b12b6d378269593fe0ceae46f386af/302a4/openwebuiollama.png 1080w,\n/static/26b12b6d378269593fe0ceae46f386af/0d292/openwebuiollama.png 1620w,\n/static/26b12b6d378269593fe0ceae46f386af/b3608/openwebuiollama.png 2160w,\n/static/26b12b6d378269593fe0ceae46f386af/e1190/openwebuiollama.png 2203w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Click <strong>Save</strong> and you’re ready to select a model and start chatting.</p>\n<h2 id=\"-custom-model\" style=\"position:relative;\"><a href=\"#-custom-model\" aria-label=\" custom model permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🤖 Custom model</h2>\n<p>That got me through the initial setup and everything was great, but I still had the problem of how to prevent the model to give direct answers to my kid. Fortunately Open WebUI has the ability to create custom model files which basically allows you to set a system message for an existing model. This is exactly what I needed.</p>\n<p>Navigate to <strong>Workspace</strong> and select create a new model file, I named it Debra, and added the following custom prompt:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"43904237685403705000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`FROM llama3\r\nPARAMETER temperature 0\r\nSYSTEM &quot;&quot;&quot;\r\nYou are an AI assistant designed to help my daughter which is in high school learn and solve problems. You will guide her through the process of finding solutions, but you won’t provide direct answers. This is to ensure that she is actively learning and understanding the concepts. Remember, the goal is not just to get the right answer, but to understand how to arrive at that answer. I want her on this journey of learning together in a safe and supportive environment. \r\n&quot;&quot;&quot;`, `43904237685403705000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"txt\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-txt line-numbers\"><code class=\"language-txt\">FROM llama3\r\nPARAMETER temperature 0\r\nSYSTEM \"\"\"\r\nYou are an AI assistant designed to help my daughter which is in high school learn and solve problems. You will guide her through the process of finding solutions, but you won’t provide direct answers. This is to ensure that she is actively learning and understanding the concepts. Remember, the goal is not just to get the right answer, but to understand how to arrive at that answer. I want her on this journey of learning together in a safe and supportive environment. \r\n\"\"\"</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>I also checked the assistant and education boxes and saved my model.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/66f56828465d28441d6c66df1c46b7f1/87629/debra.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.33333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABjElEQVR42n2TWZKCYAyEOYTivoMbKAzulve/VsYvVlMMAz50hYT8WTvBarWyoihsMBhYv9//h16vZ6PRyPI8t9Pp5L6TycTtTb4BgeI4tuFw6EHbMJ1ObblcenAeN/lgD+bzuWVZZtvt1sIw9Cx1VO1NXfypkIxpmtrxeLT9fm+73c6SJPFvkoDD4WBRFLVWBujQK1wsFna/3w2JgR9NUAVtKCsk0Pl8ttls5g+puArZxuNxKetgSfiVLTPDy+XigZG3280lW0XSAf/w06blj45MktRbD0QJPVLQ6/XqEjweD9dlw0ffyDzP3vh5zz2xgHKpiEdAGUnwfD7LClkUnGU50AeJDuUYVxTF78VmHx6CKj3aKMH/brfrUkDvdDoG/UgQEB3K0LauoM7Hb9wTPksJPzNcr9e22WycgwAd0A6t4fPtinRJvhQqYnvQh/IxqhWgdmlLOqj7lDzkEl6vlw+f4DhwOSyIa+EhY0EnsWZJJ6IV7WpMHpBt8lPzY4tqV2eFztAVEF9tujrvX6yonnZe2dFXAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Adding a custom model file in Open WebUI\"\n        title=\"\"\n        src=\"/static/66f56828465d28441d6c66df1c46b7f1/302a4/debra.png\"\n        srcset=\"/static/66f56828465d28441d6c66df1c46b7f1/01bf6/debra.png 270w,\n/static/66f56828465d28441d6c66df1c46b7f1/07484/debra.png 540w,\n/static/66f56828465d28441d6c66df1c46b7f1/302a4/debra.png 1080w,\n/static/66f56828465d28441d6c66df1c46b7f1/0d292/debra.png 1620w,\n/static/66f56828465d28441d6c66df1c46b7f1/87629/debra.png 2076w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>And last we need to make sure her user can only use this model and can’t delete their chat history which can be done in the admin settings:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/c6063cefe87ddb1f2b5ddef872c725b3/b5c8e/lockuserdown.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.222222222222214%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABIklEQVR42pVSSW6EQBDjCUmAZh32HYFGMHMhpwiJYyR+kP9/wqkqCZREMNEcTNFN22UXrfmXC5IkQZGnUk3ThK7rO3j9HwzDgGVZUjXP91AUBYmlCKNIPlyoSRiGCIIAjuPAtu1T8HmlFBx656oxeRgGlGWBiEQiEm3bVvb6vt9JR2AB3/eR57nw2K1W1zXWdcWyLJjnGeM4ijOOz5WJj9yxIKfhKoIcqSzLvQOvb7c7pmlC13Xi4szh5nLjKUWCPEje/EmsqkoiV9QojmNxe4Ysy5CmqcxdHPLjb1fP8yhGINV13VNwzKZp0dDMKxqd/JQjwS3G5vwRZJ7EMV/omr2+HQs+A2XSlQnI6ccdXh79nuHTsCiJbsBNArx/fSK6VvgG5KMIFIS+eBgAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Locking user down to a custom model in Open WebUI\"\n        title=\"\"\n        src=\"/static/c6063cefe87ddb1f2b5ddef872c725b3/302a4/lockuserdown.png\"\n        srcset=\"/static/c6063cefe87ddb1f2b5ddef872c725b3/01bf6/lockuserdown.png 270w,\n/static/c6063cefe87ddb1f2b5ddef872c725b3/07484/lockuserdown.png 540w,\n/static/c6063cefe87ddb1f2b5ddef872c725b3/302a4/lockuserdown.png 1080w,\n/static/c6063cefe87ddb1f2b5ddef872c725b3/0d292/lockuserdown.png 1620w,\n/static/c6063cefe87ddb1f2b5ddef872c725b3/b3608/lockuserdown.png 2160w,\n/static/c6063cefe87ddb1f2b5ddef872c725b3/b5c8e/lockuserdown.png 2194w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>And we’re done. This gave my daughter a perfect tool which she can use with her homework without me worrying about how she uses AI for education purposes.</p>\n<h2 id=\"-summary\" style=\"position:relative;\"><a href=\"#-summary\" aria-label=\" summary permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>✍🏽 Summary</h2>\n<p>I hope you have enjoyed this guide and could setup your local LLM and use it to increase your productivity and others around you. Remember there are many more models you can leverage including CodeGemma and Phi3 from Microsoft. And last, you can use this with Semantic Kernel which is even cooler since I just finished my series on it.</p>","timeToRead":4,"frontmatter":{"title":"🥇 Run your generative AI model locally 🥇","unformattedDate":"2024-05-28T00:00:00.000Z","date":"May 28, 2024","path":"/local-llms/","author":"Yaser Adel Mehraban","tags":["AI","OpenAI","LLM","GenerativeAI"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEYklEQVR42kWUiVMaZxjG+Uvamc6kk54xbTQSqyYVvC3xqEfEmJp4BaOJxlStiRcCC6hcu4KySBXPIEaUjIgaYHc5PEBNjQderSZGa1pbrY6mI91Fne48s7uz+/72feb9vmdJUr61nosR4nnExWQ8i7DaKGGbQQ4KARb8hl/2HOKgnrfoaTFRbyHhF4iLQsRTz5mHiqtRZWO3QqxvqnM01lglbANiMoLc5xI2UQABHhHF2CnsIU8+iQqrTAa9UftspFOhfzFoam5QLy7PdLYPSjmEi1MYOIM9Zk4l42Mm7YpOY1V2tK2uufaPdhZX5uZWXj3VDJn6lmChDeQgJ05P4P9JEEAM3fO/2LaMvTODSmjW2OLsl7kGFCqAycyrmEY2TH0uKR/D23r8nsFSHopb6pQ7ncjraWSzr9dRICxndoieKGvLGoGckpI7NEZxWZVGpdG2zopZJinvDMYbQlwEBMwj2gUHsu40bxi0zrQsxlBn6+7mekHRj736PrVOR0++I3hSbe4/bQ5xiWnjbS1SrhUW2MdGcPLNFLJp6JkYHNCWxtMmelp/e7O4OOvsG+hvadaZNVNO9G2rdBK3SSwVTopYQ/zKfpnAhA24MMOifWQV0bns2MTS9OjLMeRgf2dmarJ7WMfhClWgTtM8Us/TQwAxZhJcN56XJYqixgdHJobH30yKz0pLe5ieXZxCZ7wYHh6zY9OTY273PwsbS2JYlpuU/ujWvdQIemEWKK8bI8lrR4seKAMpCZGxt7xDo8je4V+Rgz/3DfzgI59h/Yjbvbe3t/3+6M/55dlWXU9uak4lozSZkpQcVdgkniQ18G2csn4//5iokOSQgITAoLgLfhQvP+q5T7+RSuCDg+2/dt66j3eX1xaQOQeD8TDkQkzo19dvxRQrRE6SlG8RMIeuhaZGRaX6R0f7BIWTgyMCyLSPv/AruF/mdh8fHv7hdh8evT+wL0zCms5vL0VfOReWnlgBCx2n60yLzQsLpYd+l3KVGk2+RvPxDTvvFZAQm7n799bWu9fb6/OGrrb1rV/Hl1+m3Mi+/CH13g9cWOAggRyzQjhFi/nJm0yjUuN9qeEBfrQrvuFefhQKJcFoGOhog3tloLFH7Xbvo1O2x0y2//mwgkyJXDBOAgEMrjHUlFY8uJ0WFx176XKENznyolf4l96Uzy4GZVIjDE9b3MRx/G7vd1lrk0gp9/4kpIgBN+LTFrGsOrjn33HhWjdPxS7PfwxlJGZWPyrJvZ17k557/WpMfkae0/UKmcAgsYhfUDjczFQxc4QV6nqenUiVrMaiFbfrWVXl6ek3vqfHUZLSY7IzolNq7959VlWirrgPl+dX5BUoWVVmKWtVL0e7DMTeBlB8h2EggIo5lmYQ1ch0ugaVtl6uAmq7Ktl6HuDqadixd412yNQShbm9V9ekb+AjtVUE4gkGzwoR2UBFLEzEtomBMSl/VCG0N4P2nyF7o8CCxwavkfJsddW48P8BdpJHCED/A+l9zxoa9YoXAAAAAElFTkSuQmCC"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/c7740feca497412dc2f3947d9a263f5f/58e3d/ollama.png","srcSet":"/static/c7740feca497412dc2f3947d9a263f5f/fd23e/ollama.png 750w,\n/static/c7740feca497412dc2f3947d9a263f5f/58e3d/ollama.png 1024w","sizes":"(min-width: 1024px) 1024px, 100vw"},"sources":[{"srcSet":"/static/c7740feca497412dc2f3947d9a263f5f/cd166/ollama.webp 750w,\n/static/c7740feca497412dc2f3947d9a263f5f/402a0/ollama.webp 1024w","type":"image/webp","sizes":"(min-width: 1024px) 1024px, 100vw"}]},"width":1024,"height":1024}}}}}},{"node":{"id":"d15262d2-9cb7-58a5-afc0-409f3d9feaa9","html":"<p>In my previous posts, I introduced you to foundational concepts of <a href=\"https://learn.microsoft.com/en-us/semantic-kernel/overview/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Semantic Kernel</a>, offering a glimpse into its potential. Then I showed you how to leverage plugins to communicate to LLMs, and as promised in this part we would review planners and native function plugins to show <em>Semantic Kernel’s</em> full potential.</p>\n<!--more-->\n<p>Semantic Kernel Series:</p>\n<p>✔️ Part one: <a href=\"/blog/2024/04/30/semantic-kernel\">Intro</a>\r\n<br/>\r\n✔️ Part two: <a href=\"/blog/2024/05/13/semantic-kernel-plugins\">Plugins</a>\r\n<br/>\r\n✔️ Part three: <a href=\"/blog/2024/05/27/semantic-kernel-planners/\">Planners and Native Function plugins</a></p>\n<p><a href=\"https://github.com/yashints/semantic-kernel-devops\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">You can find the code on my GitHub repository here</a>.</p>\n<p>In out last two posts we successfully created some prompts for Azure DevOps and GitHub Action workflows and called Azure OpenAI to generate the YAML files and return the result. However, the result had multiple files separated by a special separator and that gives us a great opportunity to get into planners and native function plugins.</p>\n<h2 id=\"native-function-plugins\" style=\"position:relative;\"><a href=\"#native-function-plugins\" aria-label=\"native function plugins permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Native function plugins</h2>\n<p>Previously we learnt how to create a plugin from prompt directory which allowed us to invoke one based on user input to get the desired results. But you don’t always have to use the text based approach, any function can become a plugin if you use a special decorator from the Semantic Kernel library.</p>\n<p>The result we got from our Azure OpenAI model had multiple YAML files separated by a series of characters. Let’s create a plugin which gets that output and creates one file per workflow in a given directory. All we need is to use the <code class=\"language-text\">KernelFunction</code> attribute like following:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"53862969273819370000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`using Microsoft.SemanticKernel;\r\nusing System.ComponentModel;\r\n\r\nclass ExtrcatPipelineFromOutput\r\n  {\r\n    [KernelFunction, Description(@&quot;Saves a pipeline to a file. The pipeline is a YAML file.&quot;)]\r\n    public static bool Extract(string modelOutPut, string separator, string path)\r\n    {\r\n      Console.WriteLine(modelOutPut);\r\n      try\r\n      {\r\n        var chunks = modelOutPut.Split(separator);\r\n\r\n        for (int i = 0; i < chunks.Length; i++)\r\n        {\r\n          if (chunks[i].IndexOf(&quot;FILE: &quot;) >= 0)\r\n          {\r\n            var fileName = chunks[i].Split(&quot;FILE: &quot;)[1].TrimEnd('\\r', '\\n');\r\n            SaveFile.SaveContentToFile(chunks[i + 1], Path.Combine(path, fileName));\r\n            i++;\r\n          }\r\n        }\r\n\r\n        return true;\r\n      }\r\n      catch (Exception e)\r\n      {\r\n        Console.WriteLine(\\$&quot;Error saving the pipeline: {e.Message}&quot;);\r\n        return false;\r\n      }\r\n\r\n    }\r\n  }`, `53862969273819370000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token keyword\">using</span> <span class=\"token namespace\">Microsoft<span class=\"token punctuation\">.</span>SemanticKernel</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token keyword\">using</span> <span class=\"token namespace\">System<span class=\"token punctuation\">.</span>ComponentModel</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">ExtrcatPipelineFromOutput</span>\r\n  <span class=\"token punctuation\">{</span>\r\n    <span class=\"token punctuation\">[</span><span class=\"token attribute\"><span class=\"token class-name\">KernelFunction</span><span class=\"token punctuation\">,</span> <span class=\"token class-name\">Description</span><span class=\"token attribute-arguments\"><span class=\"token punctuation\">(</span><span class=\"token string\">@\"Saves a pipeline to a file. The pipeline is a YAML file.\"</span><span class=\"token punctuation\">)</span></span></span><span class=\"token punctuation\">]</span>\r\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">static</span> <span class=\"token return-type class-name\"><span class=\"token keyword\">bool</span></span> <span class=\"token function\">Extract</span><span class=\"token punctuation\">(</span><span class=\"token class-name\"><span class=\"token keyword\">string</span></span> modelOutPut<span class=\"token punctuation\">,</span> <span class=\"token class-name\"><span class=\"token keyword\">string</span></span> separator<span class=\"token punctuation\">,</span> <span class=\"token class-name\"><span class=\"token keyword\">string</span></span> path<span class=\"token punctuation\">)</span>\r\n    <span class=\"token punctuation\">{</span>\r\n      Console<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span>modelOutPut<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n      <span class=\"token keyword\">try</span>\r\n      <span class=\"token punctuation\">{</span>\r\n        <span class=\"token class-name\"><span class=\"token keyword\">var</span></span> chunks <span class=\"token operator\">=</span> modelOutPut<span class=\"token punctuation\">.</span><span class=\"token function\">Split</span><span class=\"token punctuation\">(</span>separator<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\"><span class=\"token keyword\">int</span></span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;</span> chunks<span class=\"token punctuation\">.</span>Length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span>\r\n        <span class=\"token punctuation\">{</span>\r\n          <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>chunks<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">IndexOf</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"FILE: \"</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">>=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span>\r\n          <span class=\"token punctuation\">{</span>\r\n            <span class=\"token class-name\"><span class=\"token keyword\">var</span></span> fileName <span class=\"token operator\">=</span> chunks<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">Split</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"FILE: \"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">TrimEnd</span><span class=\"token punctuation\">(</span><span class=\"token char\">'\\r'</span><span class=\"token punctuation\">,</span> <span class=\"token char\">'\\n'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n            SaveFile<span class=\"token punctuation\">.</span><span class=\"token function\">SaveContentToFile</span><span class=\"token punctuation\">(</span>chunks<span class=\"token punctuation\">[</span>i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> Path<span class=\"token punctuation\">.</span><span class=\"token function\">Combine</span><span class=\"token punctuation\">(</span>path<span class=\"token punctuation\">,</span> fileName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n            i<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\r\n          <span class=\"token punctuation\">}</span>\r\n        <span class=\"token punctuation\">}</span>\r\n\r\n        <span class=\"token keyword\">return</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\r\n      <span class=\"token punctuation\">}</span>\r\n      <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Exception</span> e<span class=\"token punctuation\">)</span>\r\n      <span class=\"token punctuation\">{</span>\r\n        Console<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">$\"Error saving the pipeline: </span><span class=\"token interpolation\"><span class=\"token punctuation\">{</span><span class=\"token expression language-csharp\">e<span class=\"token punctuation\">.</span>Message</span><span class=\"token punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n        <span class=\"token keyword\">return</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\r\n      <span class=\"token punctuation\">}</span>\r\n\r\n    <span class=\"token punctuation\">}</span>\r\n  <span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>It’s that easy to create a kernel function which then can be included in a plan by the kernel. Don’t worry about the <code class=\"language-text\">SaveFile</code> class for now, that just writes the content into a file in given path. You can look up the source for that in the GitHub repository.</p>\n<h2 id=\"planner\" style=\"position:relative;\"><a href=\"#planner\" aria-label=\"planner permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Planner</h2>\n<p>Now that we have our function ready, let’s go ahead and create our planner. You might be asking what is a planner anyway, which I will answer nothing special. It’s a function which takes user’s ask and returns a plan created using AI and any plugins or kernel functions which are registered to accomplish the ask.</p>\n<p>There are two types of planners you can use at the time of writing this post (this is in preview so anything can happen):</p>\n<ul>\n<li><strong>HandlebarsPlanner</strong>: It’s a sequential planner which is using the <a href=\"https://handlebarsjs.com/guide/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Handlebars’ syntax</a> to generate a plan using a single call to LLMs. This has multiple benefits such as the ability to inspect a plan before execution or the ability to save it and load it later to save costs. In addition to those, since it’s using Handlebars it can have <strong>loops</strong> and <strong>conditions</strong> in the plan as well.</li>\n<li><strong>FunctionCallingStepwisePlanner</strong>: This one has the ability to use the ReAct model which allows the AI to make a function call, reason over it and make another call if necessary.</li>\n</ul>\n<div class=\"custom-block info\"><div class=\"custom-block-body\"> <strong>Note:</strong> In addition to this, the feature is also baked into the model and is called automatic function calling which does not require a planner at all, more on this at the end.</div></div>\n<h3 id=\"creating-the-planner\" style=\"position:relative;\"><a href=\"#creating-the-planner\" aria-label=\"creating the planner permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Creating the planner</h3>\n<p>Let’s start by creating our planner and see how it will create a plan. We need a few things before we start:</p>\n<ul>\n<li>The directory which we need to save the pipelines into.</li>\n<li>The directory which we intend to save our plan into.</li>\n<li>The function which is going to be called (Azure DevOps or GitHub Actions).</li>\n<li>Adding the native function to our kernel as plugin.</li>\n<li>And finally the separator since our native function requires that to extract the pipelines from the output.</li>\n</ul>\n<p>First we can ready our directories from the <code class=\"language-text\">appsettings.json</code> file:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"51142243582955430000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`var planTemplatePath = Configuration!.GetValue<string>(&quot;PlanPath&quot;)!;\r\nvar pipelineDir = Configuration!.GetValue<string>(&quot;PipelineDir&quot;)!;`, `51142243582955430000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token class-name\"><span class=\"token keyword\">var</span></span> planTemplatePath <span class=\"token operator\">=</span> Configuration<span class=\"token operator\">!</span><span class=\"token punctuation\">.</span><span class=\"token generic-method\"><span class=\"token function\">GetValue</span><span class=\"token generic class-name\"><span class=\"token punctuation\">&lt;</span><span class=\"token keyword\">string</span><span class=\"token punctuation\">></span></span></span><span class=\"token punctuation\">(</span><span class=\"token string\">\"PlanPath\"</span><span class=\"token punctuation\">)</span><span class=\"token operator\">!</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> pipelineDir <span class=\"token operator\">=</span> Configuration<span class=\"token operator\">!</span><span class=\"token punctuation\">.</span><span class=\"token generic-method\"><span class=\"token function\">GetValue</span><span class=\"token generic class-name\"><span class=\"token punctuation\">&lt;</span><span class=\"token keyword\">string</span><span class=\"token punctuation\">></span></span></span><span class=\"token punctuation\">(</span><span class=\"token string\">\"PipelineDir\"</span><span class=\"token punctuation\">)</span><span class=\"token operator\">!</span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p>Next let’s add our function to our kernel:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"65203901281930764000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`kernel.ImportPluginFromType<ExtrcatPipelineFromOutput>();`, `65203901281930764000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\">kernel<span class=\"token punctuation\">.</span><span class=\"token generic-method\"><span class=\"token function\">ImportPluginFromType</span><span class=\"token generic class-name\"><span class=\"token punctuation\">&lt;</span>ExtrcatPipelineFromOutput<span class=\"token punctuation\">></span></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>Since our planner will have to pass parameters to prompts and plugins, we need to create a <code class=\"language-text\">KernelArguments</code> object:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"69474108044605690000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`var initialArguments = new KernelArguments()\r\n{\r\n  { &quot;input&quot;, description },\r\n  { &quot;path&quot;, pipelineDir },\r\n  { &quot;function&quot;, function },\r\n  { &quot;separator&quot;, kernelSettings.Separator }\r\n};`, `69474108044605690000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token class-name\"><span class=\"token keyword\">var</span></span> initialArguments <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token constructor-invocation class-name\">KernelArguments</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token punctuation\">{</span>\r\n  <span class=\"token punctuation\">{</span> <span class=\"token string\">\"input\"</span><span class=\"token punctuation\">,</span> description <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token punctuation\">{</span> <span class=\"token string\">\"path\"</span><span class=\"token punctuation\">,</span> pipelineDir <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token punctuation\">{</span> <span class=\"token string\">\"function\"</span><span class=\"token punctuation\">,</span> function <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token punctuation\">{</span> <span class=\"token string\">\"separator\"</span><span class=\"token punctuation\">,</span> kernelSettings<span class=\"token punctuation\">.</span>Separator <span class=\"token punctuation\">}</span>\r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>Next we will create our planner and ask:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"77107010144817700000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`var planner = new HandlebarsPlanner(new HandlebarsPlannerOptions() { AllowLoops = true });\r\nstring ask = @\\$&quot;Given the provided function use the proper prompt to generate the output\r\n          with provided input, then save them in the provided directory \\${pipelineDir}&quot;;`, `77107010144817700000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token class-name\"><span class=\"token keyword\">var</span></span> planner <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token constructor-invocation class-name\">HandlebarsPlanner</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token constructor-invocation class-name\">HandlebarsPlannerOptions</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> AllowLoops <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">string</span></span> ask <span class=\"token operator\">=</span> <span class=\"token interpolation-string\"><span class=\"token string\">@$\"Given the provided function use the proper prompt to generate the output\r\n          with provided input, then save them in the provided directory $</span><span class=\"token interpolation\"><span class=\"token punctuation\">{</span><span class=\"token expression language-csharp\">pipelineDir</span><span class=\"token punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<p>As for our plan, and to save some cost, we can check if our plan is previously created or not, if it is, we will load it from a file, if not we will create it and then save it to the file:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"97863919204695520000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`string planTemplate = &quot;&quot;;\r\nHandlebarsPlan plan;\r\nif (File.Exists(planTemplatePath))\r\n{\r\n  planTemplate = await File.ReadAllTextAsync(planTemplatePath);\r\n  plan = new HandlebarsPlan(planTemplate);\r\n}\r\nelse\r\n{\r\n  plan = await planner.CreatePlanAsync(kernel, ask, initialArguments);\r\n  Console.WriteLine(plan.ToString());\r\n  SaveFile.SaveContentToFile(plan.ToString(), planTemplatePath);\r\n}`, `97863919204695520000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token class-name\"><span class=\"token keyword\">string</span></span> planTemplate <span class=\"token operator\">=</span> <span class=\"token string\">\"\"</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token class-name\">HandlebarsPlan</span> plan<span class=\"token punctuation\">;</span>\r\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>File<span class=\"token punctuation\">.</span><span class=\"token function\">Exists</span><span class=\"token punctuation\">(</span>planTemplatePath<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token punctuation\">{</span>\r\n  planTemplate <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> File<span class=\"token punctuation\">.</span><span class=\"token function\">ReadAllTextAsync</span><span class=\"token punctuation\">(</span>planTemplatePath<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n  plan <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token constructor-invocation class-name\">HandlebarsPlan</span><span class=\"token punctuation\">(</span>planTemplate<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token punctuation\">}</span>\r\n<span class=\"token keyword\">else</span>\r\n<span class=\"token punctuation\">{</span>\r\n  plan <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> planner<span class=\"token punctuation\">.</span><span class=\"token function\">CreatePlanAsync</span><span class=\"token punctuation\">(</span>kernel<span class=\"token punctuation\">,</span> ask<span class=\"token punctuation\">,</span> initialArguments<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n  Console<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span>plan<span class=\"token punctuation\">.</span><span class=\"token function\">ToString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n  SaveFile<span class=\"token punctuation\">.</span><span class=\"token function\">SaveContentToFile</span><span class=\"token punctuation\">(</span>plan<span class=\"token punctuation\">.</span><span class=\"token function\">ToString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> planTemplatePath<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>If we print our plan, it might look like this:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"85128306132071940000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`{{!-- Step 1: Call the chosen function with input and assign the result to a new variable &quot;result&quot; --}}\r\n{{set 'result' (DevOps-GitHubActions input=@root.input)}}\r\n\r\n{{!-- Step 2: Call the ExtractPipelineFromOutput-Extract helper with the necessary parameters to save the pipeline to a file --}}\r\n{{#if (ExtrcatPipelineFromOutput-Extract modelOutPut=result separator=@root.separator path=@root.path)}}\r\n    {{json &quot;The pipeline has been successfully saved!&quot;}}\r\n{{else}}\r\n    {{json &quot;The pipeline could not be saved.&quot;}}\r\n{{/if}}`, `85128306132071940000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"handlebars\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-handlebars line-numbers\"><code class=\"language-handlebars\"><span class=\"token handlebars language-handlebars\"><span class=\"token comment\">{{!-- Step 1: Call the chosen function with input and assign the result to a new variable \"result\" --}}</span></span>\r\n<span class=\"token handlebars language-handlebars\"><span class=\"token delimiter punctuation\">{{</span><span class=\"token variable\">set</span> <span class=\"token string\">'result'</span> <span class=\"token punctuation\">(</span><span class=\"token variable\">DevOps-GitHubActions</span> <span class=\"token variable\">input</span><span class=\"token punctuation\">=</span><span class=\"token punctuation\">@</span><span class=\"token variable\">root</span><span class=\"token punctuation\">.</span><span class=\"token variable\">input</span><span class=\"token punctuation\">)</span><span class=\"token delimiter punctuation\">}}</span></span>\r\n\r\n<span class=\"token handlebars language-handlebars\"><span class=\"token comment\">{{!-- Step 2: Call the ExtractPipelineFromOutput-Extract helper with the necessary parameters to save the pipeline to a file --}}</span></span>\r\n<span class=\"token handlebars language-handlebars\"><span class=\"token delimiter punctuation\">{{</span><span class=\"token block keyword\">#if</span> <span class=\"token punctuation\">(</span><span class=\"token variable\">ExtrcatPipelineFromOutput-Extract</span> <span class=\"token variable\">modelOutPut</span><span class=\"token punctuation\">=</span><span class=\"token variable\">result</span> <span class=\"token variable\">separator</span><span class=\"token punctuation\">=</span><span class=\"token punctuation\">@</span><span class=\"token variable\">root</span><span class=\"token punctuation\">.</span><span class=\"token variable\">separator</span> <span class=\"token variable\">path</span><span class=\"token punctuation\">=</span><span class=\"token punctuation\">@</span><span class=\"token variable\">root</span><span class=\"token punctuation\">.</span><span class=\"token variable\">path</span><span class=\"token punctuation\">)</span><span class=\"token delimiter punctuation\">}}</span></span>\r\n    <span class=\"token handlebars language-handlebars\"><span class=\"token delimiter punctuation\">{{</span><span class=\"token variable\">json</span> <span class=\"token string\">\"The pipeline has been successfully saved!\"</span><span class=\"token delimiter punctuation\">}}</span></span>\r\n<span class=\"token handlebars language-handlebars\"><span class=\"token delimiter punctuation\">{{</span><span class=\"token variable\">else</span><span class=\"token delimiter punctuation\">}}</span></span>\r\n    <span class=\"token handlebars language-handlebars\"><span class=\"token delimiter punctuation\">{{</span><span class=\"token variable\">json</span> <span class=\"token string\">\"The pipeline could not be saved.\"</span><span class=\"token delimiter punctuation\">}}</span></span>\r\n<span class=\"token handlebars language-handlebars\"><span class=\"token delimiter punctuation\">{{</span><span class=\"token block keyword\">/if</span><span class=\"token delimiter punctuation\">}}</span></span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>And last we invoke our plan and see the results:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"30306249062442370000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`var result = await plan.InvokeAsync(kernel, initialArguments);\r\nConsole.WriteLine(result);`, `30306249062442370000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token class-name\"><span class=\"token keyword\">var</span></span> result <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> plan<span class=\"token punctuation\">.</span><span class=\"token function\">InvokeAsync</span><span class=\"token punctuation\">(</span>kernel<span class=\"token punctuation\">,</span> initialArguments<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\nConsole<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p>We should see our pipelines getting created in the desired directory.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 706px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/60e159594bb7667db95c95b6984c22a6/9f21b/pipelines.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 24.074074074074073%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAy0lEQVR42o3Qy26DMBCFYZ6i4HAzMYZCwOBALi6govb9n+mv20WlLhJ18enMbI40E+im577uLNsHUtWIWHJIi7+Sf0iPPiVBoTVqbKmmDm1aRJIRhjGRSH6JOH0oOiTEuSRTyqcmsNPGedu4fu7M+zuDc35fscsbw90x3BxNPz3VmhlzcaiqJTg1hm4yjMvZF1j664BdZ0ZnMbeR07lHleVTZaV9cUue5wQyUxR14c+tKfuKstPUtvnxPRevR/+C8LGXECEEqfTnRxFf1wiPOJcYzwkAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"GitHub Actions workflows being created by the planner\"\n        title=\"\"\n        src=\"/static/60e159594bb7667db95c95b6984c22a6/9f21b/pipelines.png\"\n        srcset=\"/static/60e159594bb7667db95c95b6984c22a6/01bf6/pipelines.png 270w,\n/static/60e159594bb7667db95c95b6984c22a6/07484/pipelines.png 540w,\n/static/60e159594bb7667db95c95b6984c22a6/9f21b/pipelines.png 706w\"\n        sizes=\"(max-width: 706px) 100vw, 706px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"automatic-function-calling\" style=\"position:relative;\"><a href=\"#automatic-function-calling\" aria-label=\"automatic function calling permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Automatic function calling</h2>\n<p>As mentioned before you can enable automatic function calling similar to **** and not use a planner, all you need is to pass in an execution settings object to the <em>OpenAI</em>:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"29208455921326860000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`// Enable auto function calling\r\nOpenAIPromptExecutionSettings openAIPromptExecutionSettings = new()\r\n{\r\n    ToolCallBehavior = ToolCallBehavior.AutoInvokeKernelFunctions\r\n};\r\nvar result = chatCompletionService.GetStreamingChatMessageContentsAsync(\r\n                        history,\r\n                        executionSettings: openAIPromptExecutionSettings,\r\n                        kernel: kernel);`, `29208455921326860000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token comment\">// Enable auto function calling</span>\r\n<span class=\"token class-name\">OpenAIPromptExecutionSettings</span> openAIPromptExecutionSettings <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token punctuation\">{</span>\r\n    ToolCallBehavior <span class=\"token operator\">=</span> ToolCallBehavior<span class=\"token punctuation\">.</span>AutoInvokeKernelFunctions\r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> result <span class=\"token operator\">=</span> chatCompletionService<span class=\"token punctuation\">.</span><span class=\"token function\">GetStreamingChatMessageContentsAsync</span><span class=\"token punctuation\">(</span>\r\n                        history<span class=\"token punctuation\">,</span>\r\n                        <span class=\"token named-parameter punctuation\">executionSettings</span><span class=\"token punctuation\">:</span> openAIPromptExecutionSettings<span class=\"token punctuation\">,</span>\r\n                        <span class=\"token named-parameter punctuation\">kernel</span><span class=\"token punctuation\">:</span> kernel<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>For more information on how to use this approach use the <a href=\"https://learn.microsoft.com/en-us/semantic-kernel/agents/plugins/using-the-kernelfunction-decorator?tabs=Csharp\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">documentation on Microsoft Learn</a>.</p>\n<h2 id=\"summary\" style=\"position:relative;\"><a href=\"#summary\" aria-label=\"summary permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Summary</h2>\n<p>It’s been such a fun journey learning about Semantic Kernel and it’s features and I hope you have enjoyed following along. Stay tuned for more AI content soon with a very exciting post on how to have your very own private and free setup and call it from your application.</p>","timeToRead":5,"frontmatter":{"title":"Semantic kernel series - Last part - Planners","unformattedDate":"2024-05-27T00:00:00.000Z","date":"May 27, 2024","path":"/semantic-kernel-planners/","author":"Yaser Adel Mehraban","tags":["semantickernel","AI","OpenAi","plugins"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABYlAAAWJQFJUiTwAAABJ0lEQVR42iWQzUpCURSFfYagN+kBGjWtkYNmRbMaBeEsUghBCBpYWUk0CEuqQYFFNLjWoMzQFBKDUhRCr/eec+5RtD+Mr3NpstkL9vpYawdUR9Ev9tG5LsPyD1/3ebSVYXBzzW52jZAVYiW7zMZenOR6gmQ8SSyT5+mxSeNin5x1ynlBUXq16XqSgGp5DM+G6IM+V7E67k6K30SE7+1VwuklxtPzjG6NMLkwQ3A6ytREkLHIESfHFSrRWdKbi1jVAQ/VNtoHCiHxpKRtK+Yih+TKb1wWBC9Nh6ateW58IIVDo9WjUPuk3ZEIpYxHIVwbRyjq74KOK1GGE5BmSOUfCTzdxXFdwqk7bks1Bj1ttINW2tQxr9HCpPDw1L9Hml0ZuJ9M+VpK/gD4TA8f0CnYjwAAAABJRU5ErkJggg=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/2f70a5229d7587e540a083b90b8c558b/04277/planner.png","srcSet":"/static/2f70a5229d7587e540a083b90b8c558b/35840/planner.png 750w,\n/static/2f70a5229d7587e540a083b90b8c558b/2f636/planner.png 1080w,\n/static/2f70a5229d7587e540a083b90b8c558b/24e91/planner.png 1366w,\n/static/2f70a5229d7587e540a083b90b8c558b/149b3/planner.png 1920w,\n/static/2f70a5229d7587e540a083b90b8c558b/04277/planner.png 1954w","sizes":"(min-width: 1954px) 1954px, 100vw"},"sources":[{"srcSet":"/static/2f70a5229d7587e540a083b90b8c558b/35743/planner.webp 750w,\n/static/2f70a5229d7587e540a083b90b8c558b/0af22/planner.webp 1080w,\n/static/2f70a5229d7587e540a083b90b8c558b/471e5/planner.webp 1366w,\n/static/2f70a5229d7587e540a083b90b8c558b/f057b/planner.webp 1920w,\n/static/2f70a5229d7587e540a083b90b8c558b/1b93c/planner.webp 1954w","type":"image/webp","sizes":"(min-width: 1954px) 1954px, 100vw"}]},"width":1954,"height":439}}}}}},{"node":{"id":"e7551125-3b7a-5371-aecb-3b3c784f7b6f","html":"<p>In my previous post, I introduced you to foundational concepts of <a href=\"https://learn.microsoft.com/en-us/semantic-kernel/overview/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Semantic Kernel</a>, offering a glimpse into its potential. Now, when I was learning about the what and the why, that wasn’t enough for me to fully understand the concepts and that’s why I started writing these series.</p>\n<!--more-->\n<p>Semantic Kernel Series:</p>\n<p>✔️ Part one: <a href=\"/blog/2024/04/30/semantic-kernel\">Intro</a>\r\n<br/>\r\n✔️ Part two: <a href=\"/blog/2024/05/13/semantic-kernel-plugins\">Plugins</a>\r\n<br/>\r\n✔️ Part three: <a href=\"/blog/2024/05/27/semantic-kernel-planners/\">Planners and Native Function plugins</a></p>\n<p><a href=\"https://github.com/yashints/semantic-kernel-devops\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">You can find the code on my GitHub repository here</a>.</p>\n<p>In order for us to learn about the concepts, the best way is with a story, and I chose DevOps because I was interested in finding better ways to automate daily tasks in that space for my course. Let’s go through the context and see what we’re trying to achieve.</p>\n<h2 id=\"context\" style=\"position:relative;\"><a href=\"#context\" aria-label=\"context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Context</h2>\n<p>I want to use Semantic Kernel to generate Azure DevOps pipelines/GitHub Actions workflow for my application with simple and details instructions (aka prompts). Now the application might have multiple tiers and each might have dependency with one another and I wanted to see how this will work out.</p>\n<p>The first thing we need after we have our starter project (<a href=\"../04/semantic-kernel.md\">use my previous post to create yours</a>), is to define our prompts. I want to use plugins at this point since it is very easy with them to get my prompts introduced to the kernel and execute them based on different inputs.</p>\n<h2 id=\"setup\" style=\"position:relative;\"><a href=\"#setup\" aria-label=\"setup permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setup</h2>\n<p>Here is what we need to get the whole setup working:</p>\n<ul>\n<li>An instance of the kernel.</li>\n<li>An instance of the Azure OpenAI or OpenAI to setup the kernel with.</li>\n<li>A plugin with different functions for Azure DevOps and GitHub Actions.</li>\n<li>Input from the user describing the application and its structure.</li>\n</ul>\n<h2 id=\"prompts\" style=\"position:relative;\"><a href=\"#prompts\" aria-label=\"prompts permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Prompts</h2>\n<p>As I mentioned we would use plugins and their functions to be able to get our input passed to our Azure OpenAI service via the kernel. Technically we could add these as inline code and it works perfectly, however, that would mean we have to define these one by one and it just blows our code base. A much better way is to use the built in feature of the kernel which allows us to load multiple plugins with their functions from a directory.</p>\n<p>All you need is a folder which contains all your plugins, and for each plugin, a subdirectory per function. Every function which is mapped to our prompts will need two files:</p>\n<ul>\n<li><code class=\"language-text\">config.json</code> which contains a description, type, and the parameters for completion or chat depending on what you intend to use.</li>\n<li><code class=\"language-text\">skprompt.txt</code> which has the prompt in natural language.</li>\n</ul>\n<h2 id=\"plugin-setup\" style=\"position:relative;\"><a href=\"#plugin-setup\" aria-label=\"plugin setup permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Plugin setup</h2>\n<p>Let’s set our plugin and its function up. As mentioned we intend to generate either an Azure DevOps Pipeline, or GitHub Actions workflow, so one plugin and two function will do the job. Our directory structure will look like this:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 307px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/40f98b10d1028af20e1bdfed583f50b2/4651d/dir.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 112.59259259259258%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAABYlAAAWJQFJUiTwAAADvUlEQVR42oVV2XIaSRDUD0ggBmaY4RhOcd83SAQgDEjcQhgk79OGI/T/X5Cb1SDCrLD90HTR011dWVWZfaXrOjweDwzDULPb7Ybb44ZHZg5Zkz2apsHlcqk1sWWILd+8Xu9pXMXicaSSSQRtG9lcDrVaBclUCqVyBdlMFqlUEpFoFPf3D2g2m8hkMmh3OmjRzuXyCIfDKpgzh+lkArlSBYvZDIvFDP/+/In92zsG/SHGwwESd3cYDr9hvV5jNp9hMBhg87LB+/s/KObzCoVpmgeH4l3CNy0LpuGF0+lEIBhQG5y3tyfYkgaBrB3/+3w+5UDXjXPI4tC2Q4gzUr8/gDxvTCYSqBBykqmIRCIoFIvIpNO0o7CDwTMHn5GdHEpSQ+EIqpUKQqEQ1oSyIbTp8zN2uz2WiyWenib4vt9js9mgmMuqKP/v6ORQfiTKW5dUTcI3EWQUPr8fFg/JN4vpEAQ2C2easl+/6Ew5lA0ej4Fs1o9220YgYPKQRfh+VflSqaRsn+VTlwQCAcK2/+xQ0wy2hI3VKoq7hI2Hbg+jpymmE0LdfcfmdYvhoI/J5ImwX1n9Pp0GoBvGZcheVtfn47A8alH6LhqLqQIIzGazhVqlqmDHuC4RW5Z51n/nDr2GgplKZeBnOxxawTwxQdrKw7bR3Nohp7/k9oJDEzr7KhJL4OPjA9FoCOPRGG+7HWas8GO/h9V6hdFkhuWUYzlH//ERL4ReLuXVpb9W/OrUT7xNaCR2NptFo15Ho9HEHWEWiwVE4gk8kHI5tk2a9MtzLRoJf4F9cijQJMnCAO0oDBqZcUu2CEPku8PhUPCFTTc3DvXtC2TZGIvFGU1DsWK+XLOZ59jvtxiNR2zuN8wXK6xXC/J5iNftFr3HISajEavd+9KTKkJJbjBoq8LkC0XSroxCIU87j263SwWqo0i7Wq2iVq+hUq2hXCyhQnaZXuMyUyyLnA6a1EGN0JxwEp7MMm5oC2yBfH19rWbXURP/2tixOAWiUGIkDaV5a1a4wbnEItRZKNFCidR/VJvfUi+d8fOAn0IRIAXvVZ66PNxjnvbvPxRrRAefKRpN5jtEphiG93eNfdA1wzg0qlTRoSA7VDXVM8Dky7pAlllS4NH1yw4PEhYlvCUlLEhINUr+PZ+BMpuXySdEKYQIRbvdol1hGlpIpxIHtf5aFJ1VDmHEVgiRu31C25IJq/ULOq0mZrMpWp0etqsVxuNv6PB9mc7nyGVTZ/J/Btl7fPXE/twknP189T5lX+zDC+m+KA7/AWutkDO1c7y9AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Prompt directory structure\"\n        title=\"\"\n        src=\"/static/40f98b10d1028af20e1bdfed583f50b2/4651d/dir.png\"\n        srcset=\"/static/40f98b10d1028af20e1bdfed583f50b2/01bf6/dir.png 270w,\n/static/40f98b10d1028af20e1bdfed583f50b2/4651d/dir.png 307w\"\n        sizes=\"(max-width: 307px) 100vw, 307px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p><em>DevOps</em> is the name of our plugin, and <em>AzDevOps</em> and <em>GitHubActions</em> are our function names.</p>\n<h2 id=\"prompt-text\" style=\"position:relative;\"><a href=\"#prompt-text\" aria-label=\"prompt text permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Prompt text</h2>\n<p>You can write your prompts however you like, just make sure you follow the principles of <a href=\"https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/prompt-engineering\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">prompt engineering</a> which in short is all about the details and be as specific as you can.</p>\n<p>Here is how mine looks like for GitHub Actions:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"87938588507227000000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`INSTRUCTIONS:\r\n\r\nGenerate workflow YAML files to deploy an application to Azure from GitHub Actions.\r\n\r\nRULES:\r\n\r\n- All YAML files must be complete\r\n- YAML files must be listed one by one\r\n- Every file is indicated with &quot;FILE:&quot; followed by it's path\r\n- Every file content must begin and end with #-----#\r\n- All pipelines should use either GitHub hosted runners with latest ubuntu version.\r\n- All YAML files should contain two stages for build and deploy where deploy depends on build\r\n\r\nDESCRIPTION:{{\\$input}}`, `87938588507227000000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"txt\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-txt line-numbers\"><code class=\"language-txt\">INSTRUCTIONS:\r\n\r\nGenerate workflow YAML files to deploy an application to Azure from GitHub Actions.\r\n\r\nRULES:\r\n\r\n- All YAML files must be complete\r\n- YAML files must be listed one by one\r\n- Every file is indicated with \"FILE:\" followed by it's path\r\n- Every file content must begin and end with #-----#\r\n- All pipelines should use either GitHub hosted runners with latest ubuntu version.\r\n- All YAML files should contain two stages for build and deploy where deploy depends on build\r\n\r\nDESCRIPTION:{{$input}}</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>The details of how the workflow is going to be generated is outlined in details and at the end I have left a placeholder for a variable called <code class=\"language-text\">$input</code> which will be passed by the user to the kernel later.</p>\n<p>And here is what the <code class=\"language-text\">config.json</code> looks like for this prompt:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"88941871565608420000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`{\r\n  &quot;schema&quot;: 1,\r\n  &quot;description&quot;: &quot;Create pipeline YAML files for GitHub Actions&quot;,\r\n  &quot;type&quot;: &quot;completion&quot;,\r\n  &quot;completion&quot;: {\r\n    &quot;max_tokens&quot;: 1000,\r\n    &quot;temperature&quot;: 0.5,\r\n    &quot;top_p&quot;: 0,\r\n    &quot;presence_penalty&quot;: 0,\r\n    &quot;frequency_penalty&quot;: 0\r\n  },\r\n  &quot;input&quot;: {\r\n    &quot;parameters&quot;: [\r\n      {\r\n        &quot;name&quot;: &quot;input&quot;,\r\n        &quot;description&quot;: &quot;The description of the deployment to be be created&quot;,\r\n        &quot;defaultValue&quot;: &quot;&quot;\r\n      }\r\n    ]\r\n  }\r\n}`, `88941871565608420000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-json line-numbers\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\r\n  <span class=\"token property\">\"schema\"</span><span class=\"token operator\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"description\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Create pipeline YAML files for GitHub Actions\"</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"completion\"</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"completion\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\r\n    <span class=\"token property\">\"max_tokens\"</span><span class=\"token operator\">:</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"temperature\"</span><span class=\"token operator\">:</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"top_p\"</span><span class=\"token operator\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"presence_penalty\"</span><span class=\"token operator\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\r\n    <span class=\"token property\">\"frequency_penalty\"</span><span class=\"token operator\">:</span> <span class=\"token number\">0</span>\r\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n  <span class=\"token property\">\"input\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\r\n    <span class=\"token property\">\"parameters\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\r\n      <span class=\"token punctuation\">{</span>\r\n        <span class=\"token property\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"input\"</span><span class=\"token punctuation\">,</span>\r\n        <span class=\"token property\">\"description\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"The description of the deployment to be be created\"</span><span class=\"token punctuation\">,</span>\r\n        <span class=\"token property\">\"defaultValue\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"\"</span>\r\n      <span class=\"token punctuation\">}</span>\r\n    <span class=\"token punctuation\">]</span>\r\n  <span class=\"token punctuation\">}</span>\r\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>You don’t need to know the details of the parameters for now, all that is important is the definition of the input parameter and the fact that we intend to use the completion feature of Azure OpenAI.</p>\n<h2 id=\"input\" style=\"position:relative;\"><a href=\"#input\" aria-label=\"input permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Input</h2>\n<p>For our inputs, I also would like to use files, but you don’t have to follow this convention, this just keeps the code clean and short so it’s more understandable for me and other beginners learning the concepts.</p>\n<p>I have created a folder called desc which includes two files one for an application written with <code class=\"language-text\">.Net 8</code> and one for a <code class=\"language-text\">node</code> based application.</p>\n<p>Here is the content of the <code class=\"language-text\">node</code> based input file:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"58426482567665050000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`This is an application written in NodeJs and has below components:\r\n\r\n- A front end app which is written in React and uses create-react-app starter. This will be hosted in an Azure Static Web App and is stored in the \\`frontend\\` directory.\r\n- A backend API which is going to be hosted in an Azure Function as the backend for the static web app in the \\`api\\` directory.\r\n- The API uses a Cosmos DB database as its datastore.`, `58426482567665050000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"txt\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-txt line-numbers\"><code class=\"language-txt\">This is an application written in NodeJs and has below components:\r\n\r\n- A front end app which is written in React and uses create-react-app starter. This will be hosted in an Azure Static Web App and is stored in the `frontend` directory.\r\n- A backend API which is going to be hosted in an Azure Function as the backend for the static web app in the `api` directory.\r\n- The API uses a Cosmos DB database as its datastore.</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<h2 id=\"setting-up-the-kernel\" style=\"position:relative;\"><a href=\"#setting-up-the-kernel\" aria-label=\"setting up the kernel permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setting up the kernel</h2>\n<p>In order to setup the kernel we need a few things:</p>\n<ul>\n<li>The information about the Azure OpenAI service like endpoint, key and model number.</li>\n<li>A way for the user to specify which input and prompt to use.</li>\n<li>Setting up the kernel so it knows about our Azure OpenAI service and our plugin directory.</li>\n<li>Calling the kernel and getting the result.</li>\n</ul>\n<p>We already covered how to setup the Azure OpenAI part with the kernel in our first post, here I just show you how to load the plugins from the directory:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"2496903402599359500\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`//reading the name of the plugin directory from our configuration\r\nvar pluginDirectories = Configuration!.GetSection(&quot;PluginSettings:Root&quot;).Get<string>();\r\n\r\n// loading the plugins from the plugin directory\r\nvar skillImport = kernel.ImportPluginFromPromptDirectory(pluginDirectories!);\r\n\r\n// read user's task description from given file\r\nstring description = await File.ReadAllTextAsync(file.FullName!);\r\n\r\n// this is a data structure that holds temporary data while the kernel task runs\r\nvar context = new KernelArguments();\r\n\r\n// associate user's description with &quot;input&quot; variable\r\nstring key = &quot;input&quot;;\r\ncontext.Add(key, description);\r\n\r\n// call the kernel and tell it which plugin function to call and pass to the LLM\r\nvar result = await kernel.InvokeAsync(skillImport[function], context);\r\nConsole.WriteLine(result.GetValue<string>());`, `2496903402599359500`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token comment\">//reading the name of the plugin directory from our configuration</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> pluginDirectories <span class=\"token operator\">=</span> Configuration<span class=\"token operator\">!</span><span class=\"token punctuation\">.</span><span class=\"token function\">GetSection</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"PluginSettings:Root\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token generic-method\"><span class=\"token function\">Get</span><span class=\"token generic class-name\"><span class=\"token punctuation\">&lt;</span><span class=\"token keyword\">string</span><span class=\"token punctuation\">></span></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">// loading the plugins from the plugin directory</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> skillImport <span class=\"token operator\">=</span> kernel<span class=\"token punctuation\">.</span><span class=\"token function\">ImportPluginFromPromptDirectory</span><span class=\"token punctuation\">(</span>pluginDirectories<span class=\"token operator\">!</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">// read user's task description from given file</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">string</span></span> description <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> File<span class=\"token punctuation\">.</span><span class=\"token function\">ReadAllTextAsync</span><span class=\"token punctuation\">(</span>file<span class=\"token punctuation\">.</span>FullName<span class=\"token operator\">!</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">// this is a data structure that holds temporary data while the kernel task runs</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> context <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token constructor-invocation class-name\">KernelArguments</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">// associate user's description with \"input\" variable</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">string</span></span> key <span class=\"token operator\">=</span> <span class=\"token string\">\"input\"</span><span class=\"token punctuation\">;</span>\r\ncontext<span class=\"token punctuation\">.</span><span class=\"token function\">Add</span><span class=\"token punctuation\">(</span>key<span class=\"token punctuation\">,</span> description<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">// call the kernel and tell it which plugin function to call and pass to the LLM</span>\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> result <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> kernel<span class=\"token punctuation\">.</span><span class=\"token function\">InvokeAsync</span><span class=\"token punctuation\">(</span>skillImport<span class=\"token punctuation\">[</span>function<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> context<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\nConsole<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">.</span><span class=\"token generic-method\"><span class=\"token function\">GetValue</span><span class=\"token generic class-name\"><span class=\"token punctuation\">&lt;</span><span class=\"token keyword\">string</span><span class=\"token punctuation\">></span></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<h2 id=\"output\" style=\"position:relative;\"><a href=\"#output\" aria-label=\"output permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Output</h2>\n<p>You can find the <a href=\"https://github.com/yashints/semantic-kernel-devops\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">full code for this post here</a>. Simply clone the code, build and run it passing the required information like so:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"78469817111826860000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`git clone https://github.com/yashints/semantic-kernel-devops.git\r\n\r\ncd semantic-kernel-devops\r\n\r\ndotnet restore\r\n\r\ndotnet build\r\n\r\ndotnet run -- -i .\\desc\\dotnet.txt -f GitHubActions`, `78469817111826860000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token function\">git</span> clone https://github.com/yashints/semantic-kernel-devops.git\r\n\r\n<span class=\"token builtin class-name\">cd</span> semantic-kernel-devops\r\n\r\ndotnet restore\r\n\r\ndotnet build\r\n\r\ndotnet run -- <span class=\"token parameter variable\">-i</span> .<span class=\"token punctuation\">\\</span>desc<span class=\"token punctuation\">\\</span>dotnet.txt <span class=\"token parameter variable\">-f</span> GitHubActions</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>I am passing the <code class=\"language-text\">.Net</code> application prompt and tell the kernel to create a GitHub Actions workflow.</p>\n<p>The result will look like this:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"94530943011715860000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`FILE: .github/workflows/dotnet.yml\r\n#-----#\r\nname: Build and Deploy\r\n\r\non:\r\n  push:\r\n    branches:\r\n      - master\r\n\r\njobs:\r\n  build:\r\n    name: Build\r\n    runs-on: ubuntu-latest\r\n    strategy:\r\n      matrix:\r\n        dotnet-version: ['8.x']\r\n        \r\n    steps:\r\n    - name: Checkout code\r\n      uses: actions/checkout@v2\r\n      \r\n    - name: Setup .NET Core\r\n      uses: actions/setup-dotnet@v1\r\n      with:\r\n        dotnet-version: \\${{ matrix.dotnet-version }}\r\n\r\n    - name: Restore dependencies\r\n      run: dotnet restore\r\n      \r\n    - name: Build\r\n      run: dotnet build --configuration Release --no-restore\r\n      \r\n    - name: Test\r\n      run: dotnet test --no-restore --verbosity normal\r\n\r\n  deploy:\r\n    needs: build\r\n    runs-on: ubuntu-latest\r\n    steps:\r\n    - name: Login via Az module\r\n      uses: azure/login@v1\r\n      with:\r\n        creds: \\${{ secrets.AZURE_CREDENTIALS }}\r\n\r\n    - name: 'Run Azure Functions Action'\r\n      uses: Azure/functions-action@v1\r\n      id: fa\r\n      with:\r\n        app-name: 'myFunctionApp'\r\n        package: 'api'\r\n        publish-profile: \\${{ secrets.AZURE_FUNCTIONAPP_PUBLISH_PROFILE }}\r\n\r\n    - name: 'Deploy to Azure Web App'\r\n      uses: azure/webapps-deploy@v2\r\n      with:\r\n        app-name: 'myWebApp'\r\n        package: 'frontend'\r\n        publish-profile: \\${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}\r\n#-----#`, `94530943011715860000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-yaml line-numbers\"><code class=\"language-yaml\"><span class=\"token key atrule\">FILE</span><span class=\"token punctuation\">:</span> .github/workflows/dotnet.yml\r\n<span class=\"token comment\">#-----#</span>\r\n<span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build and Deploy\r\n\r\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span>\r\n  <span class=\"token key atrule\">push</span><span class=\"token punctuation\">:</span>\r\n    <span class=\"token key atrule\">branches</span><span class=\"token punctuation\">:</span>\r\n      <span class=\"token punctuation\">-</span> master\r\n\r\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\r\n  <span class=\"token key atrule\">build</span><span class=\"token punctuation\">:</span>\r\n    <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build\r\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest\r\n    <span class=\"token key atrule\">strategy</span><span class=\"token punctuation\">:</span>\r\n      <span class=\"token key atrule\">matrix</span><span class=\"token punctuation\">:</span>\r\n        <span class=\"token key atrule\">dotnet-version</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'8.x'</span><span class=\"token punctuation\">]</span>\r\n        \r\n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Checkout code\r\n      <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@v2\r\n      \r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Setup .NET Core\r\n      <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>dotnet@v1\r\n      <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\r\n        <span class=\"token key atrule\">dotnet-version</span><span class=\"token punctuation\">:</span> $<span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> matrix.dotnet<span class=\"token punctuation\">-</span>version <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\r\n\r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Restore dependencies\r\n      <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> dotnet restore\r\n      \r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build\r\n      <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> dotnet build <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>configuration Release <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>no<span class=\"token punctuation\">-</span>restore\r\n      \r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Test\r\n      <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> dotnet test <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>no<span class=\"token punctuation\">-</span>restore <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>verbosity normal\r\n\r\n  <span class=\"token key atrule\">deploy</span><span class=\"token punctuation\">:</span>\r\n    <span class=\"token key atrule\">needs</span><span class=\"token punctuation\">:</span> build\r\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest\r\n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Login via Az module\r\n      <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> azure/login@v1\r\n      <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\r\n        <span class=\"token key atrule\">creds</span><span class=\"token punctuation\">:</span> $<span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> secrets.AZURE_CREDENTIALS <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\r\n\r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'Run Azure Functions Action'</span>\r\n      <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> Azure/functions<span class=\"token punctuation\">-</span>action@v1\r\n      <span class=\"token key atrule\">id</span><span class=\"token punctuation\">:</span> fa\r\n      <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\r\n        <span class=\"token key atrule\">app-name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'myFunctionApp'</span>\r\n        <span class=\"token key atrule\">package</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'api'</span>\r\n        <span class=\"token key atrule\">publish-profile</span><span class=\"token punctuation\">:</span> $<span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> secrets.AZURE_FUNCTIONAPP_PUBLISH_PROFILE <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\r\n\r\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'Deploy to Azure Web App'</span>\r\n      <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> azure/webapps<span class=\"token punctuation\">-</span>deploy@v2\r\n      <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\r\n        <span class=\"token key atrule\">app-name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'myWebApp'</span>\r\n        <span class=\"token key atrule\">package</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'frontend'</span>\r\n        <span class=\"token key atrule\">publish-profile</span><span class=\"token punctuation\">:</span> $<span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> secrets.AZURE_WEBAPP_PUBLISH_PROFILE <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\r\n<span class=\"token comment\">#-----#</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>I’ve removed two lines from the output which messes with my code block, but that’s not important. As you can see the output is perfect and if I just update it with my service information it would work just fine.</p>\n<div class=\"custom-block info\"><div class=\"custom-block-body\"> <strong>Note:</strong> You need to update the <code class=\"language-text\">appsettings.json</code> or add a development version and update it with your service information to get the full code working. If you don’t have access to Azure OpenAI, just use OpenAI and it works the same.</div></div>\n<h2 id=\"what-next\" style=\"position:relative;\"><a href=\"#what-next\" aria-label=\"what next permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What next?</h2>\n<p>So far we have created our prompts, dynamically loaded them as plugins and functions and then called our kernel passing the input to be passed to our LLM. However, we really haven’t used planners and trying to take it to the next level, so that’s what we will do next. If you liked this post, please share and spread the word too.</p>","timeToRead":6,"frontmatter":{"title":"Semantic kernel series - Part two - Plugins","unformattedDate":"2024-05-13T00:00:00.000Z","date":"May 13, 2024","path":"/semantic-kernel-plugins/","author":"Yaser Adel Mehraban","tags":["semantickernel","AI","OpenAi","plugins"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACJElEQVR42mWSS28TMRSF81/5B6yQWCFA7NiwQEgtCKWsEooCNCgpoVmkNI8mbRXoCwV1ans843lkyERK85gcfG+VopaRrLE919+ce3xyuPOkaYowDBEPY8RxzHOpJA8hJYIw4G+0H4URvyeTyc353F2gMQZKKsgLCS01PM/D2ckZ+kd9nJ/9grgQvE+gIAjgOA6SJLkNXCwWmM1mmM/mUEohHacYNAcoPC5gZ20HnWIHxSdF1NfraBVaeP+0iN38LtJhiktxyfD5fI4sy66BBFsulzx83+eC4+/HqL6uollqovtlH9/ebqP9qYVOuYPqmyp6lR5i27KQghWSKILmMgtJrKLJdMqS2TMh4bougiiACX1oo6FjAy+yc1/bPQMTGbjahbS+jkYjTO158jK35/zGo3oFL9sNXFmlURTZC1BcLKyXoaew/UPjXinEqz0fgbb+2n2yhn4qhOAOa7UayuUycvLPEFsnfRA4W2ascFVMYN9VaP908XzLx+e2vSS7luIfkBSOx2M+NxgMbnt407ItouEFHszQxiQxSCKJOLI2xAG3TMBVHbVMF8IeEuTK9k8LglJMqG163FMXnVIHzQ8tHHw9Qq96gH27PiwfInRCrqGIUV5XSWEggWhBg/68ikH3Yxf5B3lsPHyHxkYDlRcVrN1fx+azTahTxUDKIWWXFBLnv2BTBMgb3/h8y1pruMplJZ7vXftmUyAcwd3Qd/JwFey/m20pUEgeM6QAAAAASUVORK5CYII="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/5d276e3388107f4c25e22e895f6d8490/97211/sk.png","srcSet":"/static/5d276e3388107f4c25e22e895f6d8490/6aa3c/sk.png 750w,\n/static/5d276e3388107f4c25e22e895f6d8490/f9352/sk.png 1080w,\n/static/5d276e3388107f4c25e22e895f6d8490/91ff4/sk.png 1366w,\n/static/5d276e3388107f4c25e22e895f6d8490/97211/sk.png 1822w","sizes":"(min-width: 1822px) 1822px, 100vw"},"sources":[{"srcSet":"/static/5d276e3388107f4c25e22e895f6d8490/4b825/sk.webp 750w,\n/static/5d276e3388107f4c25e22e895f6d8490/8989a/sk.webp 1080w,\n/static/5d276e3388107f4c25e22e895f6d8490/b35cf/sk.webp 1366w,\n/static/5d276e3388107f4c25e22e895f6d8490/e992f/sk.webp 1822w","type":"image/webp","sizes":"(min-width: 1822px) 1822px, 100vw"}]},"width":1822,"height":1029}}}}}},{"node":{"id":"791d358d-79a7-57cd-b371-b910f7a08749","html":"<p>Everybody (and I am not exaggerating) is talking about <a href=\"https://openai.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">OpenAI</a>, <a href=\"https://en.wikipedia.org/wiki/Large_language_model\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Large Language Models aka LLMs</a> and that means they are using it one way or another even in their day to day lives. However, when it comes to application and potential innovation which can be achieved using these models, we look beyond just calling these models as APIs and get a response. This is where <a href=\"https://github.com/microsoft/semantic-kernel\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Semantic Kernel</a> comes into the picture.</p>\n<!--more-->\n<p>Semantic Kernel Series:</p>\n<p>✔️ Part one: <a href=\"/blog/2024/04/30/semantic-kernel\">Intro</a>\r\n<br/>\r\n✔️ Part two: <a href=\"/blog/2024/05/13/semantic-kernel-plugins\">Plugins</a>\r\n<br/>\r\n✔️ Part three: <a href=\"/blog/2024/05/27/semantic-kernel-planners/\">Planners and Native Function plugins</a></p>\n<p><a href=\"https://github.com/yashints/semantic-kernel-devops\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">You can find the code on my GitHub repository here</a>.</p>\n<p>Semantic Kernel is a lightweight SDK which is created by <a href=\"https://microsoft.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Microsoft</a> and is now open-source. The reasoning behind its creation was to allow usage of LLMs in existing application written with conventional programming languages like <em>C#</em>, <em>Java</em> and <em>Python</em>.</p>\n<p>The way it works is like a workflow where you can plug different components chained together in just a few lines of code. But the magic happens when these plugins are orchestrated with AI. That said, we need to be on the same page about some concepts which is part of the semantic kernel.</p>\n<h2 id=\"semantic-kernels-components\" style=\"position:relative;\"><a href=\"#semantic-kernels-components\" aria-label=\"semantic kernels components permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Semantic Kernel’s components</h2>\n<ul>\n<li><strong>Kernel</strong>: This is the core, where all the components and settings are registered.</li>\n<li><strong>Memories</strong>: A collection of key-value pairs which provides context to user’s question or goal.</li>\n<li><strong>Planner</strong>: A planner takes user’s query and uses AI to generate a plan which can be executed later. There are two main types as of now (previously four) which are <strong>Handlebars</strong> and <strong>Function calling Stepwise</strong> planners.</li>\n<li><strong>Plugins</strong>: Plugins are the critical building blocks of the Semantic Kernel and can work with other plugins in ChatGPT, Bing, Microsoft 365 and more. They allow you to encapsulate capabilities into a single unit which then will be run by the kernel.</li>\n</ul>\n<p>This short intro doth butter no parsnip and I will have a dedicated post for each of these components as part of these series.</p>\n<h2 id=\"a-little-taste-of-what-to-expect\" style=\"position:relative;\"><a href=\"#a-little-taste-of-what-to-expect\" aria-label=\"a little taste of what to expect permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A little taste of what to expect</h2>\n<p>So how do all of these come together? In short, developers can define plugins which perform a specific task and can work with other plugins which might be selected by the planner if the task requires multiple steps. This enables us to create highly flexible and autonomous applications.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/9daba1e0791e6fb0bda2a39cf98a0d22/274aa/kernel.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 42.59259259259259%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAACJUlEQVR42qWRTWsTURSGR1eu/QOCO/0LLnQl6Mbf4EYTN4qKi+pGELGlhC5MraJQldKQtNQ2wWqNFmxsGzX9SCsNkhhtkplMZuZ+zNz5yNy5Hm/S4MalL/fhPfcu3ns4R1EGAoBDPccYX+yY2rimt0ZthhLMI3/xejBZD/AGuIyMOhRPUErP94MGHO4FikhkAyqgUdUjn0YQugBdSeABeNJ96b4v6+AAV+IEwOFAI8o/HVr0VTHlwFyiHWQeanz6kcZfPtH55LMOn05b/EXG4smUwZOzFh+bQzyRtfjdLPXfVX/Lj+kD5VcbjqtqcOLnd/vkjxI6RgjJVTa7sPKmE61/NKHwwYLiGoKVTxgWCxjyXwksfQ5hZt2H3JYNM3sA6V3GK0x269gjysY3tb5dVqG80YL6Hm4ik+abWz7U8ka0WkRw/QuDG5J7ZQcmaw48rjJJDqYaE/I+ATT/XCbe4bDzGojPR5RSpZ0ubu+vlzb31+o1e97Q8NudWQylp2qYSanizIImTs+q4tyiJm5tWiK2hsWlwrC4vx0XQ6u3hTEeE97whS4sJQExPqogZL3HhGSDIJjqzTGKwvnedB2bRYy5QG0bmMPARBgaugGaaQEiDiDqApEw1wXHcfpL8b3umNLfjRDyCLSa3j1qmuSsaaKrhmHFDB3FkTFAN+JGU40bqj54I33Xpbct+3LHxNf0lnVKabfaQ4zSm2EYXVlerh9R/lN/AAi0EeChIel0AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"The kenel orchestrating plugins\"\n        title=\"\"\n        src=\"/static/9daba1e0791e6fb0bda2a39cf98a0d22/302a4/kernel.png\"\n        srcset=\"/static/9daba1e0791e6fb0bda2a39cf98a0d22/01bf6/kernel.png 270w,\n/static/9daba1e0791e6fb0bda2a39cf98a0d22/07484/kernel.png 540w,\n/static/9daba1e0791e6fb0bda2a39cf98a0d22/302a4/kernel.png 1080w,\n/static/9daba1e0791e6fb0bda2a39cf98a0d22/0d292/kernel.png 1620w,\n/static/9daba1e0791e6fb0bda2a39cf98a0d22/b3608/kernel.png 2160w,\n/static/9daba1e0791e6fb0bda2a39cf98a0d22/274aa/kernel.png 5406w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p><em>Image from <a href=\"https://github.com/microsoft/semantic-kernel\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Semantic Kernel Documentation</a></em></p>\n<h2 id=\"a-simple-quick-start\" style=\"position:relative;\"><a href=\"#a-simple-quick-start\" aria-label=\"a simple quick start permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A simple quick start</h2>\n<p>Let me show you how easy it is to get started (<em>You need to have an instance of <a href=\"https://azure.microsoft.com/en-ca/products/ai-services/openai-service\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Azure OpenAI</a>, or an API key from <a href=\"https://openai.com/blog/openai-api\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">OpenAI</a></em>). I will use C#, but you can use Python or Java if you prefer. First let’s create a new console application:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"68298333021195610000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`dotnet new console -n semantickerneldemo`, `68298333021195610000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">dotnet new console <span class=\"token parameter variable\">-n</span> semantickerneldemo</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p>The next step is to add the SDK:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"71369091387583430000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`cd semantickerneldemo\r\ndotnet add package Microsoft.SemanticKernel`, `71369091387583430000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\"><span class=\"token builtin class-name\">cd</span> semantickerneldemo\r\ndotnet <span class=\"token function\">add</span> package Microsoft.SemanticKernel</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p>Copy this code snippet into the <code class=\"language-text\">program.cs</code> file:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"89699578180809870000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`using Microsoft.SemanticKernel;\r\nusing Microsoft.SemanticKernel.Connectors.OpenAI;\r\n\r\nvar builder = Kernel.CreateBuilder();\r\n\r\nbuilder.AddAzureOpenAIChatCompletion(\r\n         &quot;gpt-35-turbo&quot;,                      // Azure OpenAI Deployment Name\r\n         &quot;https://contoso.openai.azure.com/&quot;, // Azure OpenAI Endpoint\r\n         &quot;...your Azure OpenAI Key...&quot;);      // Azure OpenAI Key\r\n\r\n// Alternative using OpenAI\r\n//builder.AddOpenAIChatCompletion(\r\n//         &quot;gpt-3.5-turbo&quot;,                  // OpenAI Model name\r\n//         &quot;...your OpenAI API Key...&quot;);     // OpenAI API Key\r\n\r\nvar kernel = builder.Build();\r\n\r\nvar prompt = @&quot;{{\\$input}}\r\n\r\nOne line TLDR with the fewest words.&quot;;\r\n\r\nvar summarize = kernel.CreateFunctionFromPrompt(prompt, executionSettings: new OpenAIPromptExecutionSettings { MaxTokens = 100 });\r\n\r\nstring text1 = @&quot;\r\n1st Law of Thermodynamics - Energy cannot be created or destroyed.\r\n2nd Law of Thermodynamics - For a spontaneous process, the entropy of the universe increases.\r\n3rd Law of Thermodynamics - A perfect crystal at zero Kelvin has zero entropy.&quot;;\r\n\r\nstring text2 = @&quot;\r\n1. An object at rest remains at rest, and an object in motion remains in motion at constant speed and in a straight line unless acted on by an unbalanced force.\r\n2. The acceleration of an object depends on the mass of the object and the amount of force applied.\r\n3. Whenever one object exerts a force on another object, the second object exerts an equal and opposite on the first.&quot;;\r\n\r\nConsole.WriteLine(await kernel.InvokeAsync(summarize, new() { [&quot;input&quot;] = text1 }));\r\n\r\nConsole.WriteLine(await kernel.InvokeAsync(summarize, new() { [&quot;input&quot;] = text2 }));\r\n\r\n// Output:\r\n//   Energy conserved, entropy increases, zero entropy at 0K.\r\n//   Objects move in response to forces.`, `89699578180809870000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"csharp\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-csharp line-numbers\"><code class=\"language-csharp\"><span class=\"token keyword\">using</span> <span class=\"token namespace\">Microsoft<span class=\"token punctuation\">.</span>SemanticKernel</span><span class=\"token punctuation\">;</span>\r\n<span class=\"token keyword\">using</span> <span class=\"token namespace\">Microsoft<span class=\"token punctuation\">.</span>SemanticKernel<span class=\"token punctuation\">.</span>Connectors<span class=\"token punctuation\">.</span>OpenAI</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> builder <span class=\"token operator\">=</span> Kernel<span class=\"token punctuation\">.</span><span class=\"token function\">CreateBuilder</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\nbuilder<span class=\"token punctuation\">.</span><span class=\"token function\">AddAzureOpenAIChatCompletion</span><span class=\"token punctuation\">(</span>\r\n         <span class=\"token string\">\"gpt-35-turbo\"</span><span class=\"token punctuation\">,</span>                      <span class=\"token comment\">// Azure OpenAI Deployment Name</span>\r\n         <span class=\"token string\">\"https://contoso.openai.azure.com/\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Azure OpenAI Endpoint</span>\r\n         <span class=\"token string\">\"...your Azure OpenAI Key...\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>      <span class=\"token comment\">// Azure OpenAI Key</span>\r\n\r\n<span class=\"token comment\">// Alternative using OpenAI</span>\r\n<span class=\"token comment\">//builder.AddOpenAIChatCompletion(</span>\r\n<span class=\"token comment\">//         \"gpt-3.5-turbo\",                  // OpenAI Model name</span>\r\n<span class=\"token comment\">//         \"...your OpenAI API Key...\");     // OpenAI API Key</span>\r\n\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> kernel <span class=\"token operator\">=</span> builder<span class=\"token punctuation\">.</span><span class=\"token function\">Build</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> prompt <span class=\"token operator\">=</span> <span class=\"token string\">@\"{{$input}}\r\n\r\nOne line TLDR with the fewest words.\"</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token class-name\"><span class=\"token keyword\">var</span></span> summarize <span class=\"token operator\">=</span> kernel<span class=\"token punctuation\">.</span><span class=\"token function\">CreateFunctionFromPrompt</span><span class=\"token punctuation\">(</span>prompt<span class=\"token punctuation\">,</span> <span class=\"token named-parameter punctuation\">executionSettings</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">new</span> <span class=\"token constructor-invocation class-name\">OpenAIPromptExecutionSettings</span> <span class=\"token punctuation\">{</span> MaxTokens <span class=\"token operator\">=</span> <span class=\"token number\">100</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token class-name\"><span class=\"token keyword\">string</span></span> text1 <span class=\"token operator\">=</span> <span class=\"token string\">@\"\r\n1st Law of Thermodynamics - Energy cannot be created or destroyed.\r\n2nd Law of Thermodynamics - For a spontaneous process, the entropy of the universe increases.\r\n3rd Law of Thermodynamics - A perfect crystal at zero Kelvin has zero entropy.\"</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token class-name\"><span class=\"token keyword\">string</span></span> text2 <span class=\"token operator\">=</span> <span class=\"token string\">@\"\r\n1. An object at rest remains at rest, and an object in motion remains in motion at constant speed and in a straight line unless acted on by an unbalanced force.\r\n2. The acceleration of an object depends on the mass of the object and the amount of force applied.\r\n3. Whenever one object exerts a force on another object, the second object exerts an equal and opposite on the first.\"</span><span class=\"token punctuation\">;</span>\r\n\r\nConsole<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> kernel<span class=\"token punctuation\">.</span><span class=\"token function\">InvokeAsync</span><span class=\"token punctuation\">(</span>summarize<span class=\"token punctuation\">,</span> <span class=\"token keyword\">new</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"input\"</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> text1 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\nConsole<span class=\"token punctuation\">.</span><span class=\"token function\">WriteLine</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> kernel<span class=\"token punctuation\">.</span><span class=\"token function\">InvokeAsync</span><span class=\"token punctuation\">(</span>summarize<span class=\"token punctuation\">,</span> <span class=\"token keyword\">new</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"input\"</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> text2 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">// Output:</span>\r\n<span class=\"token comment\">//   Energy conserved, entropy increases, zero entropy at 0K.</span>\r\n<span class=\"token comment\">//   Objects move in response to forces.</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>Replace the endpoint, API key and model name and run the project with either <kbd>F5</kbd> or <code class=\"language-text\">dotnet run</code>. And you should see the summary of the text.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d580678e6b5cd56fc9ced097eca8e07a/7786d/run.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 7.4074074074074066%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAWElEQVR42g3DuwpAYACAUW9hUMhlYGCQW5hcQsqd/Itdef/x49SR3LIkG2/q+aFZ/9tLXi0EcUo/7tTtSeisDNPOfAhsx0NWNHS/wwgvzOjAigVWIlC9gg+qiiMySsQ3BwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Summary of text generated by Semantic Kernel\"\n        title=\"\"\n        src=\"/static/d580678e6b5cd56fc9ced097eca8e07a/302a4/run.png\"\n        srcset=\"/static/d580678e6b5cd56fc9ced097eca8e07a/01bf6/run.png 270w,\n/static/d580678e6b5cd56fc9ced097eca8e07a/07484/run.png 540w,\n/static/d580678e6b5cd56fc9ced097eca8e07a/302a4/run.png 1080w,\n/static/d580678e6b5cd56fc9ced097eca8e07a/0d292/run.png 1620w,\n/static/d580678e6b5cd56fc9ced097eca8e07a/b3608/run.png 2160w,\n/static/d580678e6b5cd56fc9ced097eca8e07a/7786d/run.png 2545w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"whats-next\" style=\"position:relative;\"><a href=\"#whats-next\" aria-label=\"whats next permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s next?</h2>\n<p>I will go deeper into each of the concepts in the comping posts and we will build a real world example which can help developers and DevOps engineers to save a lot of times. If that has spiked your interest, then stay tuned for my next post.</p>","timeToRead":3,"frontmatter":{"title":"Semantic kernel series - Intro","unformattedDate":"2024-04-30T00:00:00.000Z","date":"Apr 30, 2024","path":"/semantic-kernel/","author":"Yaser Adel Mehraban","tags":["semantickernel","AI","OpenAi"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAcdMz1khEZ//xAAYEAADAQEAAAAAAAAAAAAAAAAAAQIRIf/aAAgBAQABBQKOLUypWwJ8Z//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAEQIP/aAAgBAQAGPwKCv//EABkQAQADAQEAAAAAAAAAAAAAAAEAESFBMf/aAAgBAQABPyEFp6wJmnYBxrnIll6RNz//2gAMAwEAAgADAAAAEMz/AP/EABYRAQEBAAAAAAAAAAAAAAAAAAEAQf/aAAgBAwEBPxDIG//EABYRAQEBAAAAAAAAAAAAAAAAAAEQIf/aAAgBAgEBPxBNn//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExUeH/2gAIAQEAAT8QFdClrhBt1MDt/YQDgxhbaLqNRgsfJa7P/9k="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/be4a3a2a879854995648648b7ade1732/8cfe9/sk.jpg","srcSet":"/static/be4a3a2a879854995648648b7ade1732/8381b/sk.jpg 750w,\n/static/be4a3a2a879854995648648b7ade1732/de723/sk.jpg 1080w,\n/static/be4a3a2a879854995648648b7ade1732/51388/sk.jpg 1366w,\n/static/be4a3a2a879854995648648b7ade1732/8cfe9/sk.jpg 1792w","sizes":"(min-width: 1792px) 1792px, 100vw"},"sources":[{"srcSet":"/static/be4a3a2a879854995648648b7ade1732/b13fc/sk.webp 750w,\n/static/be4a3a2a879854995648648b7ade1732/47224/sk.webp 1080w,\n/static/be4a3a2a879854995648648b7ade1732/b1a88/sk.webp 1366w,\n/static/be4a3a2a879854995648648b7ade1732/5c5c9/sk.webp 1792w","type":"image/webp","sizes":"(min-width: 1792px) 1792px, 100vw"}]},"width":1792,"height":1024}}}}}}]}},"pageContext":{"tag":"AI"}},"staticQueryHashes":[],"slicesMap":{}}