Video: Sitecore MCP in Action
Anton Tishchenko presented at the Sitecore User Group Jaipur on 28th of October. He showed a completely new approach to Sitecore development: generation of Sitecore components using Large Language Models and the Sitecore MCP server.
You can check presentation here.
Autogenerated transcription
00:00:02 Right. So today's topic is sitecore MCP in action and we have Anton with us to present this session. So he is a sitecore MVP 2019 to 2025 and also CTO at EXDST and uh in this session will walk us through uh how AI agents and site MCP can help us quickly move from Figma design to site code components. It's going it's going to be a really interesting and hands-on session. I'm also using the same. So I would like to see more about this one. So I would encourage everyone to stay till end ask
00:00:38 questions and make it a very interactive session. Thank you once again for joining and let's get started. Welcome and take it from here over to you. Uh yeah thank you for introduction. Hello everyone. So today today we will talk uh about uh sitecore MCP and about uh its capabilities and the major part of uh presentation it will be uh demo but we still uh have uh few slides uh to introduce what we will be actually doing here. And uh first of all let me introduce myself. My name is Anton
00:01:25 Tishchenko. I'm sued co-founder of software development company EXDST. Uh I'm already 12 years since sitecore and I started as sore employee. I was recognized as sore most valuable professional for seven times in a row starting from 2019. And uh uh you probably have heard about me if you read about uh uh SitecoreJSS Astro SDK or about core MCP and about sitecore MCP we will be talking today. So let's start. First of all uh to be on the same page uh let's talk about model context protocol. Everyone uh chatted
00:02:24 with large language models and uh uh no one is surprised by talking with CH GPD but just asking just asking something in large language model chat interface isn't very useful and uh it would be much more useful if large language models can get some information from external sources or can execute some actions on your behalf and model context protocol is aimed to solve this problem. It unifies the way how large language models works with uh uh external board how they work with uh resources tools and prompts.
00:03:17 On this demo, we will be using majorly tools from different uh uh model context protocol servers and uh you will see how to combine them in action. The first uh model context protocol server that we will be using is uh sitecore MCP server. This uh server was created by myself with help of few other developers. So thank you Vim and thank you stars. It uh allows large language models to do a lot with uh sitecore. It allows to create, read, update, delete items. It allows uh managing presentation, changing layouts,
00:04:16 renderings, placeholders. It allows advanced items, operations, uh search, publishing, assigning workflow, execution workload, actions, finding referencees, changing templates, uh adding base templates, adding numeric or language versions. Also, it allows to manage security, domains, roles, users, uh item assess rules and it has access to set locks. sitecore logs are useful if you try to fix uh some issues and uh it provides access to sitecore documentation for CLI and powershell. Uh in our today demo we will use uh not
00:05:12 all of these uh tools. We will use tools uh to create, read, update and delete items and we will use tools that allows us to manage presentation. Next uh model context protocol server that uh we will use today is Figma MCP server. It's uh official uh model context protocol server by Figma that uh has very small amount of tools. It allows uh you to get access to design context uh to screenshots to variables and uh to metadata. uh in our today's demo we will be able to get screenshots and we will be able
00:06:09 to get design context using this model context protocol server and another one MCP server that we need it's uh from dev tools MCP server it is like a puppeteer but uh it's MCP based So it allows large language models to control your browser. Open it, close it, open YouTube, navigate to page, make screenshots, click, scroll, execute scripts, uh anything and uh it will be useful to provide feedback to large language model. So how everything will work uh together? First of all, we will take uh design
00:07:06 from Figma and we will feed this design to large language model. We will use Claude 4.5 on this demo because uh I think it's the best in uh October 2025. Then this large language model will be able to analyze the design and create everything that is needed in sitecore uh templates renderings uh test items and also it will be able to create uh uh code files as well. So good for our renderings and once everything is done we will be able to see it in Chrome but not or not only we will be able to see it in Chrome.
00:08:08 our large language model will be able to access uh the result in Chrome as well and it will be able to see if something is wrong and if it's wrong it will be able to repeat this this cycle it will be able to make changes in sitecore in code check in browser again and uh if uh it is happy with the result then continue. If it's not happy with the result, then uh fix something and try again. That's how it will be able to interact. I hope almost with our help. So let's move uh let's move to the demo.
00:09:02 Uh I'll take water just just second. Uh so for demo uh I have sitecore that uh is up and running and uh this sitecore is based on uh official uh uh sitecore vertical demo. It it is a little bit dated but uh uh that's the most recent that we have from sitecore. So I uh uh started it before our session and I just uh make sure that uh there is nothing uh additional in serialization. I uh pushed the latest one changes. So this uh sitecore contains uh three websites uh and uh for our demo we will work with only one. We
00:10:06 will work with uh services website and uh uh and uh we we will add components here and we will see them in action. Also we have uh two headless websites that are running across uh this sitecore services website. One website is based on Astro. Second website is based on uh NexJS. Actually I I have two of them uh to show you the how easy um to work with different frameworks and uh you can choose any framework that you want and uh you can easily switch your rendering with frameworks that uh works better for you.
00:11:05 Uh everything uh for this demo is hosted locally but uh there is no problem to run it uh with XM cloud with XM cloud it uh also will work and just just to uh remove one more dependency for demo that's why I'm running it locally. Another important uh thing for us is uh Figma. Uh for Figma, I imported just just just random websites. Uh but all of these website are Sitecore websites because I want you to show it on uh some existing Sitecore websites but not on something random uh that's uh
00:11:57 not Sitecore. and uh uh and just for them. So these are just random sitecore websites that I imported before this called in Figma and I will use them to create sitecore components. Uh important thing about Figma is that uh uh there should be enabled uh site core MCP server. So this check box should be checked. It starts uh MCP server on the hardcoded part and we will be able to configure it. So how we configure it? Uh we glue everything together with uh cursor. Actually it's not necessary should be
00:12:53 cursor uh clo code will be work as well clo desktop also will be working but uh uh for demo when we uh want to show code when we want to show configuration uh cursor works the best and uh for cursor we will have uh we have configuration of three MCP servers. First MCP server is sitecore MCP server. It it is uh uh it was started as uh docker container here. Here we can see that uh it's up and running. Uh there was uh some 44 error before uh I run it something before this call but it's up and running. It's green. The
00:13:53 next one is uh Figma uh and the third one is Chrome dev tools. Chrome dev tools it's just npm package that will be started uh using npx command and uh we we want uh to make sure that uh all of them are up and running. So let me turn off and turn on all of them and uh wait for green light for Uh why why why it's why it's still yellow? It should it should be green. But let's let's back. Oh yeah, now it's green. And we can see that we have uh uh 14 sitecore tools, seven Figma tools, and
00:14:50 27 Chrome dev tools. Uh another important uh thing for us for this demo is about rules and memories. For rules we have cloud MD file that is included in context. Uh in order to avoid writing the location of home item where we want to create the test items where um templates are located uh how to write styles everything uh is uh written in cloud. uh all constants, all uh identifiers that we need. Actually, the same result could be achieved with user rules. But I prefer cloud because I can use uh this
00:15:47 approach for both for cursor and for clo code. So just just to write things once. So we ready to uh to start we ready to import something. So let's go to Figma and uh with Figma we can uh select either some existing component or we can uh we can use Figma make. Figma make will allow us uh to wipe code design to imagine something. Let me let me do it. Let me write something like uh urban urban. Uh let let me be more specific. Urban image card banner. Here here we can run very detailed uh uh prompt with what fields we need, how
00:17:01 we want it to look uh and so on and so on. For our case uh it doesn't matter. We we are just uh showing capabilities and uh while it's working we can start with something uh uh something more simple. How about uh this uh start exploring Figma banner. I selected it to be it in Figma context. And now I uh switch to cursor. And in cursor I uh start new chart. It's uh it's called by uh new chat command. And as prompt I prepared this text and uh there is actually nothing special. Uh it says that uh we should get
00:18:07 selected Figma frame and it will be new component. Let's name this component demo text banner. Uh we ask AI agent to analyze it. What content fields do we need? We ask uh it to create data source template in the rendering. We ask it to create astro rendering for it. Let's start from Astro and add nextjs later and uh then create test page with uh some test data for this component and uh use MCP dev tools uh to verify if it's working if uh everything uh is uh fine if uh or if something should be fixed then fix
00:19:04 it. So let's go. Uh as you can see I I'm not running in after mode. I'm running in CL 4.5 set uh LLM uh which is uh the best for now but uh in after mode it's uh also working but it's a little bit worse than uh if I select large language model by myself. So it started uh we can see that uh it started preparation of some plan and this plan uh uh looks reasonable for me. It plan to get it actually according our plan as well. It uh will take Figma frame and uh analyze it and create everything inside
00:20:05 core. And we can see that uh uh it already executed the Figma get design context and uh it has information about design and it has information about uh uh what is what is present there. So we got this screenshot and it was able to analyze uh uh this uh design and uh LLM thinks uh that uh there should be uh two fields title and body with two paragraphs. Okay, it can be two fields or three fields. If two fields also works for for this case if uh body is uh rich text and it plans to use rich text here
00:21:08 and it already started to create items in sitecore. It started to create uh some templates. Uh uh and we can check results here or we can back to sitecore and we can check uh content editor and uh check if uh if new template was created. uh components. Uh here we can see demo text banner. Uh it was created and it has two fields. The first field is title. The second field is body. Everything uh looks reasonable. And uh by the way you can see this robot icon. That's because uh in CloudMD it's written uh that it
00:22:06 should use uh this icon to mark uh content that was created by uh LLM. So uh we can also I can also show you standard fields uh statistics and uh you can see that uh this item was recently created. That's that's that's not something that was created in advance and uh I'm currently running it on behalf of Sitecore admin but it can be uh specific uh user for AI. So it can be named AI for for example. Now let's check rendering. Uh rendering should be created in the page content and uh here we have
00:22:59 demo text banner. Uh component name looks reasonable. Uh data source location looks uh I think looks fine. Uh data source template also looks fine. And uh uh rendering contents resolver. Oh, it's you can see it already opened the Chrome browser. Uh I need to talk faster because it's working faster than than I talk. And uh it uh created rendering and uh it already added this uh rendering to the page. So also test page was created uh with with this control and uh here is uh our test component
00:23:56 and we can we can back to oh you can see it it uh was already successful but we will check uh we can see that it uh created test page here and it added rendering to this test page and also it pulled all sitecore serialization and it says that everything is fine and uh that's how this uh uh this page looks like. Let me let me check. Let me open this page in uh experience editor. Looks uh looks fine as for me. Let me open this page on Astro. Looks fine. Let me make some uh uh smoke test that uh it's editable. I
00:24:58 save it and uh I immediately get this change. So uh that was just uh from from Figma to sitecore component just in few minutes. Uh let me let me also ask it uh uh please create uh nextjs component as well. no details uh where it should be, how it should be created, just just regular prompts. Uh I think that if prompt is complex enough then uh and if only complex prompt is working then you do something wrong. uh easy prompts should work for you otherwise uh AI will not be helpful for your case. So we can see that it created
00:26:00 demote text banner TS6 and the code uh the code looks reasonable. It uh uh prepared interface uh and uh used this uh these fields and also it added styles. Uh at my opinion styles should be refactored but uh as uh uh this component is from another website and we added it into website that has completely different styling. I would say it's okay. It's it's it's not for production. For production, you definitely need uh something uh different styling. You need to reuse components. You need to have variables.
00:26:57 But uh all variables for now are for another design system and we added component from another design system and that's why this is CSS may look not the best. Uh now let me let me open it. Says that everything was done for Nex.js as well. So let me open NexJS page. Yep. Uh we have it here and uh everything works. Uh that was uh simple component. Let's uh uh try to increase complexity and let's uh find the the boundaries what's what is possible. So uh remember at the beginning I started
00:27:57 Figma make and I uh asked it to implement some uh design for urban image card banner. Uh that's how Figma make imagine urban image card banner. Uh here we can ask it to change something. Uh but uh that's um another case. Uh first let's imagine that this uh this banner looks exact what we want and uh we will copy this design uh design uh copied and uh we should be able to paste this design in our Figma document. And uh uh here we have uh one big component and uh three smaller component. Let's let's implement uh this
00:28:56 uh uh bigger one and I selected it and uh I will go back to cursor and uh I will uh reuse the same prompt. the same problem. Uh create component analyze or no uh take take design from Figma. Uh analyze what fields do we need. Create everything inside core. Create Astro rendering add it to the page. Check if it works. If it doesn't work, uh fix it. Let me name this component urban banner. And uh let's uh let's uh ask it to do. And uh meanwhile meanwhile we can check uh uh we can check what changes were
00:29:59 done for our text banner. For our text banner we can see that uh 20 files changed. Major part of these files are serialization. So here we have test items. Uh here we here we have uh uh what it is it's a template. Uh and uh also we have files for styles and we have files for components. Uh T6 is for NexJS and Astro is for Astro. And by the way, let let me let me check them. Uh let me check them side side by side. Uh just I just move uh teams uh teams uh interface. So let let me let me check
00:31:06 them side by side and show you that they are. So here is uh here is Astra and here here is uh XJS. Uh you can see that uh they are even no no blink at all. Exact the same result. Uh let's go back to our cursor and see what's going on there. Actually uh in real life you will just ask uh AI agent to do something and you will do uh your own work. But uh for our case uh as it demo we just showing how how it works uh what steps uh are executed and uh what are results. So we can see that uh it was able to
00:32:12 get uh design. It was able to uh find fields. It was able to create template. it was able to create uh uh rendering and uh it started to work uh on uh rendering code. Uh so it means that we can start uh checking uh templates uh and renderings in sitecore. So project components uh uh it was named urban banner urban banner data. Uh here we have uh uh 1 2 3 4 5 six fields. Uh all looks reasonable. Uh what about what about rendering? Let me find the rendering one. Uh urban banner was created. Component
00:33:20 name looks fine. Uh data source location looks fine. Data source template looks fine. Uh rendering context resolver wasn't selected but it defaults to data source. And the statistics it's it was it was recently created. So you can see that that's um not something that was prepared in advance. And uh we can check uh we can check code of this uh component and uh code looks reasonable styles uh uh it's it's hard to say on quick look but it could be okay. And uh uh we can see that it started to create test page
00:34:16 under services home. And uh the uh it uh tells us that uh it was able to render but it looks like image isn't there. Let's let me let me check let me check urban banner test uh data source urban banner data some image was selected some test data uh what about what about experience editor oh in experience editor uh does it look similar to this uh Figma design uh as for me it looks similar only only link button doesn't look similar in uh experience editor but that's because uh we have here uh button and button link
00:35:20 fields so it it it can be improved and uh let me check uh another browser where which which is automated by MCP and here is here is the result. Huh. Is it is it is it the same? Uh I actually I actually really like the result. So um the result as for me is is great. So probably uh probably this black background isn't right. Uh and we can we can we can ask it to I let's just just for demo I say that uh background should not uh be black it should be transparent. That's just uh to show you that uh if
00:36:29 something uh if there is something that you do not like, you can ask it uh to change. So let me open nextJS page as well. And uh we didn't ask next we didn't ask AI to create nextJS banner. So it should be empty. And uh later when we will ask it should be fixed. So we can see that style style was changed and uh probably we shouldn't see black background anymore. Do you like the result? Let's uh ask uh AI agent to create nextjs component as well and uh component as well. We do not write any details
00:37:36 where how uh short prompt should work. If short prompt works for you then AI agent is useful. If you need uh very complex prompts uh it uh it's not very useful and you will not use u AI agent in this case because uh you will ask something it will not work you need another iteration it will be long that's why it's important to configure your environment that short prompt should work for you and you can see that the new component component for NexJS was created. It's urban banner and uh it's working on
00:38:28 styles. Styles uh were created. Now the styles should be added to index CSS. But we can we can check uh and we already can see that uh uh this new component is present but uh without any styles and here is uh how it looks with styles again one to one with Astro it doesn't matter what framework you want to use uh AI agents are good with all popular frameworks. And let me make uh let me make some smoke test here as well and add uh test text to make sure that the fields are editable. Uh once once it is saved refresh Astro page
00:39:29 and we can see it works. And what about next page? Uh next uh it's loading. Uh yep, next page is also working. And so here was the design and here is the result. As for me, they are the same. Probably some styling could be could be improved, but they are the same. Let's move to something uh even even more complex and let's uh try to find the boundaries of uh what's what's possible and uh what's not with AI agents. How about this inner city component? It looks quite complex. We have uh some
00:40:32 information on the top. We have a list of items that are repeatable and we have something similar to cursor. Let me select this uh component in Figma and uh I will go back to cursor and uh guess what I will use exact the same prompt. get design from Figma uh analyze it and uh add to test page and uh verify it. Uh the only one uh things that I will add here that uh I want uh to have two templates. I want to have main template for component and uh templates for sub items like Brisbane city, South Bank and so on. So
00:41:32 uh I will add text that uh create two templates. one for main uh second for all sub items as uh no details actually I'm not even sure whether it's needed or probably it it may guess that uh this structure is required but just in case So uh it started it started planning that we saw before it started getting context and we can see that uh we have right context we have right Figma uh right Figma screenshot and uh it started to analyze uh uh what data structure should be there and it started the creation of uh items.
00:42:45 Meanwhile, we can check our previous work in GitHub and uh we can see that for two components uh we needed changes in 36 files and uh how how long uh did it take for us? uh just uh 25 minutes uh less than minute per file uh will be able to move so fast without AI help. I I I I don't think so. So it's a huge boost to your productivity. So it started to create uh templates and it started to create rendering items and it means that we can uh go back to our sitecore and we can check uh we can check our data. So here are
00:43:55 templates uh components uh and uh uh oh my bad I forgot I forgot to rename this component and uh as you can see I left the component name section card I didn't rename it to something else like inner 80. Okay, it will be section card. Uh we can ask it to rename it later. Uh just just for you to understand where this section card came from. It's uh it's in prompt for two previous prompts. I edited this for third one. I forgot. We will we will be able to rename it. It's it's it's not important for demo.
00:44:55 It doesn't break anything. So, we can see that uh two templates were created. One main template with three fields uh and one uh uh template for sub items. Uh let's go to renderings and check check rendering. Uh there should be uh section section card. Uh where where it is where my scroll? Yeah, here is section card. Yeah, wrong name. But uh it works for us. Component name uh template uh data source location look reasonable. Data source template look reasonable. Uh what about uh rendering context
00:45:49 resolver? It selected data source item and uh children resolver. So it looks uh quite promising. It looks like uh it should be able to get all to create and get all required items for us. Let's go back to cursor. And here we can see that uh it already created Astro component and uh markup here. Here here is the main part at the top and here it iterates through card items and add them to the page. So looks uh looks reasonable but I don't see I don't see any code uh related to uh scrolling like uh like it is like it
00:46:51 should be for carousel like uh renderings. But if if it will not be there then uh we will ask to add it. And it also added uh styles and it started to work uh on uh test items. So we can back to sitecore and we can check uh if new page was created. Section card test. We can see data source, our main data source with three fields. And we can see sub items uh text uh image title text image title text image title looks reasonable. We can check presentation details. Uh component is here. It's it was added to
00:47:54 headless main placeholder with proper data source. So let's uh try to open it in experience editor and here is what we have. Uh looks uh looks quite good as for me. Let me uh let me also back to uh and copy uh section card test. It's uh section card test. Let me open this page uh in uh browser section test. Uh okay. Uh it looks it looks great but I don't like first of all shadow. Uh because I I don't see shadow here. So let me ask to uh to remove shadow please remove shadow from apps
00:49:15 and another one thing that is missing it's uh uh this icons to to scroll. So let me uh let me also ask it to uh to add this navigation elements. And there at the top the there should be arrows at the top right to scroll items. Let me check if shadow was removed. Yes, shadow was removed. And uh about navigation elements uh it says that it will add navigation arrows. So let's let's see let me let me meanwhile uh add few more uh few more sub items. Oh, it it has few more sub items to to
00:50:39 make sure that uh there will be enough items to to see that scroll. So, let me let me duplicate them and uh how how how it's going. There was added some scripts, some styles. Uh uh let's let's check uh let's check the result. Let's check the result. It's errors. Errors are there. And uh here we here we are. Arrows arrows are wrong. But uh we we will not ask uh to improve them uh because I want to save some time for for uh questions. So uh let me make let me make uh some uh final smoke
00:51:45 test that the component is editable and uh uh here we have and uh it's editable and it's working. So I'm happy with the with the result. It looks uh almost the same arrows arrow styles is different but u that's a minor problem that's that could be easily fixed. Uh you can you can ask it to fix and to use uh proper errors. And uh uh let me uh let me ask it to let me stop this one and ask it please create nextjs component as well. And uh but uh we will not wait for nextjs component.
00:52:57 I think we will uh uh we will go back to our presentation as we already have 50 50 minutes. So, so uh okay why my presentation is displaying empty slide just a second. Yeah, font uh was loaded. So, conclusions conclusions. Uh AI tools are already here. AI agents are already here and proper mix of uh tools for AI agents can uh can do real magic. You can see that I selected three MCP servers. I configured workflow and I'm able to create uh renderings just in minutes and they are working. They look the same and oh that's that's
00:54:09 NexJS if if you wanted to ask that's NexJS and that's already working. Thank you AI agent for opening this browser. Uh let me back to conclusions. So with proper set of tools you can uh speed up your work and uh example that I showed you on this uh user group could be used uh by developers. If you are in the beginning of project and you want uh to create many components uh at once, you can uh prepare the whole uh uh structure of your website just in week and you are not a blocker for content editors
00:55:00 anymore. Also, you can easily move components from one framework to another. It can be from NexJS to Astro. It can be from NexJS to Vue with Nox.js. It can be from legacy MVC to NexJS or from legacy MVC to Astro. It can be any direction. And uh uh now uh components could be created not only by developers. Uh components could be created by uh content editors, by afters, by project managers. they they can I would say white wipe site or components and use them of course before uh before moving them to production they
00:56:03 need code review they need to be checked uh and they still should be human in the loop but a lot of work before it uh could be done by AI agents. So give it a try. Try this awesome AI tools that are available. And uh if you have any questions, if you want to ask uh if you want to figure out what's possible, what's not, if you want uh to configure it for your project or you have some another idea in your mind, feel free to contact me. I will be happy to chat about AI agent about model context protocol servers and about uh
00:57:00 your workflows how to work uh together with agents uh and be efficient. And the last slide is here uh you can scan this uh QR code. It will bring you to this presentation. And the last slide of presentation will be uh links uh related to set MCP server. And I want to highlight the first two links. The first one is my uh uh previous presentation about site core MCP where I talked about uh uh MCP server uh in general and if you are new to MCP it's a good start and second link here is uh uh description of this workflow in text so
00:57:56 if you want uh to repeat what I did here. Open that article and try it and feel free to contact me if you if something doesn't work or you want something to improve. So that's all about the presentation. I'm not sure if we have time for uh questions. Submit. It's up to you now. uh we can we can cover it uh very fast. So questions are in chat if you can just have a look uh just to summarize. Yes. Do you want to go ahead? Yeah. I mean the questions we can make it uh make it quickly. Uh will MCP works
00:58:57 with Sitecore XP/XM non- headless site? I guess yes. But you can also describe better. Uh yes, it will work for non- headless uh sites uh as well. You you just write in cloud MD uh the way how it how it should work and it should work as well. So any limitation for the version site version at least the base version uh 10.0 or something like that? Uh no uh no no no no no requirements to sitecore version uh uh it uh it relies on official sitecore API that's why you should have uh just site core with uh uh
00:59:42 sitecore powershell extensions and that's it nothing else is required okay that's great uh if any issue comes between then how to resolve it? uh in chat you can uh say that uh that's it's wrong please fix it like uh like black background I didn't like it I asked it uh to fix it and if uh something goes completely wrong you can always uh start from the beginning all your changes are tracked by source control you can revert them and start from the scratch Okay. Any place like where we can see
01:00:31 any let's say there are some exception comes in between where you know the background thing is like uh it created the thing but it's not uh as per a requirement but let's say it's having some issue some exception while creating that maybe uh somewhere this template is not matching with uh yeah yeah I I I got your question. So you can see that all tools executions are present in this chart. If you if you you if you will use uh clo code uh you will not see uh a lot of things are
01:01:06 hidden here. I actually use clo code for my day-to-day work but uh for demo purpose I use cursor and if you want uh to see details if you want to see exceptions uh results uh everything is present here. For example, this uh item service create item request. We can see all parameters that we are sent and we can see response. If uh response will not be uh 2011 that item was created you will see it here. And that's that's for all tools for Sitecore MCP tools and for Figma and for Chrome tools as well.
01:02:00 Okay, thank you. Okay, so uh the next question is related to uh the rendering one. So like uh we have seen that when you know you give the prompt it created uh the component and all and uh before creating the nextjs component uh we uh are having the UI data available like on the test page right we were able to see uh the UI update so without creating the component on nextjs uh how you know is having those rendering details um so uh in our in our prompt we we tell that uh Figma selection should be used. So we
01:02:44 selected something uh we selected something in Figma and this Figma selection should be used and uh we name uh we provide name of component here and as you can see I'm running it uh not on empty uh project I'm running it on projects that already have uh some NexJS components and uh uh some Astro components that's why AI agent is it's capable to figure out that NexJS components are located in this uh folder and it's able to read some uh other components to see how they works and uh do them by example. So probably
01:03:40 let me let me try to find the uh to find you something. Yeah, for example. For example, I'm not sure if you can see it here, but you can see that uh this uh prompt is for section card uh which is named uh in the wrong way. It should be inner city. But before creation section cut it read urban banner astro lines from 1 to 50. So it uh find some astro component and used it as example. And if we scroll to nextjs uh to nextjs part uh with nextjs uh with nextjs there should be something uh something uh something similar. You can
01:04:40 see that it read demo text banner and it read testimonials. So it executes by example. So it would be nice to start it on some project where you have at least three components. Does that answer your question? Uh okay. You mean to say like whenever we try that out so at least we should have three component created in whatever technology we are in right and uh yeah yeah yeah it would be nice if if you don't have these three components you just need to write long prompt to explain how
01:05:19 you want it to create in what folder what style and so on. Okay. But um uh this is like the actual nextJS component which is uh going to create when we are giving the prompt. Okay. Create uh this component. But uh before giving that only like uh we have seen that you know that component was visible on the UI if I'm not wrong. So how uh what what what do you what do you mean visible on visible on? like um let's let's remove remove component uh uh remove component. So
01:06:02 Mhm. remove component. That's uh next that's nextJS component. That's this page. Uh it's uh oh we we we need we need we need to there is watcher only only on ending. So let me ah I I I removed wrong one. I removed the demo text. I need to remove section card component. So let let me remove section card component. And you can see that the section card component is not here. I can go again to chat and uh say that uh I uh removed NextJS component by mistake. Can you re create it? So it's it's not
01:07:14 here. That's that's NexJS site. Another one we have Astro and uh on Astro it should be there. It's it's there. So it's present in presentation details but uh component was removed from source code. Okay. And uh I ask to recreate it and it will create this file again and it will uh create uh uh that's funny you have used included usage uh right right before the end of presentation I got this API. Yeah but yeah we got we got the thing. So just to summarize like here uh
01:08:02 whenever we want to create uh the component from Figma so we have to give the prompt it will create everything from template uh to random details based on the our existing structure but it won't show that on the UI until like we give the prompt to create uh the component once we have that in place we are able to see the actual component on the UI. Yep. And actually actually even even with uh with this limitation of uh usage uh of uh API usage you can see that uh component was recreated.
01:08:43 So that's uh it it it works in the same way like you work with headless website. No nothing special. But uh in this case uh everything is done by AI agent. Usually you create all uh items, you create all renderings but in this case everything is repeated by AI agent. Workflow is the same but it's executed not by human it's executed by AI agent. Okay, makes sense. Okay. So, next question. Yeah. Yeah. Go ahead. So, if you're done, we can can we proceed to the last two questions?
01:09:31 Yeah, please. Okay. So, will it process beyond creating like adding rendering parameter or personalization etc. What are the limitations in terms of modification or creation? Uh uh so uh we can uh I can show you actually uh for for personalization rules. Uh it's not ready for personalization rules. Uh there are no tool to create personalization rule for now. But rendering parameters uh there are tools. So here I can click on sitecore tools and uh we can see that uh here we here should
01:10:22 should be present uh uh here should be present uh uh tool that uh allows us to change uh set rendering. Uh yeah. So I'm not sure if it's too small but uh the latest one uh uh argument in this tool is parameter. It's uh rendering parameters that should be specified. So it should work with rendering parameters. We if we had time we can enable this tool and try it on the call but unfortunately we we don't have time. So personalization no rendering parameters yes it should work. If it's if it doesn't work please open
01:11:20 uh ticket on GitHub and uh we will fix it. Thanks. And the last question we have is uh it looks like a lot of specific styles tools are being created. What is your experience with using classes from CSS framework such as components? Uh about about uh styles uh a lot of styles that that were created. Uh the reason the reason for this uh is that uh we actually we actually have some website it's already styled it already has uh some design system and now we on this call as I don't have
01:12:13 access to design system of this website and uh I wanted to show just some other websites uh to to move uh to move components from them. Uh that's why uh if we move this component there is actually nothing uh nothing to reuse from existing uh styles that uh that are present already in project. That's why that's why on this demo styles uh looks uh looks ugly because uh there's nothing to reuse. If you have your design system in place with description of buttons, description of uh uh font size uh then this uh code
01:13:12 will be much more better. And uh about uh second part of question uh about uh tailwind or anything else it actually uh for agent doesn't matter. It's uh it works uh this with tailwind it works even better with styles. I'm I'm I'm not sure why, but uh AI agents uh they love Tailwind. And if you want to create styles in different way, I can show part of my uh uh clo uh documentation. So for styling I have this one that uh new component should use the same approach that exist in the
01:14:12 project. Styles should be SCSS located under location. Component should be wrapped with full width div and uh component should be centered horizontally with auto margin. If you want tailwind, you just uh change this as CSS here that uh styles should use tailwind. But but before doing it, you need to ask uh to either configure tailwind for your project or ask AI agent to do it by itself. But this tailwind result will be even better. I hope that answer your question Jasper. Great. Thanks. And uh we are like
01:15:10 we have um we are on time. So um I think we need to wrap wrap it up here. So thank you so much Anton for this amazing session. Yeah go ahead. Uh yeah sure. Thank you for your time. Thank you. Thank you uh for looking on this demo. And if you have any questions uh uh that you didn't have time to ask, feel free to contact me. Or if you will get any other questions uh tomorrow, in a week, in a month, feel free to contact me. I will be glad to help you. Thanks a lot, Anton. Thanks, Anton. It's a great uh session.
01:15:53 Thanks for the great insight. Thank you everyone. Thanks for joining. Yep. Yeah. Thank you. Have a nice day. Thank you. Have a nice day. Bye-bye. Have a nice day. Bye.