Add selected GPT-Live guide illustrations

fern/assets/styles.css

@@ -383,4 +383,48 @@ html.dark button[data-highlighted] .fern-api-property-meta {
 :is(.dark) .subscribe-form-message.error {
   color: #fca5a5;
   background-color: #7f1d1d;
-}
+}
+
+/* GPT-Live illustrations follow the docs theme and use a compact drawing on phones. */
+.gpt-live-illustration {
+  max-width: 640px;
+  margin: 2rem auto;
+}
+
+.gpt-live-illustration img {
+  display: none;
+  width: 100%;
+  height: auto;
+  margin: 0;
+}
+
+.gpt-live-illustration .gpt-live-art-light {
+  display: block;
+}
+
+.dark .gpt-live-illustration .gpt-live-art-light {
+  display: none;
+}
+
+.dark .gpt-live-illustration .gpt-live-art-dark {
+  display: block;
+}
+
+@media (max-width: 540px) {
+  .gpt-live-illustration .gpt-live-art-light,
+  .dark .gpt-live-illustration .gpt-live-art-dark {
+    display: none;
+  }
+
+  .gpt-live-illustration .gpt-live-art-light-compact {
+    display: block;
+  }
+
+  .dark .gpt-live-illustration .gpt-live-art-light-compact {
+    display: none;
+  }
+
+  .dark .gpt-live-illustration .gpt-live-art-dark-compact {
+    display: block;
+  }
+}

fern/gpt-live/design.mdx

@@ -88,6 +88,13 @@ Start each piece of work as soon as its inputs are known, and use the conversati
 - A time can be chosen only after the open times are known.
 - A booking can be announced only after the booking tool confirms it.
 
+<div className="gpt-live-illustration">
+  <img className="gpt-live-art-light" src="../static/images/gpt-live/dependency-cairn-light.svg" alt="Stacked stones show the dependencies for booking: service, location and date support open times, a chosen time and caller agreement. The name can be gathered independently." loading="lazy" />
+  <img className="gpt-live-art-dark" src="../static/images/gpt-live/dependency-cairn-dark.svg" alt="Stacked stones show the dependencies for booking: service, location and date support open times, a chosen time and caller agreement. The name can be gathered independently." loading="lazy" />
+  <img className="gpt-live-art-light-compact" src="../static/images/gpt-live/dependency-cairn-light-compact.svg" alt="Stacked stones show the dependencies for booking: service, location and date support open times, a chosen time and caller agreement. The name can be gathered independently." loading="lazy" />
+  <img className="gpt-live-art-dark-compact" src="../static/images/gpt-live/dependency-cairn-dark-compact.svg" alt="Stacked stones show the dependencies for booking: service, location and date support open times, a chosen time and caller agreement. The name can be gathered independently." loading="lazy" />
+</div>
+
 The useful test for any question during a lookup is whether the outstanding work still answers the caller's need after they reply. In this example, the lookup tool returns every open time for the requested day and location. So if the caller says "afternoon, ideally after three" while that lookup runs, the result still covers it, and the assistant can filter. If the caller says "Actually, can we do Riverside instead?", the running lookup no longer answers the request, and a new one is needed.
 
 That's why the example lookup returns the whole day rather than taking a time-of-day argument. When you design your own tools, return enough to answer the likely follow-up questions without another round trip, as long as the result stays short.
@@ -293,6 +300,13 @@ Existing squads and assistant handoffs aren't supported with GPT-Live. See [Migr
 
 The speaker hears the caller's voice, but the reasoner works from the transcript, and a transcript can contain mistakes. A name, reference number, or date that's slightly wrong in the transcript becomes a wrong tool argument.
 
+<div className="gpt-live-illustration">
+  <img className="gpt-live-art-light" src="../static/images/gpt-live/name-prism-light.svg" alt="One spoken name branches into three possible spellings, with Siobhan highlighted." loading="lazy" />
+  <img className="gpt-live-art-dark" src="../static/images/gpt-live/name-prism-dark.svg" alt="One spoken name branches into three possible spellings, with Siobhan highlighted." loading="lazy" />
+  <img className="gpt-live-art-light-compact" src="../static/images/gpt-live/name-prism-light-compact.svg" alt="One spoken name branches into three possible spellings, with Siobhan highlighted." loading="lazy" />
+  <img className="gpt-live-art-dark-compact" src="../static/images/gpt-live/name-prism-dark-compact.svg" alt="One spoken name branches into three possible spellings, with Siobhan highlighted." loading="lazy" />
+</div>
+
 For anything the task depends on, have the assistant read it back before acting:
 
 > **Caller:** It's under Siobhan.
@@ -341,6 +355,13 @@ what they say.
 
 A consistent personality doesn't require a constant pace.
 
