<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 640" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif">
<defs>
<filter id="shadow" x="-4%" y="-4%" width="108%" height="112%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.06"/>
</filter>
<linearGradient id="chatbotGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#667eea"/>
<stop offset="100%" stop-color="#764ba2"/>
</linearGradient>
<linearGradient id="pluginGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#11998e"/>
<stop offset="100%" stop-color="#38ef7d"/>
</linearGradient>
<linearGradient id="connectorGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f2994a"/>
<stop offset="100%" stop-color="#f2c94c"/>
</linearGradient>
<linearGradient id="loginGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#eb3349"/>
<stop offset="100%" stop-color="#f45c43"/>
</linearGradient>
<linearGradient id="bsGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#7f53ac"/>
<stop offset="100%" stop-color="#647dee"/>
</linearGradient>
</defs>
<!-- ROW 1: AI CHATBOT -->
<rect x="270" y="24" width="420" height="72" rx="36" fill="url(#chatbotGrad)" filter="url(#shadow)"/>
<text x="480" y="58" text-anchor="middle" fill="#fff" font-size="20" font-weight="700" letter-spacing="0.3">AI Chatbot</text>
<text x="480" y="80" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-size="12">Claude Desktop / ChatGPT / Cursor / Claude Code</text>
<!-- Arrow 1 -->
<line x1="480" y1="96" x2="480" y2="148" stroke="#cbd5e0" stroke-width="2"/>
<polygon points="474,143 480,155 486,143" fill="#cbd5e0"/>
<rect x="430" y="110" width="100" height="24" rx="12" fill="#edf2f7"/>
<text x="480" y="127" text-anchor="middle" fill="#718096" font-size="11" font-weight="600">your question</text>
<!-- ROW 2: BRIGHTSPACE PLUGIN -->
<rect x="120" y="155" width="720" height="180" rx="14" fill="#fff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#shadow)"/>
<rect x="120" y="155" width="720" height="50" rx="14" fill="url(#pluginGrad)"/>
<rect x="120" y="190" width="720" height="15" fill="url(#pluginGrad)"/>
<text x="480" y="182" text-anchor="middle" fill="#fff" font-size="18" font-weight="700" letter-spacing="0.3">Brightspace MCP Server</text>
<text x="480" y="200" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="11">understands questions about your courses</text>
<!-- Skill pills row 1 -->
<rect x="140" y="222" width="100" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="190" y="242" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Check Login</text>
<rect x="248" y="222" width="100" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="298" y="242" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">My Courses</text>
<rect x="356" y="222" width="96" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="404" y="242" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">My Grades</text>
<rect x="460" y="222" width="96" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="508" y="242" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Due Dates</text>
<rect x="564" y="222" width="128" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="628" y="242" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Announcements</text>
<rect x="700" y="222" width="118" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="759" y="242" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Assignments</text>
<!-- Skill pills row 2 -->
<rect x="140" y="262" width="130" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="205" y="282" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Course Content</text>
<rect x="278" y="262" width="126" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="341" y="282" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Download Files</text>
<rect x="412" y="262" width="82" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="453" y="282" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Roster</text>
<rect x="502" y="262" width="90" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="547" y="282" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Syllabus</text>
<rect x="600" y="262" width="120" height="30" rx="15" fill="#f0fff4" stroke="#c6f6d5" stroke-width="1"/>
<text x="660" y="282" text-anchor="middle" fill="#22543d" font-size="11" font-weight="500">Class Emails</text>
<!-- Subtitle row -->
<text x="480" y="322" text-anchor="middle" fill="#a0aec0" font-size="10">with input validation, caching, and rate limiting built in</text>
<!-- Arrow 2 -->
<line x1="480" y1="335" x2="480" y2="388" stroke="#cbd5e0" stroke-width="2"/>
<polygon points="474,383 480,395 486,383" fill="#cbd5e0"/>
<!-- ROW 3: CONNECTOR -->
<rect x="180" y="395" width="600" height="80" rx="14" fill="#fff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#shadow)"/>
<rect x="180" y="395" width="600" height="38" rx="14" fill="url(#connectorGrad)"/>
<rect x="180" y="420" width="600" height="13" fill="url(#connectorGrad)"/>
<text x="480" y="420" text-anchor="middle" fill="#fff" font-size="18" font-weight="700" letter-spacing="0.3">Brightspace Connector</text>
<text x="270" y="458" text-anchor="middle" fill="#7b341e" font-size="12" font-weight="500">Caching</text>
<text x="330" y="458" text-anchor="middle" fill="#cbd5e0" font-size="14">·</text>
<text x="400" y="458" text-anchor="middle" fill="#7b341e" font-size="12" font-weight="500">Speed Limits</text>
<text x="474" y="458" text-anchor="middle" fill="#cbd5e0" font-size="14">·</text>
<text x="568" y="458" text-anchor="middle" fill="#7b341e" font-size="12" font-weight="500">Session Management</text>
<text x="660" y="458" text-anchor="middle" fill="#cbd5e0" font-size="14">·</text>
<text x="710" y="458" text-anchor="middle" fill="#7b341e" font-size="12" font-weight="500">Security</text>
<!-- Arrow 3 -->
<line x1="480" y1="475" x2="480" y2="535" stroke="#cbd5e0" stroke-width="2"/>
<polygon points="474,530 480,542 486,530" fill="#cbd5e0"/>
<rect x="406" y="492" width="148" height="28" rx="14" fill="#edf2f7"/>
<text x="480" y="511" text-anchor="middle" fill="#718096" font-size="12" font-weight="600">secure connection</text>
<!-- ROW 4: BRIGHTSPACE -->
<rect x="250" y="542" width="460" height="72" rx="36" fill="url(#bsGrad)" filter="url(#shadow)"/>
<text x="480" y="578" text-anchor="middle" fill="#fff" font-size="20" font-weight="700" letter-spacing="0.3">Brightspace (D2L)</text>
<text x="480" y="598" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-size="12">Your courses, grades, assignments, and more</text>
<!-- RETURN ARROW: Brightspace back to AI Chatbot (right side) -->
<line x1="710" y1="578" x2="870" y2="578" stroke="#cbd5e0" stroke-width="2"/>
<line x1="870" y1="578" x2="870" y2="60" stroke="#cbd5e0" stroke-width="2"/>
<line x1="870" y1="60" x2="696" y2="60" stroke="#cbd5e0" stroke-width="2"/>
<polygon points="700,54 690,60 700,66" fill="#cbd5e0"/>
<rect x="818" y="304" width="104" height="28" rx="14" fill="#edf2f7"/>
<text x="870" y="323" text-anchor="middle" fill="#718096" font-size="12" font-weight="600">your answer</text>
<!-- LOGIN SIDEBAR -->
<rect x="14" y="200" width="88" height="310" rx="14" fill="#fff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#shadow)"/>
<rect x="14" y="200" width="88" height="36" rx="14" fill="url(#loginGrad)"/>
<rect x="14" y="224" width="88" height="12" fill="url(#loginGrad)"/>
<text x="58" y="224" text-anchor="middle" fill="#fff" font-size="13" font-weight="700">Login</text>
<text x="58" y="280" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">Opens</text>
<text x="58" y="296" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">browser</text>
<line x1="58" y1="304" x2="58" y2="326" stroke="#e2e8f0" stroke-width="1.5"/>
<polygon points="53,321 58,331 63,321" fill="#e2e8f0"/>
<text x="58" y="350" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">SSO</text>
<text x="58" y="366" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">Login</text>
<line x1="58" y1="374" x2="58" y2="396" stroke="#e2e8f0" stroke-width="1.5"/>
<polygon points="53,391 58,401 63,391" fill="#e2e8f0"/>
<text x="58" y="420" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">Duo Push</text>
<line x1="58" y1="428" x2="58" y2="450" stroke="#e2e8f0" stroke-width="1.5"/>
<polygon points="53,445 58,455 63,445" fill="#e2e8f0"/>
<text x="58" y="474" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">Save</text>
<text x="58" y="490" text-anchor="middle" fill="#4a5568" font-size="11" font-weight="500">session</text>
<!-- Dashed arrow: Login to Plugin -->
<line x1="102" y1="435" x2="180" y2="435" stroke="#e53e3e" stroke-width="1.5" stroke-dasharray="6,4" opacity="0.4"/>
<polygon points="175,430 184,435 175,440" fill="#e53e3e" opacity="0.4"/>
<text x="141" y="426" text-anchor="middle" fill="#e53e3e" font-size="9" font-weight="500" opacity="0.6">session</text>
<!-- LEGEND -->
<g opacity="0.7">
<rect x="856" y="548" width="92" height="88" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
<rect x="868" y="562" width="10" height="10" rx="5" fill="url(#chatbotGrad)"/>
<text x="884" y="572" fill="#4a5568" font-size="9">Chatbot</text>
<rect x="868" y="580" width="10" height="10" rx="5" fill="url(#pluginGrad)"/>
<text x="884" y="590" fill="#4a5568" font-size="9">MCP Server</text>
<rect x="868" y="598" width="10" height="10" rx="5" fill="url(#connectorGrad)"/>
<text x="884" y="608" fill="#4a5568" font-size="9">Connector</text>
<rect x="868" y="616" width="10" height="10" rx="5" fill="url(#loginGrad)"/>
<text x="884" y="626" fill="#4a5568" font-size="9">Login</text>
</g>
</svg>
