{"id":7875,"date":"2026-04-23T12:30:14","date_gmt":"2026-04-23T16:30:14","guid":{"rendered":"https:\/\/engineering.jhu.edu\/cmts\/?p=7875"},"modified":"2026-05-26T17:32:41","modified_gmt":"2026-05-26T21:32:41","slug":"how-we-built-jayai-for-wse","status":"publish","type":"post","link":"https:\/\/engineering.jhu.edu\/cmts\/how-we-built-jayai-for-wse\/","title":{"rendered":"How We Built JayAI for WSE"},"content":{"rendered":"\n<!-- Paste this into a WordPress Custom HTML block -->\n<style>\n.wh-featured-image.wp-post-image {\n  display: none !important;\n}\n<\/style>\n<article class=\"jayai-post\" aria-labelledby=\"jayai-post-title\">\n  <style>\n    .jayai-post {\n      --jayai-blue: #002d72;\n      --jayai-blue-2: #005eb8;\n      --jayai-ink: #172033;\n      --jayai-muted: #667085;\n      --jayai-line: #b8c7dd;\n      --jayai-panel: #ffffff;\n      --jayai-bg: #f4f8fc;\n      --jayai-gold: #f2c94c;\n      --jayai-green: #18a058;\n      --jayai-teal: #0e9f9a;\n      --jayai-shadow: 0 18px 45px rgba(0, 45, 114, 0.14);\n      color: var(--jayai-ink);\n      font-family: Georgia, \"Times New Roman\", serif;\n      margin: 0 auto;\n      max-width: 1180px;\n      line-height: 1.65;\n    }\n\n    .jayai-post,\n    .jayai-post * {\n      box-sizing: border-box;\n    }\n\n    .jayai-post__hero {\n      border-radius: 32px;\n      background:\n        radial-gradient(circle at 10% 10%, rgba(0, 94, 184, 0.16), transparent 34%),\n        radial-gradient(circle at 90% 0%, rgba(14, 159, 154, 0.12), transparent 30%),\n        linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      box-shadow: var(--jayai-shadow);\n      padding: clamp(28px, 5vw, 56px);\n      margin-bottom: 36px;\n    }\n\n    .jayai-post__eyebrow {\n      margin: 0 0 14px;\n      color: var(--jayai-blue-2);\n      font: 800 0.82rem\/1.2 \"Aptos\", \"Segoe UI\", sans-serif;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n\n    .jayai-post h1,\n    .jayai-post h2,\n    .jayai-post h3 {\n      color: var(--jayai-blue);\n      line-height: 1.1;\n    }\n\n    .jayai-post h1 {\n      margin: 0 0 18px;\n      max-width: 940px;\n      font-size: clamp(2.35rem, 5vw, 4.8rem);\n      letter-spacing: -0.055em;\n    }\n\n    .jayai-post__dek {\n      margin: 0;\n      max-width: 820px;\n      color: var(--jayai-muted);\n      font: 500 clamp(1.05rem, 1.5vw, 1.3rem)\/1.55 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__widget-showcase {\n      display: grid;\n      grid-template-columns: 0.82fr 1.18fr;\n      gap: clamp(22px, 4vw, 44px);\n      align-items: center;\n      max-width: 1040px;\n      margin: 0 auto 42px;\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      border-radius: 30px;\n      background:\n        radial-gradient(circle at 14% 16%, rgba(0, 94, 184, 0.13), transparent 30%),\n        linear-gradient(135deg, #ffffff 0%, #f2f7fc 100%);\n      box-shadow: var(--jayai-shadow);\n      padding: clamp(20px, 4vw, 38px);\n    }\n\n    .jayai-post__widget-frame {\n      margin: 0;\n      position: relative;\n      border-radius: 26px;\n      background: #0d1728;\n      box-shadow: 0 20px 44px rgba(0, 45, 114, 0.22);\n      padding: 10px;\n      transform: rotate(-1.5deg);\n    }\n\n    .jayai-post__widget-frame img {\n      display: block;\n      width: 100%;\n      height: auto;\n      border-radius: 18px;\n    }\n\n    .jayai-post__widget-copy h2 {\n      margin-top: 0;\n    }\n\n    .jayai-post__widget-copy p:last-child {\n      margin-bottom: 0;\n    }\n\n    .jayai-post__section {\n      max-width: 860px;\n      margin: 0 auto 34px;\n    }\n\n    .jayai-post__section--wide {\n      max-width: 1180px;\n      margin-top: 42px;\n      margin-bottom: 42px;\n    }\n\n    .jayai-post h2 {\n      margin: 42px 0 14px;\n      font-size: clamp(1.65rem, 3vw, 2.45rem);\n      letter-spacing: -0.035em;\n    }\n\n    .jayai-post h3 {\n      margin: 28px 0 8px;\n      font-size: clamp(1.15rem, 2vw, 1.45rem);\n      letter-spacing: -0.02em;\n    }\n\n    .jayai-post p {\n      margin: 0 0 16px;\n      font-size: 1.05rem;\n    }\n\n    .jayai-post ul,\n    .jayai-post ol {\n      margin: 12px 0 22px;\n      padding-left: 1.35rem;\n    }\n\n    .jayai-post li {\n      margin: 7px 0;\n      font-size: 1.02rem;\n    }\n\n    .jayai-post strong {\n      color: var(--jayai-blue);\n    }\n\n    .jayai-post__callout {\n      margin: 28px 0;\n      border-left: 6px solid var(--jayai-blue-2);\n      border-radius: 18px;\n      background: #f3f8ff;\n      padding: 20px 22px;\n      color: var(--jayai-ink);\n      font: 600 1.05rem\/1.55 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__steps {\n      counter-reset: jayai-step;\n      display: grid;\n      gap: 14px;\n      margin: 22px 0 34px;\n      padding: 0;\n      list-style: none;\n    }\n\n    .jayai-post__steps li {\n      counter-increment: jayai-step;\n      position: relative;\n      margin: 0;\n      border: 1px solid rgba(0, 45, 114, 0.12);\n      border-radius: 20px;\n      background: #fff;\n      box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);\n      padding: 18px 18px 18px 62px;\n      font-family: \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__steps li::before {\n      content: counter(jayai-step);\n      position: absolute;\n      left: 18px;\n      top: 18px;\n      display: grid;\n      place-items: center;\n      width: 30px;\n      height: 30px;\n      border-radius: 999px;\n      background: var(--jayai-blue);\n      color: white;\n      font: 800 0.9rem\/1 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__steps strong {\n      display: block;\n      margin-bottom: 4px;\n    }\n\n    .jayai-arch {\n      color: var(--jayai-ink);\n      font-family: Georgia, \"Times New Roman\", serif;\n      margin: 0 auto;\n      max-width: 1180px;\n    }\n\n    .jayai-arch__hero {\n      display: grid;\n      grid-template-columns: 1.15fr 0.85fr;\n      gap: 24px;\n      align-items: end;\n      margin-bottom: 24px;\n    }\n\n    .jayai-arch h2 {\n      margin: 0 0 10px;\n      color: var(--jayai-blue);\n      font-size: clamp(2rem, 4vw, 4.4rem);\n      line-height: 0.95;\n      letter-spacing: -0.05em;\n    }\n\n    .jayai-arch__dek {\n      max-width: 760px;\n      margin: 0;\n      color: var(--jayai-muted);\n      font: 500 clamp(1rem, 1.4vw, 1.2rem)\/1.55 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-arch__badge {\n      justify-self: end;\n      width: min(360px, 100%);\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      border-radius: 22px;\n      background: rgba(255, 255, 255, 0.72);\n      box-shadow: var(--jayai-shadow);\n      padding: 18px;\n      font: 700 0.9rem\/1.4 \"Aptos\", \"Segoe UI\", sans-serif;\n      color: var(--jayai-blue);\n    }\n\n    .jayai-arch__badge span {\n      display: block;\n      color: var(--jayai-muted);\n      font-weight: 500;\n      margin-top: 4px;\n    }\n\n    .jayai-arch__diagram {\n      position: relative;\n      overflow: hidden;\n      border: 1px solid rgba(0, 45, 114, 0.16);\n      border-radius: 32px;\n      background:\n        radial-gradient(circle at 12% 12%, rgba(0, 94, 184, 0.12), transparent 30%),\n        radial-gradient(circle at 90% 6%, rgba(14, 159, 154, 0.1), transparent 28%),\n        linear-gradient(135deg, rgba(255,255,255,0.88) 0%, var(--jayai-bg) 100%);\n      box-shadow: var(--jayai-shadow);\n      padding: 28px;\n    }\n\n    .jayai-arch__diagram::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background-image:\n        linear-gradient(rgba(0, 45, 114, 0.045) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(0, 45, 114, 0.045) 1px, transparent 1px);\n      background-size: 34px 34px;\n      pointer-events: none;\n      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 85%);\n    }\n\n    .jayai-arch__flow {\n      position: relative;\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 18px;\n      z-index: 1;\n    }\n\n    .jayai-arch__layer {\n      position: relative;\n      display: grid;\n      gap: 14px;\n      align-content: start;\n    }\n\n    .jayai-arch__layer-title {\n      min-height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 999px;\n      background: var(--jayai-blue);\n      color: white;\n      font: 800 0.8rem\/1.2 \"Aptos\", \"Segoe UI\", sans-serif;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      text-align: center;\n      padding: 10px 14px;\n    }\n\n    .jayai-arch__card {\n      position: relative;\n      min-height: 132px;\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      border-radius: 22px;\n      background: var(--jayai-panel);\n      box-shadow: 0 12px 28px rgba(23, 32, 51, 0.08);\n      padding: 18px;\n      font: 500 0.92rem\/1.45 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-arch__card strong {\n      display: block;\n      color: var(--jayai-blue);\n      font-size: 1rem;\n      margin-bottom: 7px;\n    }\n\n    .jayai-arch__card small {\n      display: block;\n      color: var(--jayai-muted);\n      font-size: 0.82rem;\n      line-height: 1.45;\n    }\n\n    .jayai-arch__card--blue {\n      border-top: 5px solid var(--jayai-blue-2);\n    }\n\n    .jayai-arch__card--green {\n      border-top: 5px solid var(--jayai-green);\n    }\n\n    .jayai-arch__card--gold {\n      border-top: 5px solid var(--jayai-gold);\n    }\n\n    .jayai-arch__card--teal {\n      border-top: 5px solid var(--jayai-teal);\n    }\n\n    .jayai-arch__arrow {\n      position: absolute;\n      top: 50%;\n      right: -23px;\n      width: 28px;\n      height: 2px;\n      background: var(--jayai-line);\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    .jayai-arch__arrow::after {\n      content: \"\";\n      position: absolute;\n      right: -2px;\n      top: 50%;\n      width: 9px;\n      height: 9px;\n      border-top: 2px solid var(--jayai-line);\n      border-right: 2px solid var(--jayai-line);\n      transform: translateY(-50%) rotate(45deg);\n      background: transparent;\n    }\n\n    .jayai-arch__decision {\n      margin: 22px auto 0;\n      max-width: 900px;\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 12px;\n      position: relative;\n      z-index: 1;\n    }\n\n    .jayai-arch__pill {\n      border-radius: 999px;\n      background: #eef6ff;\n      border: 1px solid rgba(0, 94, 184, 0.18);\n      padding: 10px 12px;\n      text-align: center;\n      color: var(--jayai-blue);\n      font: 800 0.78rem\/1.25 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-arch__footer-note {\n      margin-top: 20px;\n      display: flex;\n      justify-content: space-between;\n      gap: 16px;\n      color: var(--jayai-muted);\n      font: 500 0.85rem\/1.5 \"Aptos\", \"Segoe UI\", sans-serif;\n      position: relative;\n      z-index: 1;\n    }\n\n    .jayai-arch__footer-note strong {\n      color: var(--jayai-blue);\n    }\n\n    @media (max-width: 920px) {\n      .jayai-post__hero {\n        border-radius: 24px;\n      }\n\n      .jayai-post__widget-showcase {\n        grid-template-columns: 1fr;\n      }\n\n      .jayai-post__widget-frame {\n        max-width: 420px;\n        transform: none;\n      }\n\n      .jayai-arch__hero {\n        grid-template-columns: 1fr;\n      }\n\n      .jayai-arch__badge {\n        justify-self: start;\n      }\n\n      .jayai-arch__flow {\n        grid-template-columns: 1fr;\n      }\n\n      .jayai-arch__arrow {\n        display: none;\n      }\n\n      .jayai-arch__decision {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      .jayai-arch__footer-note {\n        flex-direction: column;\n      }\n    }\n\n    @media (max-width: 520px) {\n      .jayai-post__hero,\n      .jayai-arch__diagram {\n        padding: 22px;\n        border-radius: 22px;\n      }\n\n      .jayai-arch__decision {\n        grid-template-columns: 1fr;\n      }\n    }\n  <\/style>\n   <article class=\"jayai-post\" aria-labelledby=\"jayai-post-title\">\n  <style>\n    .jayai-post {\n      --jayai-blue: #002d72;\n      --jayai-blue-2: #005eb8;\n      --jayai-ink: #172033;\n      --jayai-muted: #667085;\n      --jayai-line: #b8c7dd;\n      --jayai-panel: #ffffff;\n      --jayai-bg: #f4f8fc;\n      --jayai-gold: #f2c94c;\n      --jayai-green: #18a058;\n      --jayai-teal: #0e9f9a;\n      --jayai-shadow: 0 18px 45px rgba(0, 45, 114, 0.14);\n      color: var(--jayai-ink);\n      font-family: Georgia, \"Times New Roman\", serif;\n      margin: 0 auto;\n      max-width: 1180px;\n      line-height: 1.65;\n    }\n\n    .jayai-post,\n    .jayai-post * {\n      box-sizing: border-box;\n    }\n\n    .jayai-post__hero {\n      border-radius: 32px;\n      background:\n        radial-gradient(circle at 10% 10%, rgba(0, 94, 184, 0.16), transparent 34%),\n        radial-gradient(circle at 90% 0%, rgba(14, 159, 154, 0.12), transparent 30%),\n        linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      box-shadow: var(--jayai-shadow);\n      padding: clamp(28px, 5vw, 56px);\n      margin-bottom: 36px;\n    }\n\n    .jayai-post__eyebrow {\n      margin: 0 0 14px;\n      color: var(--jayai-blue-2);\n      font: 800 0.82rem\/1.2 \"Aptos\", \"Segoe UI\", sans-serif;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n\n    .jayai-post h1,\n    .jayai-post h2,\n    .jayai-post h3 {\n      color: var(--jayai-blue);\n      line-height: 1.1;\n    }\n\n    .jayai-post h1 {\n      margin: 0 0 18px;\n      max-width: 940px;\n      font-size: clamp(2.35rem, 5vw, 4.8rem);\n      letter-spacing: -0.055em;\n    }\n\n    .jayai-post__dek {\n      margin: 0;\n      max-width: 820px;\n      color: var(--jayai-muted);\n      font: 500 clamp(1.05rem, 1.5vw, 1.3rem)\/1.55 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__widget-showcase {\n      display: grid;\n      grid-template-columns: 0.82fr 1.18fr;\n      gap: clamp(22px, 4vw, 44px);\n      align-items: center;\n      max-width: 1040px;\n      margin: 0 auto 42px;\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      border-radius: 30px;\n      background:\n        radial-gradient(circle at 14% 16%, rgba(0, 94, 184, 0.13), transparent 30%),\n        linear-gradient(135deg, #ffffff 0%, #f2f7fc 100%);\n      box-shadow: var(--jayai-shadow);\n      padding: clamp(20px, 4vw, 38px);\n    }\n\n    .jayai-post__widget-frame {\n      margin: 0;\n      position: relative;\n      border-radius: 26px;\n      background: #0d1728;\n      box-shadow: 0 20px 44px rgba(0, 45, 114, 0.22);\n      padding: 10px;\n      transform: rotate(-1.5deg);\n    }\n\n    .jayai-post__widget-frame img {\n      display: block;\n      width: 100%;\n      height: auto;\n      border-radius: 18px;\n    }\n\n    .jayai-post__widget-copy h2 {\n      margin-top: 0;\n    }\n\n    .jayai-post__widget-copy p:last-child {\n      margin-bottom: 0;\n    }\n\n    .jayai-post__section {\n      max-width: 860px;\n      margin: 0 auto 34px;\n    }\n\n    .jayai-post__section--wide {\n      max-width: 1180px;\n      margin-top: 42px;\n      margin-bottom: 42px;\n    }\n\n    .jayai-post h2 {\n      margin: 42px 0 14px;\n      font-size: clamp(1.65rem, 3vw, 2.45rem);\n      letter-spacing: -0.035em;\n    }\n\n    .jayai-post h3 {\n      margin: 28px 0 8px;\n      font-size: clamp(1.15rem, 2vw, 1.45rem);\n      letter-spacing: -0.02em;\n    }\n\n    .jayai-post p {\n      margin: 0 0 16px;\n      font-size: 1.05rem;\n    }\n\n    .jayai-post ul,\n    .jayai-post ol {\n      margin: 12px 0 22px;\n      padding-left: 1.35rem;\n    }\n\n    .jayai-post li {\n      margin: 7px 0;\n      font-size: 1.02rem;\n    }\n\n    .jayai-post strong {\n      color: var(--jayai-blue);\n    }\n\n    .jayai-post__callout {\n      margin: 28px 0;\n      border-left: 6px solid var(--jayai-blue-2);\n      border-radius: 18px;\n      background: #f3f8ff;\n      padding: 20px 22px;\n      color: var(--jayai-ink);\n      font: 600 1.05rem\/1.55 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__steps {\n      counter-reset: jayai-step;\n      display: grid;\n      gap: 14px;\n      margin: 22px 0 34px;\n      padding: 0;\n      list-style: none;\n    }\n\n    .jayai-post__steps li {\n      counter-increment: jayai-step;\n      position: relative;\n      margin: 0;\n      border: 1px solid rgba(0, 45, 114, 0.12);\n      border-radius: 20px;\n      background: #fff;\n      box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);\n      padding: 18px 18px 18px 62px;\n      font-family: \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__steps li::before {\n      content: counter(jayai-step);\n      position: absolute;\n      left: 18px;\n      top: 18px;\n      display: grid;\n      place-items: center;\n      width: 30px;\n      height: 30px;\n      border-radius: 999px;\n      background: var(--jayai-blue);\n      color: white;\n      font: 800 0.9rem\/1 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-post__steps strong {\n      display: block;\n      margin-bottom: 4px;\n    }\n\n    .jayai-arch {\n      color: var(--jayai-ink);\n      font-family: Georgia, \"Times New Roman\", serif;\n      margin: 0 auto;\n      max-width: 1180px;\n    }\n\n    .jayai-arch__hero {\n      display: grid;\n      grid-template-columns: 1.15fr 0.85fr;\n      gap: 24px;\n      align-items: end;\n      margin-bottom: 24px;\n    }\n\n    .jayai-arch h2 {\n      margin: 0 0 10px;\n      color: var(--jayai-blue);\n      font-size: clamp(2rem, 4vw, 4.4rem);\n      line-height: 0.95;\n      letter-spacing: -0.05em;\n    }\n\n    .jayai-arch__dek {\n      max-width: 760px;\n      margin: 0;\n      color: var(--jayai-muted);\n      font: 500 clamp(1rem, 1.4vw, 1.2rem)\/1.55 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-arch__badge {\n      justify-self: end;\n      width: min(360px, 100%);\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      border-radius: 22px;\n      background: rgba(255, 255, 255, 0.72);\n      box-shadow: var(--jayai-shadow);\n      padding: 18px;\n      font: 700 0.9rem\/1.4 \"Aptos\", \"Segoe UI\", sans-serif;\n      color: var(--jayai-blue);\n    }\n\n    .jayai-arch__badge span {\n      display: block;\n      color: var(--jayai-muted);\n      font-weight: 500;\n      margin-top: 4px;\n    }\n\n    .jayai-arch__diagram {\n      position: relative;\n      overflow: hidden;\n      border: 1px solid rgba(0, 45, 114, 0.16);\n      border-radius: 32px;\n      background:\n        radial-gradient(circle at 12% 12%, rgba(0, 94, 184, 0.12), transparent 30%),\n        radial-gradient(circle at 90% 6%, rgba(14, 159, 154, 0.1), transparent 28%),\n        linear-gradient(135deg, rgba(255,255,255,0.88) 0%, var(--jayai-bg) 100%);\n      box-shadow: var(--jayai-shadow);\n      padding: 28px;\n    }\n\n    .jayai-arch__diagram::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background-image:\n        linear-gradient(rgba(0, 45, 114, 0.045) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(0, 45, 114, 0.045) 1px, transparent 1px);\n      background-size: 34px 34px;\n      pointer-events: none;\n      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 85%);\n    }\n\n    .jayai-arch__flow {\n      position: relative;\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 18px;\n      z-index: 1;\n    }\n\n    .jayai-arch__layer {\n      position: relative;\n      display: grid;\n      gap: 14px;\n      align-content: start;\n    }\n\n    .jayai-arch__layer-title {\n      min-height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 999px;\n      background: var(--jayai-blue);\n      color: white;\n      font: 800 0.8rem\/1.2 \"Aptos\", \"Segoe UI\", sans-serif;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      text-align: center;\n      padding: 10px 14px;\n    }\n\n    .jayai-arch__card {\n      position: relative;\n      min-height: 132px;\n      border: 1px solid rgba(0, 45, 114, 0.14);\n      border-radius: 22px;\n      background: var(--jayai-panel);\n      box-shadow: 0 12px 28px rgba(23, 32, 51, 0.08);\n      padding: 18px;\n      font: 500 0.92rem\/1.45 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-arch__card strong {\n      display: block;\n      color: var(--jayai-blue);\n      font-size: 1rem;\n      margin-bottom: 7px;\n    }\n\n    .jayai-arch__card small {\n      display: block;\n      color: var(--jayai-muted);\n      font-size: 0.82rem;\n      line-height: 1.45;\n    }\n\n    .jayai-arch__card--blue {\n      border-top: 5px solid var(--jayai-blue-2);\n    }\n\n    .jayai-arch__card--green {\n      border-top: 5px solid var(--jayai-green);\n    }\n\n    .jayai-arch__card--gold {\n      border-top: 5px solid var(--jayai-gold);\n    }\n\n    .jayai-arch__card--teal {\n      border-top: 5px solid var(--jayai-teal);\n    }\n\n    .jayai-arch__arrow {\n      position: absolute;\n      top: 50%;\n      right: -23px;\n      width: 28px;\n      height: 2px;\n      background: var(--jayai-line);\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    .jayai-arch__arrow::after {\n      content: \"\";\n      position: absolute;\n      right: -2px;\n      top: 50%;\n      width: 9px;\n      height: 9px;\n      border-top: 2px solid var(--jayai-line);\n      border-right: 2px solid var(--jayai-line);\n      transform: translateY(-50%) rotate(45deg);\n      background: transparent;\n    }\n\n    .jayai-arch__decision {\n      margin: 22px auto 0;\n      max-width: 900px;\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 12px;\n      position: relative;\n      z-index: 1;\n    }\n\n    .jayai-arch__pill {\n      border-radius: 999px;\n      background: #eef6ff;\n      border: 1px solid rgba(0, 94, 184, 0.18);\n      padding: 10px 12px;\n      text-align: center;\n      color: var(--jayai-blue);\n      font: 800 0.78rem\/1.25 \"Aptos\", \"Segoe UI\", sans-serif;\n    }\n\n    .jayai-arch__footer-note {\n      margin-top: 20px;\n      display: flex;\n      justify-content: space-between;\n      gap: 16px;\n      color: var(--jayai-muted);\n      font: 500 0.85rem\/1.5 \"Aptos\", \"Segoe UI\", sans-serif;\n      position: relative;\n      z-index: 1;\n    }\n\n    .jayai-arch__footer-note strong {\n      color: var(--jayai-blue);\n    }\n\n    @media (max-width: 920px) {\n      .jayai-post__hero {\n        border-radius: 24px;\n      }\n\n      .jayai-post__widget-showcase {\n        grid-template-columns: 1fr;\n      }\n\n      .jayai-post__widget-frame {\n        max-width: 420px;\n        transform: none;\n      }\n\n      .jayai-arch__hero {\n        grid-template-columns: 1fr;\n      }\n\n      .jayai-arch__badge {\n        justify-self: start;\n      }\n\n      .jayai-arch__flow {\n        grid-template-columns: 1fr;\n      }\n\n      .jayai-arch__arrow {\n        display: none;\n      }\n\n      .jayai-arch__decision {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      .jayai-arch__footer-note {\n        flex-direction: column;\n      }\n    }\n\n    @media (max-width: 520px) {\n      .jayai-post__hero,\n      .jayai-arch__diagram {\n        padding: 22px;\n        border-radius: 22px;\n      }\n\n      .jayai-arch__decision {\n        grid-template-columns: 1fr;\n      }\n    }\n  <\/style>\n    <p class=\"jayai-post__dek\">CMTS launched JayAI for Johns Hopkins Engineering in early April. JayAI is a new AI assistant that helps visitors find answers faster and navigate EP information more easily.<\/p>\n\n  <section class=\"jayai-post__widget-showcase\" aria-label=\"JayAI widget screenshot\">\n    <figure class=\"jayai-post__widget-frame\">\n      <img decoding=\"async\" src=\"https:\/\/engineering.jhu.edu\/cmts\/wp-content\/uploads\/2026\/04\/jayai-widget-cmts.png\" alt=\"Screenshot of the JayAI chat widget on the Engineering for Professionals website\" loading=\"lazy\">\n    <\/figure>\n    <div class=\"jayai-post__widget-copy\">\n      <h2>From Website Search to Guided Help<\/h2>\n      <p>JayAI gives visitors a simpler way to find information without having to jump from page to page.<\/p>\n      <p>What visitors see is a chat widget. Behind it is a system designed to pull from trusted sources, follow clear rules where needed, and use AI when it actually helps.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"jayai-post__section\">\n    <p>JayAI is a new front door for EP information, built to connect people with trusted answers more quickly.<\/p>\n\n    <h2>Why JayAI Matters<\/h2>\n    <p>Prospective and current students come to the website with practical questions about programs, admissions, cost, courses, and deadlines. The answers often already exist, but they are spread across many different pages and systems. JayAI helps people get information without having to know exactly where the source of the answer lives.<\/p>\n    <p>For EP, that means better self-service for students, fewer repetitive questions for staff, and better insight into what users are actually trying to understand.<\/p>\n  <\/section>\n\n  <section class=\"jayai-post__section jayai-post__section--wide\">\n    <div class=\"jayai-arch\" aria-labelledby=\"jayai-arch-title\">\n      <div class=\"jayai-arch__hero\">\n        <div>\n          <h2 id=\"jayai-arch-title\">JayAI Architecture<\/h2>\n          <p class=\"jayai-arch__dek\">A practical higher education AI assistant that combines a website chat widget, verified EP data, retrieval, rule-based policy logic, model reasoning, and observability.<\/p>\n        <\/div>\n        <aside class=\"jayai-arch__badge\" aria-label=\"Architecture principle\">\n          Hybrid by design\n          <span>Rules, databases, retrieval, and AI each handle the work they are best suited for.<\/span>\n        <\/aside>\n      <\/div>\n\n      <div class=\"jayai-arch__diagram\" aria-label=\"JayAI architecture flow\">\n        <div class=\"jayai-arch__flow\">\n          <div class=\"jayai-arch__layer\">\n            <div class=\"jayai-arch__layer-title\">User Experience<\/div>\n            <article class=\"jayai-arch__card jayai-arch__card--blue\">\n              <strong>ep.jhu.edu<\/strong>\n              <small>JayAI is embedded sitewide with a small footer script. Visitors ask questions without leaving the page.<\/small>\n              <span class=\"jayai-arch__arrow\" aria-hidden=\"true\"><\/span>\n            <\/article>\n            <article class=\"jayai-arch__card jayai-arch__card--blue\">\n              <strong>React Chat Widget<\/strong>\n              <small>Cloudflare Pages hosts the UI, mobile layout, streaming responses, source chips, and handoff form.<\/small>\n            <\/article>\n          <\/div>\n\n          <div class=\"jayai-arch__layer\">\n            <div class=\"jayai-arch__layer-title\">Agent Layer<\/div>\n            <article class=\"jayai-arch__card jayai-arch__card--teal\">\n              <strong>Cloudflare Worker<\/strong>\n              <small>Routes each message, manages sessions, applies rate limits, calls tools, and streams the answer back.<\/small>\n              <span class=\"jayai-arch__arrow\" aria-hidden=\"true\"><\/span>\n            <\/article>\n            <article class=\"jayai-arch__card jayai-arch__card--teal\">\n              <strong>Decision Router<\/strong>\n              <small>Chooses rule-based logic, structured lookup, retrieval, or model-backed synthesis based on intent.<\/small>\n            <\/article>\n          <\/div>\n\n          <div class=\"jayai-arch__layer\">\n            <div class=\"jayai-arch__layer-title\">Knowledge<\/div>\n            <article class=\"jayai-arch__card jayai-arch__card--green\">\n              <strong>Cloudflare D1<\/strong>\n              <small>Structured EP data: programs, courses, instructors, events, fast facts, leadership, and teaching history.<\/small>\n              <span class=\"jayai-arch__arrow\" aria-hidden=\"true\"><\/span>\n            <\/article>\n            <article class=\"jayai-arch__card jayai-arch__card--green\">\n              <strong>AI Search<\/strong>\n              <small>Retrieves grounded chunks from EP website content and source material when the answer lives in site text.<\/small>\n            <\/article>\n          <\/div>\n\n          <div class=\"jayai-arch__layer\">\n            <div class=\"jayai-arch__layer-title\">AI + Operations<\/div>\n            <article class=\"jayai-arch__card jayai-arch__card--gold\">\n              <strong>OpenAI via AI Gateway<\/strong>\n              <small>Handles synthesis, comparison, and guidance while staying grounded in EP tools and retrieved sources.<\/small>\n            <\/article>\n            <article class=\"jayai-arch__card jayai-arch__card--gold\">\n              <strong>Observability<\/strong>\n              <small>Workers logs and AI Gateway metrics show usage, topics, source quality, latency, and improvement opportunities.<\/small>\n            <\/article>\n          <\/div>\n        <\/div>\n\n        <div class=\"jayai-arch__decision\" aria-label=\"Answer strategy\">\n          <div class=\"jayai-arch__pill\">Rule-based policy answers<\/div>\n          <div class=\"jayai-arch__pill\">Structured data lookups<\/div>\n          <div class=\"jayai-arch__pill\">Retrieval with citations<\/div>\n          <div class=\"jayai-arch__pill\">AI synthesis when useful<\/div>\n        <\/div>\n\n        <div class=\"jayai-arch__footer-note\">\n          <div><strong>Core idea:<\/strong> do not make the model answer everything.<\/div>\n          <div><strong>Outcome:<\/strong> faster answers, fewer repetitive questions, better insight into user needs.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"jayai-post__section\">\n    <h2>The Architecture at a High Level<\/h2>\n    <p>At a high level, JayAI has a few core parts. The widget lives on the EP website so visitors can ask questions without leaving the page. Behind the scenes, a Cloudflare Worker handles routing and session logic, structured data in D1 supports reliable answers for known questions, and AI Search helps retrieve relevant content from the EP website.<\/p>\n    <p>When a question calls for comparison, explanation, or guidance, the AI model helps synthesize an answer, but it is only one part of the system. That balance is what keeps the experience useful without relying exclusively on the model.<\/p>\n\n    <h2>The Most Important Design Choice<\/h2>\n    <p>One of the most important decisions we made was not treating every question the same way. Some questions need a rule-based answer. Some are better answered through structured data. Others call for retrieval from EP website content. And some benefit from AI synthesis, especially when a user is comparing options or asking for guidance.<\/p>\n    <div class=\"jayai-post__callout\">That routing is what makes JayAI feel less like a generic chatbot and more like a useful institutional assistant.<\/div>\n\n    <h2>How We Built It<\/h2>\n    <h3>1. We started with real user questions<\/h3>\n    <p>We did not begin with model prompts. We started with the practical questions students, faculty, and staff already ask every day. Those questions shaped the data model, the routing logic, the interface, and the tests.<\/p>\n\n    <h3>2. We built a trusted data layer<\/h3>\n    <p>We brought together structured data so JayAI could answer many common questions consistently and accurately. That includes program information, course and section data, instructor profiles, event data, policy-style fast facts, and teaching history.<\/p>\n\n    <h3>3. We used AI where AI is strongest<\/h3>\n    <p>AI becomes most useful when a question is nuanced, such as helping someone compare programs or think through which option best fits their background and goals. In those cases, the AI model helps with synthesis and explanation, but it still works with EP-specific tools and source data.<\/p>\n\n    <h3>4. We kept high-risk answers controlled<\/h3>\n    <p>For questions involving tuition, admissions requirements, MFA\/JHED support, academic calendar dates, and similar policy areas, we used rule-based or source-grounded paths.<\/p>\n    <p>That approach reduces the chance of a polished but incorrect answer.<\/p>\n\n    <h3>5. We designed for trust<\/h3>\n    <p>JayAI shows source links when answers rely on EP pages, course pages, program pages, or other official sources.<\/p>\n    <p>The goal is not to hide the source. The goal is to help users get to the right source faster.<\/p>\n\n    <h3>6. We added observability from the beginning<\/h3>\n    <p>We log lightweight chat-start summaries and model activity so we can see what users are asking, which pages they ask from, where the assistant is helping, and where it still needs improvement. That is how we move from assumptions to evidence.<\/p>\n\n    <h2>What We Learned That Others Can Use<\/h2>\n    <p>If you want to build something similar, a practical pattern is:<\/p>\n    <ol class=\"jayai-post__steps\">\n      <li><strong>Start with real user questions.<\/strong><\/li>\n      <li><strong>Separate the kinds of answers you need.<\/strong><\/li>\n      <li><strong>Build a trusted data layer.<\/strong><\/li>\n      <li><strong>Use retrieval for official content.<\/strong><\/li>\n      <li><strong>Measure what users ask and where answers fall short.<\/strong><\/li>\n      <li><strong>Launch small and improve from real usage.<\/strong><\/li>\n    <\/ol>\n\n    <h2>Lessons Learned<\/h2>\n    <p>JayAI reinforced a few things for us: good AI assistants need product thinking, not just prompt design. Grounded answers matter more than clever ones. Clear rules are often the safest choice, and strong logging helps improve the experience over time. The best approach is usually a hybrid one.<\/p>\n\n    <h2>Final Thought<\/h2>\n    <p>JayAI is a practical example of how higher education can use AI responsibly.<\/p>\n    <p>It gives users faster answers, provides staff better insight into demand, and affords the institution a scalable way to make complex information easier to navigate.<\/p>\n  <\/section>\n<\/article>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CMTS launched JayAI for Johns Hopkins Engineering in early April. JayAI is a new AI assistant that helps visitors find answers faster and navigate EP information more easily. From Website&nbsp;<a href=\"https:\/\/engineering.jhu.edu\/cmts\/how-we-built-jayai-for-wse\/\">&hellip;<\/a><\/p>\n","protected":false},"author":7,"featured_media":7896,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[384],"tags":[388,389],"class_list":["post-7875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-artificial-intelligence","tag-chatbot","odd"],"acf":[],"_links":{"self":[{"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/posts\/7875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/comments?post=7875"}],"version-history":[{"count":9,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/posts\/7875\/revisions"}],"predecessor-version":[{"id":7926,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/posts\/7875\/revisions\/7926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/media\/7896"}],"wp:attachment":[{"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/media?parent=7875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/categories?post=7875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engineering.jhu.edu\/cmts\/wp-json\/wp\/v2\/tags?post=7875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}