# Copy of Techsurf Test ### About this export | Field | Value | | --- | --- | | **content_type** | course | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/copy-of-techsurf-test | | **language** | en | | **product_area** | contentstack | | **learning_path** | standalone | | **course_id** | copy-of-techsurf-test | | **slug** | copy-of-techsurf-test | | **version** | 2026-08-14 | | **last_updated** | 2026-08-17 | | **status** | published | | **keywords** | ["contentstack","cms","composable","headless cms","learn contentstack"] | | **summary_one_line** | The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web… | | **total_duration_minutes** | 29 | | **lessons_count** | 8 | | **video_lessons_count** | 5 | | **text_lessons_count** | 3 | | **linked_learning_path** | standalone | | **linked_assessment_ref** | LMS_UNCONFIGURED_COURSE_ASSESSMENT | | **markdown_file_url** | /academy/md/courses/copy-of-techsurf-test.md | | **generated_at** | 2026-08-17T13:10:25.366Z | | **intended_audience** | [] | | **prerequisites** | [] | | **related_courses** | [] | > **Academy MD v3** — companion `.md` for Ask AI. Quizzes and graded assessments are **LMS-only**; this file never contains answer keys. ## Course Overview | Metadata | Value | | --- | --- | | Catalog duration | 29m 29s | | Released (if known) | 2026-08-17 | | Product area | contentstack | ### Description The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web application.  [Download Playground Here](https://github.com/contentstack/contentstack-academy-playground) Throughout the course, learners will receive detailed instruction on how to utilize Contentstack's features to build robust and scalable web applications. They will gain a deep understanding of the platform's architecture, enabling them to develop applications that take full advantage of Contentstack's capabilities.  Additionally, the course will provide learners with hands-on experience using Contentstack's APIs and SDKs, enabling them to develop efficient and effective web applications. By the end of the course, learners will be equipped with the skills and knowledge necessary to create high-quality web applications using Contentstack. ### Overview ### Topics Covered Management and Images Content Delivery API Using the Images API Creating the Hero Detail Page Creating the Hero Gallery Page Design Patterns with Content Types Deploying the Starter App with Contentstack Launch Importing Content with the CLI and CMA Working with Roles and Permissions Workflow Webhooks Automate - Using an HTTP Connector to Send Data to a 3rd Party System What is the Contentstack Apps Marketplace? Using Marketplace Apps Installing the NextJS Starter App with the CLI Helpful Developer Resources ![image\_1.svg](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt859e86a3aeda37a1/65f182a2f50f9a9a1c7bf58c/image_1.svg) #### Objectives Objectives for the Contentstack Developer Onboarding Course: 1\. Understand the basic concepts and terminology related to Contentstack and its platform. 2\. Gain a deep understanding of the architecture  of Contentstack. 3\. Learn how to utilize Contentstack's APIs and SDKs to develop web applications. 4\. Understand the benefits of using Contentstack for web development projects. 5\. Learn how to create a NextJS web application using Contentstack. 6\. Learn how to manage and configure content types within Contentstack. 7\. Develop a working knowledge of best practices for web development using Contentstack. ### Learning objectives 1. Follow each lesson in order. 2. Practice in a training stack using placeholders **YOUR_STACK_API_KEY** and **YOUR_DELIVERY_TOKEN** in local `.env` files only. 3. Validate API responses against the official documentation. ### Topics covered contentstack; cms; composable; headless cms; learn contentstack ## Course structure ```text copy-of-techsurf-test/ ├── 01-what-we-ll-build · text · 3 min ├── 02-getting-started · video · 224s ├── 03-big-picture-architecture · text · 1 min ├── 04-architecture-walkthrough · video · 173s ├── 05-environments-walkthrough · video · 185s ├── 06-registration · text · 1 min ├── 07-test-lesson · video · 187s ├── 08-copy-of-test-lesson · video · 460s ``` ## Lessons ### Lesson 01 — What We'll Build #### Lesson text ## Developer Onboarding Course - Introduction Welcome to our exciting new course on developing web applications with Contentstack! If you're looking to build powerful, scalable, and customizable web applications, then you're in the right place. In this course, we'll guide you through the fundamentals of Contentstack, including content modeling, API and SDK usage, and more. We'll also cover advanced topics such as extending a NextJS app, enabling localization, and optimizing your content delivery. With our easy-to-follow tutorials and hands-on exercises, you'll quickly gain the skills and knowledge needed to build stunning web applications that meet the needs of your clients and users. So, whether you're a seasoned developer or just starting out, join us on this exciting journey and take your web development skills to the next level with Contentstack! The main tasks in the course are: 1. Create a new detail page (new content type, new NextJS Component, new CD API query) 2. Create a new gallery landing page (new content type, new NextJS Component, more complicated CD API Queries) **We also cover the following:** * Starter app overview, install, and walk through * Using CMA to read and import content * SDKs/APIs overview and introduction * SDKs/APIs deep dive with patterns/practices * Roles and Permissions * Workflow * Marketplace intro * Automation hub intro ## What we will be building ### Composable Hero Gallery Page: ![composable-heros.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png) ### Composable Hero Detail Page: ![composable-heros-detail.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png) ## Getting Started 1. **Create a new Training Instance** - Go to [https://www.contentstack.com/academy/training-instance](https://www.contentstack.com/academy/training-instance) and select **Create a Training Instance**. 2. **Download the course code from Github** - ([https://github.com/contentstack/contentstack-academy-playground](https://github.com/contentstack/contentstack-academy-playground)). 3. **Rename the .env.local.sample file** to .env.local and update the following configuration properties: ![rename-sample.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png) 4. **Build the project** with 'npm i'. 5. **Run the website** with 'npm run dev'. #### Key takeaways - Connect **What We'll Build** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 02 — Getting Started #### Video details #### At a glance - **Title:** Dev-getting Started With The Contentstack Academy Website - **Duration:** 3m 44s - **Media link:** https://cdn.jwplayer.com/previews/HoLoBca0 - **Publish date (unix):** 1716254996 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113744 kbps - video/mp4 · 180p · 200p · 152758 kbps - video/mp4 · 270p · 300p · 180832 kbps - video/mp4 · 360p · 400p · 207568 kbps - video/mp4 · 406p · 450p · 223975 kbps - video/mp4 · 540p · 600p · 281504 kbps - video/mp4 · 720p · 800p · 365707 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/HoLoBca0-120.vtt` #### Video transcript Hi, welcome to the Content Stack Academy. In this video, we're going to set up and configure our web application that we're going to use for this course. Let's get started. You should already have your starter training stack. If not, then come here to this website for Academy and create a training instance. The next thing you're going to want to do is go to the GitHub repository Content Stack Academy Playground and download the code. Once you do those two things, then you should have access to a Content Stack stack and go ahead and log in and you should be on your dashboard. The first thing we want to do is actually come over here to Settings, and then we're going to go to Tokens, and select the Development Token. These are the two properties that we're going to need to add to our config file. Next step is we're going to go over to Visual Studio Code or your local development environment, and you're going to first rename this file and local sample. You need to be in a code environment to do that. Sometimes the file system will hide this file because it starts with a dot, so it's just easier to do it right here. Let's go ahead and rename this and then take out sample. So it should be .m.local. That's my local properties file that's going to tell my application where to find Content Stack. Let's open that file and then let's update our keys. Here we can see that we've got our API key and delivery token. So I'm going to go ahead and copy that, paste it here. I'm also going to grab my delivery token and paste it there. Our environment is development. Now for live preview, we're going to create a management token. So let's do that right now. Let's go to management tokens, add a new management token. Here I'm going to call it my CRUD token, create, read, update, and delete, because that's what it's going to do. We can also call it our live preview token. Here in description, I can say live preview. Let's go ahead and keep going down. It's all branches, branch alias, it has read and write permissions, and finally click generate token. The name is not unique. So let me just call this my live preview token. I copied this management token out right now. It's going to be hidden after this screen disappears, because it is a sensitive token, because we can update and change content in Content Stack. Click done. Now let's go back into our code, and go over here and add in our management token. The rest of the values look good, so let's go ahead and save. At this point, we want to build our project. So we're going to go down to the terminal, and here we're just going to do npm i. After this, just takes a couple of seconds to load and to build. Then after that, we're going to run npm run dev, and that's going to run the website locally. And that's it. So it's either going to run under localhost 3000, 3001, 3002, depending on what kind of local websites you have running. And then it's going to open a new browser, and you'll see our training site. Then over here, you can go also to Composable Heroes, for example, and see our Composable Hero homepage. And we've also got a detail page here that you can view. And this is the content that we're going to be building in the course today. Thank you very much for watching this video, and see you soon. #### Key takeaways - Connect **Getting Started** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 03 — Big Picture Architecture #### Lesson text # **Architecture** ## **Big Picture Architecture Diagram** ### **Backend** The Backend of Contentstack is the CMS with the ability to create and publish content.  **The focus here is on editor ease-of-use by providing a simple, powerful and flexible UI for content creation and management.**  In addition to the out of the box functionality, we also provide an ability to extend the interface by creating UI Extensions using our App SDK and connect to 3rd-party applications such as DAM providers, Analytics, E-Commerce platforms and more. ### **Frontend** The focus on the frontend is high-performance for your website and web application. APIs and SDKs are provided to the developer for using in their applications to perform read-only queries to the content.  The Content Delivery APIs use an internal CDN to cache all queries to the platform which results in higher performance for all your web applications.  This is also where we find the Images API for delivering image assets. ![Architecture.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40df19fbdfa691c4/664c7d55a671fa7891f218bf/Architecture.png) ## **Environments** * One Stack can publish to multiple Environments.  Think of Environments as “publish destinations”. * Each Environment has one Delivery Token, otherwise known as an Access Token.  That token is unique per Environment. * Each Stack has an API key.  There is only 1 API key per Stack and it is unique. * Most API calls will require both an API token and a Delivery / Access Token. ![environment.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta9f0e57d8a3c5a6e/664c7d9f79abee8ebd3d1534/environment.png)**Multi-Stack Architecture Diagram** ![multi-stack.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd1dd48a1fcbec491/664c7de28a66292552b1397b/multi-stack.png) #### Key takeaways - Connect **Big Picture Architecture** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 04 — Architecture Walkthrough #### Video details #### At a glance - **Title:** Dev-big Picture Architecture - **Duration:** 2m 53s - **Media link:** https://cdn.jwplayer.com/previews/gu1hi4sL - **Publish date (unix):** 1716254996 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 114030 kbps - video/mp4 · 180p · 200p · 137534 kbps - video/mp4 · 270p · 300p · 148470 kbps - video/mp4 · 360p · 400p · 162344 kbps - video/mp4 · 406p · 450p · 169505 kbps - video/mp4 · 540p · 600p · 193874 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/gu1hi4sL-120.vtt` #### Video transcript Hi, welcome to ContentStack. In this video, we'll take a look at the front-end and the back-end architecture. First, let's start with the front-end. Here we have a web application and our website visitors are visiting the application and that application is querying ContentStack for published content. ContentStack publishes the content in JSON format and that's published to the content delivery system. On top of the content delivery platform, we also have a REST API and a GraphQL API. These APIs are read-only. When you request content from the API, internally ContentStack looks into the CDN and retrieves the content from the CDN. This means it's really fast and high performance for your web applications using the ContentStack API. In addition to these APIs, we also provide several SDKs to make it fast and easy for you to get started with the platform. Some of the SDKs that we have for the front-end include JavaScript, PHP, Java, .NET, Node.js. We also have Python, Ruby, and several other SDKs here for web applications. On the mobile side, we have SDKs for iOS, Android, Dart, Flutter, and also React Native. And finally, we also have customers that use ContentStack content inside the game or also inside a chat application. And again, this is the front-end application, the front-end APIs that really focus on high performance and read-only. We also have a Postman collection that gives you examples of how to use these APIs using the REST API and also the GraphQL API. Now, moving to the back end of the platform, the idea is really about making it the best user experience for editors and our authors and our end users. What do we mean by that is that we provide a very good, easy-to-use interface out of the box to update, edit, create content, and publish that content. In addition to that, we provide extensions and marketplace applications that connect to third-party systems such as DAMN providers, e-commerce platforms, or search engines. When you publish content from ContentStack, that content goes out to content delivery. And again, that's JSON. Now, if you want to trigger automatic events on publish or save, you can do that with webhooks. Here, you can listen to a save, publish, update, or workflow event. That webhook can call a serverless function, and that can go ahead and send the content to something like Amazon's recognition API for tagging or to a search engine like Algolia for indexing. This is also a way that you can invalidate a cache if you have a custom cache layer in your web application. Recently, ContentStack released a product called Automation Hub, and that sits right over here next to webhooks. And again, it listens on save, publish, update, and workflow and provides a low-code, no-code solution to provide the similar functionalities that you can find from webhooks. That's about it for this video. Thank you for watching. See you next time. #### Key takeaways - Connect **Architecture Walkthrough** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 05 — Environments Walkthrough #### Video details #### At a glance - **Title:** Dev-environments - **Duration:** 3m 5s - **Media link:** https://cdn.jwplayer.com/previews/xDslMX1l - **Publish date (unix):** 1716254996 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113540 kbps - video/mp4 · 180p · 200p · 139607 kbps - video/mp4 · 270p · 300p · 154759 kbps - video/mp4 · 360p · 400p · 171856 kbps - video/mp4 · 406p · 450p · 182649 kbps - video/mp4 · 540p · 600p · 214541 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/xDslMX1l-120.vtt` #### Video transcript Hi, welcome to ContentStack. In this video, we're going to talk about environments and how we can create them in ContentStack and what it means when we use environments. In ContentStack environments, you can think of them as publish environments. It's where we publish content to, and also where we request content from our web application. In this diagram, you can see that we have our backend stack, and that stack publishes to three environments, Dev, Preview, and Production. Each of these environments also has roles and permissions applied, so the user logging into ContentStack is only going to be allowed to publish to the environment that they have permissions for. So we can have production content editors with access to Preview and Production, and developers with access to Development. You can have up to 10 of these environments per stack, and it really creates a way to quickly and easily stand up new environments. You can have dedicated environments for QA or Preview, and it's a really great feature of ContentStack. For the website and web application, when you want to query content, published content, then you need to use a delivery token, otherwise known as an access token. So within our website or web application, you will see both an API key and a delivery token, and that's what we use to query the content from that environment. Let's take a look at the backend and see how that works in ContentStack. So over here under your settings, you can go ahead and click on Environments, and here I have Production, Preview, and Development created. What that allows me to do is to go over to Entries and select an entry here and click the Publish icon, and then choose one of these environments to publish to. Each environment also has a URL, and where you see that URL is actually right here when you hover over the icon. The URL for the environment is the first thing that's appended here, so you can see localhost for development or also a URL for my production. Preview doesn't have an environment URL set. So again, we can see that under Settings, Environments, and here you can see where those URLs are set. Behind each environment, we also have a token, and so that's these delivery tokens. Currently, I only have a development token, so if we go back to our diagram, then we can see over here that I can query content published to development. At this moment in my application, I don't have a way to query preview or production. So if I wanted to set that up, what I'd do is just make a new delivery token, call this my preview token, and specify my preview environment where I want to pull content from. And that's it. It's just that easy. And we click Generate Token, and okay, I've got a selected branch here. I'm going to do my main branch, and again, Generate Token, and that's it. We've got our Stack API key and delivery token, and we can already immediately start using ContentStats' content delivery API to query for published content. That's it for this video. See you in the next one. #### Key takeaways - Connect **Environments Walkthrough** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 06 — Registration #### Lesson text Please link on this link to [Register Now](https://www.contentstack.com/explorerindia) #### Key takeaways - Connect **Registration** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 07 — Test Lesson #### Video details #### At a glance - **Title:** Field Visibilty Rules - **Duration:** 3m 7s - **Media link:** https://cdn.jwplayer.com/previews/wY3lqOiw - **Publish date (unix):** 1713726667 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113633 kbps - video/mp4 · 180p · 180p · 139184 kbps - video/mp4 · 270p · 270p · 152011 kbps - video/mp4 · 360p · 360p · 167146 kbps - video/mp4 · 406p · 406p · 175781 kbps - video/mp4 · 540p · 540p · 196990 kbps - video/mp4 · 720p · 720p · 226766 kbps - video/mp4 · 1080p · 1080p · 303853 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/wY3lqOiw-120.vtt` #### Video transcript Welcome back. In this walkthrough, we're going to go ahead and implement field visibility rules for the news article content type. Field visibility rules allow you to dynamically display fields based on certain conditions. The objective here is to display the main image field within this news article whenever the featured article Boolean toggle switch is selected to true. So let's go ahead and get started by adding the field visibility rule. So we'll go ahead and click here. You can see we don't currently have any rules defined and that a field visibility rule allows us to show or hide fields dynamically. So let's go ahead and create a new rule, and you can see this opens up a new modal with a rule that contains two parts, and you can have multiple rules. But essentially, if we look in this rule, you have essentially two parts. You have the ability to add the condition as well as add an action, and you can add multiple conditions or add multiple actions as well. We also can choose here whether we want all conditions to be met before an action is triggered or if we want any, meaning any one of the conditions to be met for the action to be triggered. So let's go ahead and select all, and we'll go ahead and select from this dropdown here. We're going to select the featured article field, and when it is true, we're going to have this action fire, and we're going to put show, and we're going to select the main image. So now we have when the featured article is true, we will show the main image. We can go ahead and save this, and now we see that it's been updated successfully. Now we can navigate over to our entries section, and we can go to a news article entry, and we'll just create a new one here, and we see this featured article toggle switch, but currently there is no main image field being displayed. So what we'll go ahead and do is turn on the featured article toggle switch, and now that it's set to true, we see this main image field appear, and now as an editor, I can go ahead and choose an image, or I can choose to not have this featured article display a main image, and by implementing a field visibility rule, you create a dynamic display of this main image field within the news article. Keep in mind there are limitations to field visibility rules, so always consult the Content Stack documentation or visit us at the Content Stack community. #### Lesson text This is testing text lessons #### Key takeaways - Connect **Test Lesson** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 08 — Copy of Test Lesson #### Video details #### At a glance - **Title:** Ai-assistant(rough-cut) - **Duration:** 7m 40s - **Media link:** https://cdn.jwplayer.com/previews/cGwQb9lq - **Publish date (unix):** 1711384462 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113602 kbps - video/mp4 · 180p · 180p · 162126 kbps - video/mp4 · 270p · 270p · 193295 kbps - video/mp4 · 360p · 360p · 215077 kbps - video/mp4 · 406p · 406p · 233818 kbps - video/mp4 · 540p · 540p · 291350 kbps - video/mp4 · 720p · 720p · 386376 kbps - video/mp4 · 1080p · 1080p · 694256 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/cGwQb9lq-120.vtt` #### Video transcript AI Assistant can simplify and improve the creation of your content by integrating popular large language models directly within the Content Stack platform. This means you don't have to juggle between our platform and separate applications to leverage advanced AI writing capabilities. It's like having a clever coworker at your disposal eager to help you elevate your writing efficiency and quality. This seamless integration ensures your website has compelling content and conveys your message distinctly to your audience, all the while keeping your workflow streamlined and efficient. To get started, we need to install AI Assistant through Marketplace. To do this, make sure you're at the Organization level within Content Stack. If you're not sure, just click the Content Stack icon in the top left-hand corner. Then, once you're at the Organization level, on the left-hand side, you'll notice there's a Marketplace icon. Once you click that, Marketplace will load. And you'll notice there's a Collections section, and here you can choose Apps. Once you select Apps, apps on the right-hand side will load in tiles, and AI Assistant should appear in the top row, but if it doesn't, feel free to perform a search with the Search text field. When you hover over AI Assistant, you'll notice you get an Install button. Go ahead and click it to start the installation process. The first thing that you have to do is you have to select the stack in which you want to install AI Assistant. In this case, I want to choose Compass Starter. I'll go ahead and accept the terms and conditions, and then I'll click Install. Once you click Install, the Configuration screen will load. You have two options for the platform configuration. You can choose Managed by Content Stack, or if you want to use your own credentials to use your own provider, you can select Custom Credentials and provide that information, like your API key, what provider you're using, and the API model. For this example, we're going to choose Managed by Content Stack. A quick sidebar, when using the Content Stack-powered API key, it's important to know that we maintain strict privacy standards that follow GDPR guidelines, so you can use AI Assistant with peace of mind. Now let's go ahead and click Save and Proceed. This will bring us to the Advanced Configuration section. For our purposes in this video, we don't need to configure anything further, so we'll just click Next. When you do that, you should get confirmation that the configuration was successful. Now all you have to do is move down to the bottom right and click the Save button. Now the configuration has been updated and AI Assistant has been installed on your stack. To confirm that, click Open Stack, which will in fact open the stack that you installed AI Assistant to. So now what we want to do is move over to the Entries section. On the left-hand side, you can click the Entries button. Now I have an article that I've been working with called Top Travel Destinations for 2024. If I select that to enter the article, I have a couple different options here in terms of how I can use AI Assistant to improve this article. First of all, I may want to update the title. I may want to update it for SEO. As you hover over the title section, you'll notice there's an AI Assistant icon. Go ahead and click it, and when you do, AI Assistant will load on the right-hand side. The section we want to take a look at here is the Replace Field Content, and you'll notice we have a couple different commands. The command I want to look at is Optimize Text for SEO. When you click that, AI Assistant will generate content that is now a more optimized version of the title. You have a couple options. You can try again if you don't like the results. You can cancel out of it, or you can accept it. For our purposes, I'm going to go ahead and click Accept. So that's how you can modify existing content using AI Assistant, but you can also generate new content using AI Assistant. If I scroll down, you'll notice that there's a summary, which is empty. If I want to create a summary, I can do that, but specifically, I want to create a summary based upon the content I have in this text field. So again, in the Summary section, as I hover over it, I see the AI Assistant icon. I can go ahead and click it, and in this case, what I want to do is scroll down towards the bottom, and what I want to select in this area where we're going to generate based upon another field is a summary. So I'll click Summary, and then that panel expands to show me the different fields that I can use as the source for this summary. And in this case, you'll notice I have a Content text field, so I'm going to select Content. When I do, AI Assistant will generate the content. You can either accept it, you can try again to have AI Assistant regenerate it, and once you're happy with the results, you can click Accept. Finally, if we scroll down further, you'll notice that there's a section for some tags. I'll go ahead and hover over the Tags section to see the AI Assistant icon. When I click it, again, what I want to do is generate content, in this case, SEO tags. I want to generate it based upon that same Content text field. So when I select that option, AI Assistant will generate tags based upon the contents found within that text field. Again, I'll go ahead and click Accept. So you'll notice that there's a lot of capability within this AI Assistant menu. Again, if I scroll up towards the top, if I click the AI Assistant button for Summary, I can change this text further by optimizing it for SEO, which we looked at earlier. We can change the tone to be more persuasive, straightforward, friendly, or professional. We can also change the length to make it longer or shorter. And in this case, you also have the option to translate to the current locale language. Remember, AI Assistant doesn't just work for creating new content, but you can also modify existing content the same way. Also know, once you install AI Assistant, it becomes available throughout the entire stack. AI Assistant in Content Stack is a powerful tool that enhances your creation process. The world of content creation is ever-evolving, and AI and other technologies are optimizing the editing experience. Tools like AI Assistant allow you to stay at the forefront, captivating your audience with every word. So go ahead, explore all the possibilities, and let AI Assistant transform the way you work and create content in Content Stack. #### Key takeaways - Connect **Copy of Test Lesson** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Resources & references | Page | Companion Markdown | | --- | --- | | /courses/copy-of-techsurf-test/what-we-ll-build | /academy/md/courses/copy-of-techsurf-test/what-we-ll-build.md | | /courses/copy-of-techsurf-test/getting-started | /academy/md/courses/copy-of-techsurf-test/getting-started.md | | /courses/copy-of-techsurf-test/big-picture-architecture | /academy/md/courses/copy-of-techsurf-test/big-picture-architecture.md | | /courses/copy-of-techsurf-test/architecture-walkthrough | /academy/md/courses/copy-of-techsurf-test/architecture-walkthrough.md | | /courses/copy-of-techsurf-test/environments-walkthrough | /academy/md/courses/copy-of-techsurf-test/environments-walkthrough.md | | /courses/copy-of-techsurf-test/registration | /academy/md/courses/copy-of-techsurf-test/registration.md | | /courses/copy-of-techsurf-test/test-lesson | /academy/md/courses/copy-of-techsurf-test/test-lesson.md | | /courses/copy-of-techsurf-test/copy-of-test-lesson | /academy/md/courses/copy-of-techsurf-test/copy-of-test-lesson.md | ## Supplement for indexing ### Content summary The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web… The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web application. Download Playground Here (https://github.com/contentstack/contentstack-academy-playground) Throughout the course, learners will receive detailed instruction on how to utilize Contentstack's features to build robust and scalable web applications. They will gain a deep understanding of the platform's architecture, enabling them to develop applications that take full Topics Covered Management and Images Content Delivery API Using the Images API Creating the Hero Detail Page Creating the Hero Gallery Page Design Patterns with Content Types Deploying the Starter App with Contentstack Launch Importing Content with the CLI and CMA Working with Roles and Permissions Workflow Webhooks Automate - Using an HTTP Connector to Send Data to a 3rd Party System What is the Contentstack Apps Marketplace? Using Marketplace Apps Installing the NextJS Starter App with the CLI Helpful Developer Resources ! image\ 1.svg (https://images.contentstack.io/v3/assets/bltebc53cfaf0d ### Retrieval tags - contentstack - cms - composable - headless cms - learn contentstack - copy-of-techsurf-test - What - Build - Getting - Started - Big - Picture - Architecture - Walkthrough ### Indexing notes Chunk at each "### Lesson NN — Title" heading; copy lesson_id and topics from the preceding HTML comment into chunk metadata for RAG filters. Course slug: copy-of-techsurf-test. Union of lesson topic tokens: What, Build, Getting, Started, Big, Picture, Architecture, Walkthrough, Environments, Registration, Test, Lesson, Copy. Do not embed or retrieve LMS-only quiz items or mastery exam answer keys from this export. ### Asset references | Label | URL | | --- | --- | | composable-heros.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png` | | composable-heros-detail.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png` | | rename-sample.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png` | | Video thumbnail: Getting Started | `https://cdn.jwplayer.com/v2/media/HoLoBca0/poster.jpg?width=720` | | Architecture.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40df19fbdfa691c4/664c7d55a671fa7891f218bf/Architecture.png` | | environment.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta9f0e57d8a3c5a6e/664c7d9f79abee8ebd3d1534/environment.png` | | multi-stack.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd1dd48a1fcbec491/664c7de28a66292552b1397b/multi-stack.png` | | Video thumbnail: Architecture Walkthrough | `https://cdn.jwplayer.com/v2/media/gu1hi4sL/poster.jpg?width=720` | | Video thumbnail: Environments Walkthrough | `https://cdn.jwplayer.com/v2/media/xDslMX1l/poster.jpg?width=720` | | Video thumbnail: Test Lesson | `https://cdn.jwplayer.com/v2/media/wY3lqOiw/poster.jpg?width=720` | | Video thumbnail: Copy of Test Lesson | `https://cdn.jwplayer.com/v2/media/cGwQb9lq/poster.jpg?width=720` | ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` | | image\_1.svg | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt859e86a3aeda37a1/65f182a2f50f9a9a1c7bf58c/image_1.svg` | | composable-heros.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png` | | composable-heros-detail.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png` | | rename-sample.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png` | | Architecture.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40df19fbdfa691c4/664c7d55a671fa7891f218bf/Architecture.png` | | environment.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta9f0e57d8a3c5a6e/664c7d9f79abee8ebd3d1534/environment.png` | | multi-stack.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd1dd48a1fcbec491/664c7de28a66292552b1397b/multi-stack.png` | | Register Now | `https://www.contentstack.com/explorerindia` |