Writing · Blog

OpenAi Atlas Browser + Web App

OpenAi Atlas Browser + Web App

Atlas-Optimized Websites (ChatGPT-First Workflows)

Concept: Build websites that are natively readable and operable by the ChatGPT (Atlas) sidebar. Instead of a separate app UI, the site is structured so agents (in the right side nav) can summarize pages, run deep research, fill forms, trigger backend actions, and schedule reminders—while users keep browsing normally.

How it works ( UX + tech ):

Readable by default: Semantic HTML + ARIA labels make every control (buttons, fields, menus) obvious to ChatGPT’s agent for reliable “click + fill” actions.

In-chat workflows: Each page exposes clear, copyable prompts (“Compare these carriers,” “Draft the quote email,” “Create a reminder”), designed for Atlas sidebar use.

Backend as the brain: Your API (via GPT Actions) handles secure reads/writes, policy logic, quoting rules, and audit trails; the site stays thin.

Connectors do the heavy lift: Email, calendar, docs, CRM, and GitHub/PM tools plug in through ChatGPT’s native integrations; the agent orchestrates from the sidebar.

User-controlled: The agent is opt-in and runs only when the user toggles the sidebar; pages never auto-execute.

Why this wins:

Zero extra frontend: Ship workflows without building a complex app UI—ChatGPT is the interface on web + mobile.

Distribution: Users discover and run your workflows inside ChatGPT, not on yet another dashboard.

Speed to value: Faster task completion (summaries, comparisons, form-filling, reminders) directly on the page where the work is happening.

Compliance & auditability: All writes route through your backend, which records decisions, evidence, and timestamps.

Example (insurance):

Agent finishes a call → views CRM page.

Atlas sidebar: “Deep-research these carriers,” then “Set a reminder,” then “Draft/send customer email.”

Your backend fetches plan data, scores options, stores the comparison, and logs the action trail.

Implementation checklist:

Semantic HTML + WAI-ARIA for all interactions.

Clear, on-page prompt blocks for common tasks.

GPT Actions spec for your API (auth, scopes, idempotency).

Robots/SEO setup to allow ChatGPT discovery (and respect opt-outs).

Copyable deep-research + follow-up prompts per page template (detail, list, compare, checkout).

In short: treat ChatGPT/Atlas as your primary UI and distribution layer; your backend is the durable system of record and decision engine.

Send Email

Email Prompt Interface

Live Preview:

Send an Email with ChatGPT

Instructions: Copy the prompt below and paste it into the ChatGPT sidebar on the right side of your screen. ChatGPT will send an email to jordanbench@me.com saying "Hello world."

Send an email to jordanbench@me.com with the following context: "Hello world."
✅ Copied to clipboard!

HTML Code:

<div style="font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; text-align: center;">
<h1 style="font-size: 1.75rem; margin-bottom: 8px;">Send an Email with ChatGPT</h1>
<p style="max-width: 600px; margin: 0 auto 20px; color: #4b5563;">
  <strong>Instructions:</strong> Copy the prompt below and paste it into the
  <em>ChatGPT sidebar on the right side of your screen</em>.  
  ChatGPT will send an email to <strong>jordanbench@me.com</strong> saying
  "Hello world."
</p>

<div style="background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; max-width: 600px; margin: 0 auto; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
  <button data-copy="#email-prompt" style="position: absolute; top: 8px; right: 8px; background-color: #10a37f; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 14px; cursor: pointer;">Copy</button>
  <pre id="email-prompt" style="white-space: pre-wrap; word-break: break-word; font-family: monospace; margin: 0; font-size: 15px; color: #1f2937;">Send an email to jordanbench@me.com with the following context: "Hello world."</pre>
  <div class="copy-success" style="margin-top: 10px; font-size: 14px; color: #065f46; opacity: 0; transition: opacity 0.3s;">✅ Copied to clipboard!</div>
</div>
</div>

Set Reminder

Follow-Up Tasks & Reminder Interface

Live Preview:

Copy a Prompt: Extract Follow-Ups & Set a Reminder

How to use: Click Copy Prompt, then paste into the ChatGPT sidebar on the right (Atlas Browser). ChatGPT will identify follow-up tasks from the transcript and set a one-time reminder for you to review them.

You are my Follow-Up Coordinator. 
Task: Given the call transcript below, do two things:
1) Extract every follow-up task with clear owners, suggested due dates, and context.
2) Schedule a one-time reminder in ChatGPT "Tasks" for **tomorrow at 9:00 AM (America/Denver)** titled:
 "Review follow-ups from Client Discovery Call – ACME."

