120Empty state & starters

The first screen. A blank composer with a blinking cursor tells a beginner nothing about what this thing can do, so the empty state is the capability list: four things a student actually wants, phrased the way a student would say them, each one a real prompt that fills the composer on click.

Use it for

A new conversation, and the signed-out gate — the promise and the product should match
Starters that span the four jobs: explain, review my code, plan my learning, help with my career

Not for

Filling the composer AND sending: the student almost always edits a word first, and a question they did not finish reading is a wasted turn
Cute example prompts nobody would type. “Write a haiku about Apex” teaches a student the tool is a toy

New conversation

What are we working on?

Ask about a lesson, paste code that will not deploy, or get a route to your next certification.

markup

<div class="ns-aiwelcome" style="max-inline-size:44rem;margin-inline:auto">
  <span class="ns-aiwelcome__mark" aria-hidden="true"><i class="ph ph-sparkle"></i></span>
  <div>
    <h2 class="ns-aiwelcome__title">What are we working on?</h2>
    <p class="ns-aiwelcome__lede">Ask about a lesson, paste code that will not deploy, or get a route to your next certification.</p>
  </div>
  <div class="ns-aisuggest">
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-book-open-text" aria-hidden="true"></i>Explain</span>
      <span class="ns-aisuggest__text">What is the difference between a workflow rule and a record-triggered flow?</span>
    </button>
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-code" aria-hidden="true"></i>Review</span>
      <span class="ns-aisuggest__text">Here is my trigger — why does it fail on a 200-record load?</span>
    </button>
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-flag-banner-fold" aria-hidden="true"></i>Plan</span>
      <span class="ns-aisuggest__text">Give me a six-week route to Platform Developer I.</span>
    </button>
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-briefcase" aria-hidden="true"></i>Career</span>
      <span class="ns-aisuggest__text">What should a junior admin have on their resume?</span>
    </button>
  </div>
</div>

In a lesson

The embedded panel's version: three starters, all about the paragraph in front of the student, because that is the only thing they can be about.

Stuck on this lesson? Start here.

markup

<div class="ns-aiwelcome" style="max-inline-size:32rem">
  <div>
    <p class="ns-aiwelcome__lede">Stuck on this lesson? Start here.</p>
  </div>
  <div class="ns-aisuggest">
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-lightbulb" aria-hidden="true"></i>Simplify</span>
      <span class="ns-aisuggest__text">Explain this section as if I have never written a line of Apex.</span>
    </button>
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-terminal-window" aria-hidden="true"></i>Example</span>
      <span class="ns-aisuggest__text">Show me the same thing with real field names.</span>
    </button>
    <button type="button" class="ns-aisuggest__item">
      <span class="ns-aisuggest__kicker"><i class="ph ph-exam" aria-hidden="true"></i>Test me</span>
      <span class="ns-aisuggest__text">Ask me three questions on this lesson.</span>
    </button>
  </div>
</div>

Accessibility contract

Starters are real buttons, so they are reachable and announced as actions
The heading is a real heading — this is the page's title when the thread is empty