--- sourceDocument: Brazil Build or modify applications sourceDocumentLink: https://www.servicenow.com/docs/r/application-development Release : - brazil ft:locale : - en-US ft:publication_title : - Brazil Build or modify applications ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- # Create custom components using ServiceNow CLI # Create custom components using ServiceNow CLI {#ariaid-title1} Release version: Brazil Updated September 10, 2026 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete. ## Summary of Create custom components using ServiceNow CLI This documentation explains how ServiceNow customers can develop custom UI components using the Next Experience UI Framework and theui-componentextension of the ServiceNow CLI. Components are reusable building blocks for creating tailored user interfaces that improve agent and customer experiences by providing quick access to important data and supporting unique omni-channel environments. Show full answer Show less While the Next Experience Design System offers a library of customizable components, developing your own components enables personalization when existing components don't meet your specific requirements. ## Key Features * **Next Experience UI Framework:** A JavaScript framework to build reusable web components with encapsulated scope, supporting properties, slots, and actions for customization within Workspaces. * **ui-component CLI extension:** Provides tools to scaffold component projects, run local development servers for testing, build components, and deploy them to ServiceNow instances efficiently. * **Data access:** Components can retrieve platform data via the Http Effect API or query data using GraphQL by creating custom schemas. * **Application scope:** Components are deployed within scoped applications on your instance, with naming conventions enforcing a namespace format to avoid conflicts. The CLI can auto-generate this scope or it can be manually specified. ## Prerequisites * Familiarity with web component concepts and JavaScript development. * Knowledge of Node Package Manager (npm) and having Node.js installed locally. * ServiceNow CLI installed on your development machine. ## Practical Applications * **Virtual Agent:** Create custom components to gather input or display information within the Virtual Agent client interface. * **Agent Workspace:** Use custom components to build tailored Workspace interfaces that meet your company's agents' specific needs. ## Benefits for ServiceNow Customers * Personalize agent and customer UI to enhance productivity and reduce context switching. * Integrate and consolidate data from your unique omni-channel environment using APIs. * Reuse components across multiple applications to maintain consistency and reduce development effort. Develop custom components using the Next Experience UI Framework and the ui-component extension. Components are reusable building blocks that you use to create a custom user interface. The Next Experience Design System comes with a set of customizable components that you can drag into your custom UI. Develop your own components if you can't find what you need in the Next Experience Design System library. To see the Next Experience Design System library, visit the [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades). ## Benefits of creating custom components {#custom-components__section_vc3_rrj_xkb} Developing custom components lets you: * Personalize a UI according to your agent, customer, and company needs. * Make your employees more effective and reduce context switching with quick access to important data and information. * Accommodate your company's unique omni-channel environment using APIs to consolidate your data. {#custom-components__ul_n3w_trj_xkb} For example, you might want to create a component that displays the cases associated with an SLA, or that tracks the active chats in a particular queue. You can use the Next Experience UI Framework and the ui-component extension to develop the component you need, and access data from your platform using the [Http Effect API](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/ui-framework/api-reference/effect-http). You can also query platform data using GraphQL by creating a custom schema. For more information, see [Scripted GraphQL](https://www.servicenow.com/docs/access?context=scripted-graph-ql&version=brazil&pubname=brazil-api-reference&ft:locale=en-US). ## What to know before you begin {#custom-components__section_xjb_y5h_3kb} Before you start designing and building your component, make sure you have: * Some general knowledge of web component concepts, development, and design. * JavaScript knowledge to define the component behavior. * Knowledge of Node Package Manager (npm). * The most recent version of Node.js installed on your local machine. For more information, see, [Node.js](https://nodejs.org). * The ServiceNow CLI installed on your machine. {#custom-components__ul_ozv_4d3_3kb} ## Next Experience UI Framework {#custom-components__section_gc4_2cw_pkb} The Next Experience UI Framework is a JavaScript framework that lets you extend your apps and build web components that are reusable throughout your applications. Using the Next Experience UI Framework lets you: * Create a single component to use in multiple places across your applications. * Encapsulate the component's scope to prevent conflicts with other code. * Add properties, slots, and actions to your component, allowing users to customize the component every time they use it in a Workspace. {#custom-components__ul_ujt_xk5_rkb} For more information, see the [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/ui-framework/getting-started/introduction). ## ui-component extension and development flow {#custom-components__section_wdv_hsv_pkb} The ui-component extension is an extension to the ServiceNow CLI that lets you develop custom components using the Next Experience UI Framework. With the ui-component extension, you can: * Create the set of files required to develop a component, or project scaffolding. * Start a local development server to test your component. * Build a component project and deploy it to a ServiceNow instance. {#custom-components__ul_dfn_wb4_rkb} For more information, see the [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started). ## Application scope {#custom-components__section_qjj_w4t_tkb} When you deploy a Next Experience UI Framework component, it deploys into a scoped application on the instance. You can provide an application scope for the component to use as a namespace identifier. Use the namespace identifier guidelines for application development on the instance. For more information, see [Application scope](https://www.servicenow.com/docs/mfpDASazxpd1W0MbyVFDYQ "Application scoping protects applications by identifying and restricting access to application files and data."). When reserving an application scope, follow these requirements: * Maximum: 18 characters. * Case: snake case. * Format: `x_customerprefix_componentname`, where: * `customerprefix` is the value in the glide.appcreator.company.code system property on your instance. * `componentname` is the value provided in the component's `name` parameter when you created the project. {#custom-components__scope-params} {#custom-components__ul_c2x_jrt_tkb} If you do not provide an application scope when creating your component project, the Now CLI creates one for you. Alternatively, you can add a value to the `scopeName` parameter in the now-ui.json file. ## Reference guide {#custom-components__section_zjs_lyz_xkb} To see the Now CLI reference guide, visit the [Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started). * **[Develop a component for Virtual Agent](https://www.servicenow.com/docs/TVtfu4KMoaxyLSFsxEisbg)** Create a custom Virtual Agent component to gather input or display information in the Virtual Agent client interface. * **[Add a component to Agent Workspace](https://www.servicenow.com/docs/lJ~Nz2~K_kOGrD7XWj7Bkg#workspace-component)** Use custom components to create a custom Workspace interface to fulfill the specific need of your company's agents.