Output requirements:
- Present tasks in a table with columns: Task, Owner, Why it matters, Suggested due date, Dependencies.
- List any ambiguities or missing info as "Open Questions."
- Confirm that you created the reminder (and show the reminder title/time).
- Draft a short recap message I can paste to Slack for my team.
✅ Copied to clipboard!
Reminder time can be edited after paste (e.g., "tomorrow at 4:40 PM").

HTML Code:

<div style="font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; max-width: 820px; margin: 0 auto;">
<h1 style="margin: 0 0 8px; font-size: 1.8rem;">Copy a Prompt: Extract Follow-Ups & Set a Reminder</h1>
<p style="margin: 0 0 16px; color: #4b5563; line-height: 1.5;">
  <strong>How to use:</strong> Click <em>Copy Prompt</em>, then paste into the
  <strong>ChatGPT sidebar on the right</strong> (Atlas Browser).
  ChatGPT will identify follow-up tasks from the transcript and set a
  <em>one-time reminder</em> for you to review them.
</p>

<div style="background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); padding: 16px; position: relative;">
  <div style="display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px;">
    <button data-copy="#reminder-prompt" style="border: 0; background: #10a37f; color: #fff; cursor: pointer; padding: 8px 14px; border-radius: 8px; font-size: 14px;">Copy Prompt</button>
  </div>
  <pre id="reminder-prompt" style="margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: #1f2937;">You are my Follow-Up Coordinator. 
Task: Given the call transcript below, do two things:
1) Extract every follow-up task with clear owners, suggested due dates, and context.
2) Schedule a one-time reminder in ChatGPT "Tasks" for **tomorrow at 9:00 AM (America/Denver)** titled:
 "Review follow-ups from Client Discovery Call – ACME."

Output requirements:
- Present tasks in a table with columns: Task, Owner, Why it matters, Suggested due date, Dependencies.
- List any ambiguities or missing info as "Open Questions."
- Confirm that you created the reminder (and show the reminder title/time).
- Draft a short recap message I can paste to Slack for my team.</pre>
  <div class="copy-success" style="margin-top: 10px; font-size: 14px; color: #065f46; opacity: 0; transition: opacity 0.3s;">✅ Copied to clipboard!</div>
  <div style="font-size: 12px; color: #4b5563; margin-top: 6px; text-align: right;">Reminder time can be edited after paste (e.g., "tomorrow at 4:40 PM").</div>
</div>
</div>

Deep Research

Insurance Agent Workflow Interface

Live Preview:

Insurance Agent Workflow — Deep Research → Reminder → Email

Use these copyable prompts with the ChatGPT Atlas sidebar.
Prompt 1 — Deep Research Carrier Comparison Atlas → Deep Research
In the ChatGPT right sidebar, toggle Deep Research first. Then paste:
You are my Insurance Research Analyst. We just completed a client call; our CRM attached the call transcript below.

GOAL:
Run deep, source-backed research comparing the specific policies mentioned on the call and recommend the best fit for the customer's stated needs and constraints.

CALL TRANSCRIPT (excerpt):
---
Customer (Taylor, 38, family of 3) asked about strong pediatric coverage, broad PPO network near Lehi, and predictable Rx costs.
Current pain points: high specialty Rx coinsurance; last year's OOP max hit in September.
Policies discussed on the call:
• CarrierA Bronze PPO 2500
• CarrierB Silver HMO 2000
• CarrierC Gold PPO 1500 + Rx Rider
• CarrierD Silver PPO 3000 (regional network)
---

RESEARCH INSTRUCTIONS (Atlas Deep Research):
1) Use Deep Research to gather current policy details from carriers & state filings (Utah), reputable brokers, and plan documents.
2) For each policy, extract at least: Monthly premium (family), Deductible, OOP Max, Coinsurance, PCP/Specialist copays, Tiered Rx copays/coinsurance incl. specialty tiers, Network scope (PPO/HMO + notable exclusions), Pre-auth requirements for specialty Rx, Pediatric coverage highlights, Historic renewal increases (if available), Notable riders/exclusions.
3) Construct a side-by-side table with columns: Policy, Network Type, Premium (family), Deductible, OOP Max, PCP Copay, Specialist Copay, Generic Rx, Brand Rx, Specialty Rx, Pediatric Coverage Notes, Network Notes, Key Exclusions, Renewal Trend (est/notes), Overall Fit Score (0–10).
4) Provide a decision brief (≤200 words) with a clear recommendation and top 3 reasons. Address the customer's biggest pain: specialty Rx predictability + PPO access near Lehi.
5) List any Open Questions / missing info and how we would confirm it.
6) Cite sources (links) for every non-obvious figure. If data conflicts, note the discrepancy.
✅ Copied to clipboard!
Prompt 2 — Create One-Time Reminder ChatGPT Tasks
Paste into ChatGPT (any chat). Adjust time if needed.
Create a one-time reminder in ChatGPT Tasks for **tomorrow at 9:00 AM (America/Denver)** titled:
"Review carrier comparison for Taylor (specialty Rx + PPO in Utah County) and prepare presentation."