+<div className="gpt-live-illustration">
+  <img className="gpt-live-art-light" src="../static/images/gpt-live/pacing-dunes-light.svg" alt="A single voice moves through closely spaced waves into wider, more spacious rhythms." loading="lazy" />
+  <img className="gpt-live-art-dark" src="../static/images/gpt-live/pacing-dunes-dark.svg" alt="A single voice moves through closely spaced waves into wider, more spacious rhythms." loading="lazy" />
+  <img className="gpt-live-art-light-compact" src="../static/images/gpt-live/pacing-dunes-light-compact.svg" alt="A single voice moves through closely spaced waves into wider, more spacious rhythms." loading="lazy" />
+  <img className="gpt-live-art-dark-compact" src="../static/images/gpt-live/pacing-dunes-dark-compact.svg" alt="A single voice moves through closely spaced waves into wider, more spacious rhythms." loading="lazy" />
+</div>
+
 | Moment | Delivery to aim for |
 | --- | --- |
 | The caller knows what they want | Short questions and concise answers |

fern/gpt-live/migrate.mdx

@@ -74,6 +74,13 @@ You can also migrate by hand through the API: create a new assistant with the GP
 
 A classic assistant has one prompt that covers both how to talk and how to do the work. GPT-Live has two. The speaker prompt shapes the conversation and says when to delegate. The reasoner prompt holds the procedures and tool rules. Neither sees the other, so rules that affect both belong in both, worded for each role.
 
+<div className="gpt-live-illustration">
+  <img className="gpt-live-art-light" src="../static/images/gpt-live/split-prompt-light.svg" alt="Prompt instructions separate into speaker and reasoner bundles. One shared rule branches into both." loading="lazy" />
+  <img className="gpt-live-art-dark" src="../static/images/gpt-live/split-prompt-dark.svg" alt="Prompt instructions separate into speaker and reasoner bundles. One shared rule branches into both." loading="lazy" />
+  <img className="gpt-live-art-light-compact" src="../static/images/gpt-live/split-prompt-light-compact.svg" alt="Prompt instructions separate into speaker and reasoner bundles. One shared rule branches into both." loading="lazy" />
+  <img className="gpt-live-art-dark-compact" src="../static/images/gpt-live/split-prompt-dark-compact.svg" alt="Prompt instructions separate into speaker and reasoner bundles. One shared rule branches into both." loading="lazy" />
+</div>
+
 For example, a classic prompt for an appointment assistant at Example Service Studio, a fictional business, might read:
 
 ```text title="Before: one classic system prompt"

fern/gpt-live/testing.mdx

@@ -100,6 +100,13 @@ Callers notice two kinds of delay, and they have different causes:
 
 Measure them separately. The call's messages and your service's logs have timestamps for delegations and tool calls, and the recording shows when the caller heard each part.
 
+<div className="gpt-live-illustration">
+  <img className="gpt-live-art-light" src="../static/images/gpt-live/two-delays-light.svg" alt="Two intervals begin at the same moment: a short interval to the first reply and a longer interval to the result." loading="lazy" />
+  <img className="gpt-live-art-dark" src="../static/images/gpt-live/two-delays-dark.svg" alt="Two intervals begin at the same moment: a short interval to the first reply and a longer interval to the result." loading="lazy" />
+  <img className="gpt-live-art-light-compact" src="../static/images/gpt-live/two-delays-light-compact.svg" alt="Two intervals begin at the same moment: a short interval to the first reply and a longer interval to the result." loading="lazy" />
+  <img className="gpt-live-art-dark-compact" src="../static/images/gpt-live/two-delays-dark-compact.svg" alt="Two intervals begin at the same moment: a short interval to the first reply and a longer interval to the result." loading="lazy" />
+</div>
+
 When the task takes too long, try these, one at a time, and check that the outcome is still correct after each change:
 
 | Cause | What to try |

fern/gpt-live/tools.mdx

@@ -30,6 +30,13 @@ A tool's inputs and results shape the conversation as much as the prompts do.
 
 **Return enough to answer the likely follow-up.** The example lookup takes a service, location, and date, and returns every open time for that day. If the caller adds "ideally after three" while it runs, the result still answers the request, and the assistant can filter it without another lookup. A different day or location changes the request, so it needs a new lookup. Keep results short even when they're complete.
 
+<div className="gpt-live-illustration">
+  <img className="gpt-live-art-light" src="../static/images/gpt-live/whole-day-light.svg" alt="Available times are 10:30 AM, 2:30 PM and 4:00 PM. The after-3-PM region highlights 4:00 PM within the same result." loading="lazy" />
+  <img className="gpt-live-art-dark" src="../static/images/gpt-live/whole-day-dark.svg" alt="Available times are 10:30 AM, 2:30 PM and 4:00 PM. The after-3-PM region highlights 4:00 PM within the same result." loading="lazy" />
+  <img className="gpt-live-art-light-compact" src="../static/images/gpt-live/whole-day-light-compact.svg" alt="Available times are 10:30 AM, 2:30 PM and 4:00 PM. The after-3-PM region highlights 4:00 PM within the same result." loading="lazy" />
+  <img className="gpt-live-art-dark-compact" src="../static/images/gpt-live/whole-day-dark-compact.svg" alt="Available times are 10:30 AM, 2:30 PM and 4:00 PM. The after-3-PM region highlights 4:00 PM within the same result." loading="lazy" />
+</div>
+
 **Echo the request details.** Include the date and location in each result. When the caller changes their mind during a lookup, the earlier result may still come back, and the details make it easy to recognize as out of date.
 
 **Say what didn't happen, as well as what did.** "Availability only. Nothing has been booked" helps the assistant avoid overstating a lookup.