We're reclaiming inactive PDIs to keep them available for active builders. Learn what's changing, who's affected, and how to protect your work. Read More

Blog: Vibe Coding Your First EmployeeWorks Widget - A Walkthrough of AIUX Widget Creation

Vikram Reddy
Tera Guru

40m ago

Blog: Vibe Coding Your First EmployeeWorks Widget - A Walkthrough of AIUX Widget Creation

 

If you've built Service Portal widgets for any length of time, you know the drill: create a widget record, wire up server script, client script, HTML, CSS, test in the widget editor, repeat about forty times until the spacing looks right. It works, but it's slow, and it puts a hard floor under who can contribute. A citizen developer with a decent idea for an employee-facing card usually can't get past step one.

Employee Slate changes that calculus. It's built on the AIUX framework (the sn_aiux scoped app family), which swaps the old Angular-based Service Portal widget engine for a Lit.js and Tailwind/DaisyUI runtime. The headline feature riding on top of that new stack is what ServiceNow is calling AIUX Widget Creation, and the community has nicknamed it "vibe coding" because that's exactly what it feels like: you describe the widget in plain English, and it builds one.

I've been through this a few times now on a Zurich Patch 9 instance, and I want to walk through what actually happens, what you need before you start, and where I'd still put a human in the loop.

 

What you're actually getting

AIUX Widget Creation is a Now Assist skill, paired with a second skill called AIUX Widget Updation for editing widgets you (or a prompt) already created. Both live inside the Employee Slate admin experience, not the classic Service Portal widget editor. A few things worth knowing up front:

  • It requires a Now Assist for Creator license under an App Engine SKU. Without it, you still get the modernized Widget Builder UI, you just lose the natural-language prompt bar and have to build widgets by hand in the new framework instead.
  • Widgets generated this way are WCAG 2.2 AA compliant by default, according to ServiceNow's own claims for the feature. That's a genuinely nice change from the "we'll fix accessibility later" pattern I've seen on plenty of legacy portal widgets.
  • Existing Service Portal widgets aren't stranded. The AIUX framework includes a bridge that lets you embed Angular-based Service Portal widgets inside the new Lit-based canvas, so you're not forced into a rip-and-replace migration just to adopt this.

 

Step 1: Confirm your prerequisites

Before you go looking for the prompt bar, check three things:

  1. Your instance is on a release that supports Employee Slate and the AIUX framework (Zurich Patch 9 or later, as of this writing).
  2. Employee Slate is installed. Go to System Applications > All, search "Employee Slate," and install it. Check "Load Demo Data" if you want sample widgets to reference.
  3. You (or the admin doing the building) hold the Now Assist for Creator license. This is the gate for the conversational part of the experience. Everything else in Employee Slate works fine without it, you just fall back to manual widget building.

 

Step 2: Get to the Widget Library

From Admin Home, find the Employee Slate card and select View product overview, then Configure to land in the Admin Console. From there:

Admin Console > Canvas module > Canvas Editor > Widget Library

This is the new home for widget management. It replaces the old sp_config widget list, and it's where both the manual builder and the AI prompt bar live side by side.

[screenshot: Admin Console Canvas Editor showing the Widget Library panel with a list of out-of-box widgets like My Requests, My Calendar, and Activity Hub]

 

 

Step 3: Prompt the widget into existence

With the Now Assist for Creator license active, you'll see a prompt field at the top of the Widget Library. Describe the widget in plain language. Something like:

Create a widget that shows the logged-in user's open
incidents from the incident table, sorted by priority,
with a badge showing the count and a link to open each
record in a new tab.

The skill generates a live preview along with the underlying Lit component code. This is the part that actually feels different from prior "low-code" attempts at ServiceNow: you're not filling out a wizard, you're having a short back-and-forth. If the badge color is wrong or the sort order didn't take, you don't start over, you just prompt again: "make the badge red when count is over 5" or "sort by priority descending instead."

[screenshot: The AIUX Widget Creation prompt panel with a natural-language request typed in and a live widget preview rendering next to it]

 

 

Step 4: Refine with AIUX Widget Updation

Once a widget exists, further changes go through the companion Widget Updation skill rather than starting a new creation prompt. Same conversational pattern, but scoped to editing what's already there. This matters operationally: it's the difference between "regenerate the whole widget and hope nothing else broke" and "adjust this one thing." In practice I've found it sticks closer to the existing structure when you use the update path instead of just re-prompting creation.

 

Step 5: Drop into the code when you need to

The generated widget isn't a black box. You can open the underlying code and edit it directly, same as you would with a hand-built Lit component. I'd treat this as mandatory, not optional, before anything goes near production. Read through what got generated, check the data it's actually querying (make sure it's scoped correctly and isn't over-fetching fields you don't want exposed), and confirm client-side logic isn't doing anything you wouldn't approve in a code review. Vibe coding is great for velocity, it does not replace your governance process.

 

A few honest caveats

  • This is a fast-moving feature tied to a fast-moving framework. Table names, role names, and menu paths under the AIUX umbrella have already shifted between patches, so don't be surprised if some of the above moves slightly on your instance.
  • The license gate is real and it's per-creator, not a blanket instance setting. Budget for it if you're planning to roll this out to more than a couple of admins.
  • "Vibe coding" is a great prototyping tool. It is not a substitute for reviewing what ships. Treat every generated widget the way you'd treat a PR from a contractor you haven't worked with before: read it before you merge it.

 

Summary

AIUX Widget Creation brings natural-language, conversational widget building to Employee Slate, running on the new Lit.js-based AIUX framework instead of the classic Service Portal widget engine. It requires a Now Assist for Creator license, lives in the Admin Console's Canvas Editor Widget Library, and pairs with AIUX Widget Updation for iterative edits. Widgets come out WCAG 2.2 AA compliant and fully editable at the code level, and existing Service Portal widgets still work through the framework's compatibility bridge. It's a genuinely useful accelerator for widget prototyping, but the same code review discipline you'd apply to any custom widget still applies here, arguably more so, since the code wasn't written by someone on your team.

 

Thank you,

Vikram Karety,

Octigo Solutions INC

0 Helpfuls
  • 22 Views
0 REPLIES 0