Include the link to today's research summary and ask me to confirm if you should calendar a 20-minute review with Taylor.
✅ Copied to clipboard!
Prompt 3 — Draft & Send Email to Customer Gmail
Replace customer@example.com if needed.
Use Gmail to draft an email to **customer@example.com** with the subject:
"Your carrier comparison — PPO access & specialty Rx options"

Body (edit as needed before sending):
Hi Taylor,

Thanks for the call today. I ran a side-by-side comparison focused on PPO access in Utah County (UVMMC) and predictable specialty Rx costs. Highlights below; the full table with citations is attached/linked.

Top takeaways:
• [1-sentence recommendation with rationale, e.g., "CarrierC Gold PPO 1500 + Rx Rider offers the most predictable specialty Rx structure with broad PPO access."]
• Key tradeoffs: [bullet 1], [bullet 2]
• Estimated family premium vs. OOP exposure: [high-level summary]

Next steps:
• I can walk you through the details and answer questions. Would **tomorrow or the following day** work for a 20-minute review?

Best,
Jordan

Attach or link: today's research summary (table + decision brief). After drafting, ask me to confirm before sending.
✅ Copied to clipboard!

HTML Code:

<div style="background: radial-gradient(1200px 600px at 10% -10%, #112042 0, #0b1020 50%, #0b1020 100%); color: #e5ecff; font-family: ui-sans-serif, system-ui; padding: 32px; max-width: 980px; margin: 0 auto;">
<h1 style="margin: 0 0 6px; font-size: 1.9rem; letter-spacing: .2px;">Insurance Agent Workflow — Deep Research → Reminder → Email</h1>
<div style="color: #a3b1d1; margin-bottom: 18px;">Use these copyable prompts with the <span style="color: #a5b4fc;">ChatGPT Atlas</span> sidebar.</div>

<div style="display: grid; gap: 16px; grid-template-columns: 1fr;">
  <!-- Prompt 1: Deep Research -->
  <div style="background: linear-gradient(180deg, #111a33 0%, #10172a 100%); border: 1px solid #1f2a44; border-radius: 14px; box-shadow: 0 10px 40px rgba(2, 6, 23, .4); overflow: hidden;">
    <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #1f2a44; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));">
      <div style="font-size: 15px; font-weight: 700; letter-spacing: .3px;">Prompt 1 — Deep Research Carrier Comparison <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(124,58,237,.18); color: #c4b5fd; border: 1px solid rgba(124,58,237,.35);">Atlas → Deep Research</span></div>
      <button data-copy="#research-prompt" style="cursor: pointer; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; background: #10a37f; color: white;">Copy Prompt 1</button>
    </div>
    <div style="padding: 14px;">
      <div style="font-size: 12px; color: #a3b1d1; margin: 6px 0 10px;">In the ChatGPT right sidebar, toggle <b>Deep Research</b> first. Then paste:</div>
      <pre id="research-prompt" style="margin: 0; padding: 14px; border-radius: 10px; border: 1px dashed #1f2a44; background: #0c1530; color: #dbe7ff; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px;">You are my Insurance Research Analyst. We just completed a client call; our CRM attached the call transcript below.

GOAL:
Run deep, source-backed research comparing the specific policies mentioned on the call and recommend the best fit for the customer's stated needs and constraints.

CALL TRANSCRIPT (excerpt):
---
Customer (Taylor, 38, family of 3) asked about strong pediatric coverage, broad PPO network near Lehi, and predictable Rx costs.
Current pain points: high specialty Rx coinsurance; last year's OOP max hit in September.
Policies discussed on the call:
• CarrierA Bronze PPO 2500
• CarrierB Silver HMO 2000
• CarrierC Gold PPO 1500 + Rx Rider
• CarrierD Silver PPO 3000 (regional network)
---

RESEARCH INSTRUCTIONS (Atlas Deep Research):
1) Use Deep Research to gather current policy details from carriers & state filings (Utah), reputable brokers, and plan documents.
2) For each policy, extract at least: Monthly premium (family), Deductible, OOP Max, Coinsurance, PCP/Specialist copays, Tiered Rx copays/coinsurance incl. specialty tiers, Network scope (PPO/HMO + notable exclusions), Pre-auth requirements for specialty Rx, Pediatric coverage highlights, Historic renewal increases (if available), Notable riders/exclusions.
3) Construct a side-by-side table with columns: Policy, Network Type, Premium (family), Deductible, OOP Max, PCP Copay, Specialist Copay, Generic Rx, Brand Rx, Specialty Rx, Pediatric Coverage Notes, Network Notes, Key Exclusions, Renewal Trend (est/notes), Overall Fit Score (0–10).
4) Provide a decision brief (≤200 words) with a clear recommendation and top 3 reasons. Address the customer's biggest pain: specialty Rx predictability + PPO access near Lehi.
5) List any Open Questions / missing info and how we would confirm it.
6) Cite sources (links) for every non-obvious figure. If data conflicts, note the discrepancy.</pre>
      <div class="copy-success" style="margin-top: 10px; font-size: 14px; color: #22c55e; opacity: 0; transition: opacity 0.3s;">✅ Copied to clipboard!</div>
    </div>
  </div>

  <!-- Prompt 2: Reminder -->
  <div style="background: linear-gradient(180deg, #111a33 0%, #10172a 100%); border: 1px solid #1f2a44; border-radius: 14px; box-shadow: 0 10px 40px rgba(2, 6, 23, .4); overflow: hidden;">
    <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #1f2a44;">
      <div style="font-size: 15px; font-weight: 700;">Prompt 2 — Create One-Time Reminder <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(124,58,237,.18); color: #c4b5fd;">ChatGPT Tasks</span></div>
      <button data-copy="#reminder-prompt-2" style="cursor: pointer; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; background: #10a37f; color: white;">Copy Prompt 2</button>
    </div>
    <div style="padding: 14px;">
      <div style="font-size: 12px; color: #a3b1d1; margin: 6px 0 10px;">Paste into ChatGPT (any chat). Adjust time if needed.</div>
      <pre id="reminder-prompt-2" style="margin: 0; padding: 14px; border-radius: 10px; border: 1px dashed #1f2a44; background: #0c1530; color: #dbe7ff; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px;">Create a one-time reminder in ChatGPT Tasks for **tomorrow at 9:00 AM (America/Denver)** titled:
"Review carrier comparison for Taylor (specialty Rx + PPO in Utah County) and prepare presentation."

Include the link to today's research summary and ask me to confirm if you should calendar a 20-minute review with Taylor.</pre>
      <div class="copy-success" style="margin-top: 10px; font-size: 14px; color: #22c55e; opacity: 0; transition: opacity 0.3s;">✅ Copied to clipboard!</div>
    </div>
  </div>

  <!-- Prompt 3: Email -->
  <div style="background: linear-gradient(180deg, #111a33 0%, #10172a 100%); border: 1px solid #1f2a44; border-radius: 14px; box-shadow: 0 10px 40px rgba(2, 6, 23, .4); overflow: hidden;">
    <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #1f2a44;">
      <div style="font-size: 15px; font-weight: 700;">Prompt 3 — Draft & Send Email to Customer <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(124,58,237,.18); color: #c4b5fd;">Gmail</span></div>
      <button data-copy="#email-prompt-3" style="cursor: pointer; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; background: #10a37f; color: white;">Copy Prompt 3</button>
    </div>
    <div style="padding: 14px;">
      <div style="font-size: 12px; color: #a3b1d1; margin: 6px 0 10px;">Replace <code style="background: rgba(255,255,255,.1); padding: 2px 4px; border-radius: 3px;">customer@example.com</code> if needed.</div>
      <pre id="email-prompt-3" style="margin: 0; padding: 14px; border-radius: 10px; border: 1px dashed #1f2a44; background: #0c1530; color: #dbe7ff; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px;">Use Gmail to draft an email to **customer@example.com** with the subject:
"Your carrier comparison — PPO access & specialty Rx options"

Body (edit as needed before sending):
Hi Taylor,

Thanks for the call today. I ran a side-by-side comparison focused on PPO access in Utah County (UVMMC) and predictable specialty Rx costs. Highlights below; the full table with citations is attached/linked.

Top takeaways:
• [1-sentence recommendation with rationale, e.g., "CarrierC Gold PPO 1500 + Rx Rider offers the most predictable specialty Rx structure with broad PPO access."]
• Key tradeoffs: [bullet 1], [bullet 2]
• Estimated family premium vs. OOP exposure: [high-level summary]

Next steps:
• I can walk you through the details and answer questions. Would **tomorrow or the following day** work for a 20-minute review?

Best,
Jordan

Attach or link: today's research summary (table + decision brief). After drafting, ask me to confirm before sending.</pre>
      <div class="copy-success" style="margin-top: 10px; font-size: 14px; color: #22c55e; opacity: 0; transition: opacity 0.3s;">✅ Copied to clipboard!</div>
    </div>
  </div>
</div>
</div>