πΊοΈ Three Ways to Use LLMs
1. π¬ Chat Interfaces β Product Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Interface Demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; padding: 0; }
.infographic-chatui {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--radius: 10px;
--body-font: 'Inter', system-ui, sans-serif;
box-sizing: border-box;
max-width: 820px;
margin: 0 auto;
padding: 1.5rem clamp(1.25rem, 5vw, 2rem);
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-chatui[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #13171F;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.infographic-chatui * { box-sizing: border-box; }
.infographic-chatui .cu-mockup {
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-alt);
display: flex; flex-direction: column; height: 420px;
}
.infographic-chatui .cu-headerbar {
display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper); flex-shrink: 0;
}
.infographic-chatui .cu-header-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf7d; }
.infographic-chatui .cu-header-title { font-weight: 600; font-size: 0.88rem; }
.infographic-chatui .cu-thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.infographic-chatui .cu-row { display: flex; align-items: flex-end; gap: 0.5rem; }
.infographic-chatui .cu-row-user { justify-content: flex-end; }
.infographic-chatui .cu-row-bot { justify-content: flex-start; }
.infographic-chatui .cu-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.infographic-chatui .cu-avatar svg { width: 15px; height: 15px; }
.infographic-chatui .cu-avatar-user { background: var(--accent-soft); color: var(--accent); }
.infographic-chatui .cu-avatar-bot { background: var(--ink); color: var(--paper); }
.infographic-chatui[data-theme="dark"] .cu-avatar-bot { background: var(--accent); color: var(--paper); }
.infographic-chatui .cu-bubble { max-width: 60%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.85rem; line-height: 1.4; word-wrap: break-word; }
.infographic-chatui .cu-bubble-user { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.infographic-chatui .cu-bubble-bot { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.infographic-chatui .cu-typing { display: flex; gap: 3px; padding: 0.8rem 0.9rem; }
.infographic-chatui .cu-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; animation: cuBlink 1.2s infinite ease-in-out; }
.infographic-chatui .cu-typing span:nth-child(2) { animation-delay: 0.2s; }
.infographic-chatui .cu-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cuBlink { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
.infographic-chatui .cu-inputrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.75rem; border-top: 1px solid var(--line); background: var(--paper); flex-shrink: 0; }
.infographic-chatui .cu-input {
flex: 1; font-size: 0.85rem; color: var(--ink); background: var(--paper); padding: 0.5rem 0.75rem;
border: 1px solid var(--line); border-radius: 999px; font-family: inherit; outline: none;
}
.infographic-chatui .cu-input:focus { border-color: var(--accent); }
.infographic-chatui .cu-input::placeholder { color: var(--ink-soft); }
.infographic-chatui .cu-sendbtn {
width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}
.infographic-chatui .cu-sendbtn:disabled { opacity: 0.5; cursor: default; }
.infographic-chatui .cu-sendbtn svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
.infographic-chatui *, .infographic-chatui *::before, .infographic-chatui *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
</style>
</head>
<body>
<div class="infographic-chatui" id="chatuiRoot">
<div class="cu-mockup">
<div class="cu-headerbar">
<span class="cu-header-dot"></span>
<span class="cu-header-title">Assistant</span>
</div>
<div class="cu-thread" id="cuThread">
<div class="cu-row cu-row-bot">
<div class="cu-avatar cu-avatar-bot">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6V2H8" /><path d="M15 11v2" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" /><path d="M9 11v2" /></svg>
</div>
<div class="cu-bubble cu-bubble-bot">Hi! Try typing a message below.</div>
</div>
</div>
<div class="cu-inputrow">
<input class="cu-input" id="cuInput" type="text" placeholder="Message Assistantβ¦" autocomplete="off" />
<button class="cu-sendbtn" id="cuSendBtn" type="button" aria-label="Send">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" /><path d="m21.854 2.147-10.94 10.939" /></svg>
</button>
</div>
</div>
</div>
<script>
(function () {
var wrapper = document.getElementById('chatuiRoot');
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
var thread = document.getElementById('cuThread');
var input = document.getElementById('cuInput');
var sendBtn = document.getElementById('cuSendBtn');
var replies = [
"Got it β that's a great question. Here's a quick way to think about it.",
"Sure! Here's a dummy response standing in for a real one.",
"Interesting. In a real build, this is where the API response would land.",
"Noted. This demo just echoes a canned reply, but the flow is the real thing.",
"Good point β that's exactly the kind of message a chat UI needs to handle well."
];
var replyIndex = 0;
var waiting = false;
function botIconSvg() {
return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6V2H8" /><path d="M15 11v2" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" /><path d="M9 11v2" /></svg>';
}
function userIconSvg() {
return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0" /><circle cx="12" cy="10" r="4" /><circle cx="12" cy="12" r="10" /></svg>';
}
function scrollToBottom() { thread.scrollTop = thread.scrollHeight; }
function addUserMessage(text) {
var row = document.createElement('div');
row.className = 'cu-row cu-row-user';
var bubble = document.createElement('div');
bubble.className = 'cu-bubble cu-bubble-user';
bubble.textContent = text;
var avatar = document.createElement('div');
avatar.className = 'cu-avatar cu-avatar-user';
avatar.innerHTML = userIconSvg();
row.appendChild(bubble);
row.appendChild(avatar);
thread.appendChild(row);
scrollToBottom();
}
function addTypingIndicator() {
var row = document.createElement('div');
row.className = 'cu-row cu-row-bot';
var avatar = document.createElement('div');
avatar.className = 'cu-avatar cu-avatar-bot';
avatar.innerHTML = botIconSvg();
var bubble = document.createElement('div');
bubble.className = 'cu-bubble cu-bubble-bot cu-typing';
bubble.innerHTML = '<span></span><span></span><span></span>';
row.appendChild(avatar);
row.appendChild(bubble);
thread.appendChild(row);
scrollToBottom();
return bubble;
}
function replaceWithBotMessage(bubbleEl, text) {
bubbleEl.className = 'cu-bubble cu-bubble-bot';
bubbleEl.textContent = text;
scrollToBottom();
}
function sendMessage() {
if (waiting) return;
var text = input.value.trim();
if (!text) return;
addUserMessage(text);
input.value = '';
waiting = true;
sendBtn.disabled = true;
var typingBubble = addTypingIndicator();
var delay = 600 + Math.random() * 500;
setTimeout(function () {
var reply = replies[replyIndex % replies.length];
replyIndex++;
replaceWithBotMessage(typingBubble, reply);
waiting = false;
sendBtn.disabled = false;
input.focus();
}, delay);
}
sendBtn.addEventListener('click', sendMessage);
input.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
e.preventDefault();
sendMessage();
}
});
})();
</script>
</body>
</html>This is the most familiar way β using a finished AI product with a UI. You're not touching the raw model directly; you're using a polished product built on top of it.
Examples: ChatGPT, Claude app, Gemini app
What's included under the hood:
π₯οΈ A user interface
π§ Conversation memory
π Web search
π οΈ Built-in tools and features
π‘ When you use ChatGPT, you're not using GPT directly β you're using a full product that happens to be powered by GPT.
βοΈ 2. Cloud APIs β Programmatic Access
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cloud APIs β Direct vs Orchestration</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,600&family=Inter:wght@500;600;700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; padding: 0; }
.infographic-cloudapi {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--radius: 10px;
--display-font: 'Newsreader', serif;
--body-font: 'Inter', system-ui, sans-serif;
box-sizing: border-box;
max-width: 900px;
margin: 0 auto;
padding: 1.75rem clamp(1.25rem, 5vw, 2.5rem) 2rem;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-cloudapi[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #13171F;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.infographic-cloudapi * { box-sizing: border-box; }
.infographic-cloudapi .ca-title {
font-family: var(--display-font); font-weight: 600; font-size: clamp(1.3rem, 4vw, 1.7rem);
text-align: center; margin: 0 0 1.25rem;
}
.infographic-cloudapi .ca-controls { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.infographic-cloudapi .ca-btn {
display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.infographic-cloudapi .ca-btn:hover { border-color: var(--accent); color: var(--accent); }
.infographic-cloudapi .ca-btn svg { width: 16px; height: 16px; }
.infographic-cloudapi .ca-columns { display: flex; flex-direction: column; gap: 2.75rem; }
.infographic-cloudapi .ca-lane-label {
text-align: center; font-weight: 700; font-size: 0.95rem; margin-bottom: 1.5rem; color: var(--ink);
}
.infographic-cloudapi .ca-track { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; min-height: 90px; }
.infographic-cloudapi .ca-line-fwd, .infographic-cloudapi .ca-line-back {
position: absolute; left: 40px; right: 40px; height: 2px; background: var(--line);
}
.infographic-cloudapi .ca-line-fwd { top: 38%; }
.infographic-cloudapi .ca-line-back { top: 62%; }
.infographic-cloudapi .ca-arrowhead { position: absolute; width: 0; height: 0; border-style: solid; }
.infographic-cloudapi .ca-arrowhead-fwd {
top: 38%; right: 36px; transform: translateY(-50%); border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent var(--line);
}
.infographic-cloudapi .ca-arrowhead-back {
top: 62%; left: 36px; transform: translateY(-50%); border-width: 5px 7px 5px 0;
border-color: transparent var(--line) transparent transparent;
}
.infographic-cloudapi .ca-dot {
position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft); left: 40px; opacity: 0;
}
.infographic-cloudapi .ca-dot-fwd { top: 38%; margin-top: -4.5px; }
.infographic-cloudapi .ca-dot-back { top: 62%; margin-top: -4.5px; }
.ca-lane[data-lanes="3"] .ca-dot-fwd { animation: caDotFwd3 3.6s ease-in-out infinite; animation-play-state: paused; }
.ca-lane[data-lanes="3"] .ca-dot-back { animation: caDotBack3 3.6s ease-in-out infinite; animation-play-state: paused; }
.ca-lane[data-lanes="4"] .ca-dot-fwd { animation: caDotFwd4 4.4s ease-in-out infinite; animation-play-state: paused; }
.ca-lane[data-lanes="4"] .ca-dot-back { animation: caDotBack4 4.4s ease-in-out infinite; animation-play-state: paused; }
.infographic-cloudapi.is-playing .ca-dot-fwd,
.infographic-cloudapi.is-playing .ca-dot-back { animation-play-state: running; }
@keyframes caDotFwd3 {
0% { left: 40px; opacity: 1; }
45% { left: calc(100% - 40px); opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; left: 40px; }
}
@keyframes caDotBack3 {
0%, 50% { opacity: 0; left: calc(100% - 40px); }
55% { opacity: 1; }
95% { left: 40px; opacity: 1; }
100% { left: 40px; opacity: 0; }
}
@keyframes caDotFwd4 {
0% { left: 40px; opacity: 1; }
45% { left: calc(100% - 40px); opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; left: 40px; }
}
@keyframes caDotBack4 {
0%, 50% { opacity: 0; left: calc(100% - 40px); }
55% { opacity: 1; }
95% { left: 40px; opacity: 1; }
100% { left: 40px; opacity: 0; }
}
.infographic-cloudapi .ca-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: var(--paper); }
.infographic-cloudapi .ca-badge {
width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(37,99,235,0.15);
}
.infographic-cloudapi[data-theme="dark"] .ca-badge { box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.infographic-cloudapi .ca-badge svg { width: 26px; height: 26px; }
.infographic-cloudapi .ca-node-label { font-size: 0.78rem; font-weight: 600; color: var(--ink); text-align: center; }
.infographic-cloudapi .ca-provider-cluster {
width: 56px; height: 56px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-items: center; justify-items: center;
padding: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); position: relative;
}
.infographic-cloudapi .ca-provider-cluster svg { width: 13px; height: 13px; color: var(--ink); }
.infographic-cloudapi .ca-swap-badge {
position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
border: 2px solid var(--paper);
}
.infographic-cloudapi .ca-swap-badge svg { width: 11px; height: 11px; }
.infographic-cloudapi .ca-framework-badge {
width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
display: flex; align-items: center; justify-content: center; position: relative;
box-shadow: 0 3px 10px rgba(37,99,235,0.15);
}
.infographic-cloudapi .ca-framework-badge svg.ca-icon-layers { width: 26px; height: 26px; }
.infographic-cloudapi .ca-framework-badge .ca-lc-chip {
position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%;
background: var(--paper); border: 2px solid var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,0.15);
display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.infographic-cloudapi .ca-lc-chip svg { width: 12px; height: 12px; }
.infographic-cloudapi .ca-tags { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.25rem; }
.infographic-cloudapi .ca-tag {
display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px;
background: var(--paper-alt); border: 1px solid var(--line); font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
}
.infographic-cloudapi .ca-tag svg { width: 13px; height: 13px; color: var(--accent); }
@media (min-width: 760px) {
.infographic-cloudapi .ca-columns { flex-direction: row; gap: 2rem; }
.infographic-cloudapi .ca-lane { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
.infographic-cloudapi .ca-dot { animation: none !important; opacity: 1; }
}
</style>
</head>
<body>
<div class="infographic-cloudapi" id="cloudApiRoot">
<div class="ca-controls">
<button class="ca-btn" id="caPlayBtn" aria-label="Play">
<svg id="caPlayIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg>
<svg id="caPauseIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
</button>
<button class="ca-btn" id="caRestartBtn" aria-label="Restart">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
</button>
</div>
<div class="ca-columns">
<!-- LANE 1: Direct LLM APIs -->
<div class="ca-lane" data-lanes="3">
<div class="ca-lane-label">Direct LLM APIs</div>
<div class="ca-track">
<div class="ca-line-fwd"></div>
<div class="ca-line-back"></div>
<div class="ca-arrowhead ca-arrowhead-fwd"></div>
<div class="ca-arrowhead ca-arrowhead-back"></div>
<div class="ca-dot ca-dot-fwd"></div>
<div class="ca-dot ca-dot-back"></div>
<div class="ca-node">
<div class="ca-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
</div>
<span class="ca-node-label">Your Code</span>
</div>
<div class="ca-node">
<div class="ca-provider-cluster">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M75.91 73.628V62.232c0-.96.36-1.68 1.199-2.16l22.912-13.194c3.119-1.8 6.838-2.639 10.676-2.639 14.394 0 23.511 11.157 23.511 23.032 0 .839 0 1.799-.12 2.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318 0L75.91 73.627Zm53.499 44.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142 69.55l9.836-5.638c.839-.48 1.559-.48 2.399 0l22.912 13.195c6.598 3.839 11.035 11.995 11.035 19.912 0 9.116-5.397 17.513-13.915 20.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834 9.837-22.55 23.152-22.55 5.039 0 9.716 1.679 13.676 4.678L70.993 55.516c-1.44.84-2.16 2.039-2.16 3.719v34.787-.002Zm21.173 12.234L75.91 98.339V81.546l14.095-7.917 14.094 7.917v16.793l-14.094 7.916Zm9.056 36.467c-5.038 0-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839 2.159-2.038 2.159-3.718V85.863l9.956 5.757c.84.48 1.2 1.2 1.2 2.16v26.389c0 12.835-9.957 22.552-23.27 22.552v.001Zm-28.43-26.75L47.72 102.778c-6.599-3.84-11.036-11.996-11.036-19.913 0-9.236 5.518-17.513 14.034-20.992v27.35c0 1.68.72 2.879 2.16 3.718l29.989 17.393-9.837 5.638c-.84.48-1.56.48-2.399 0Zm-1.318 19.673c-13.555 0-23.512-10.196-23.512-22.792 0-.959.12-1.919.24-2.879l23.63 13.675c1.44.84 2.88.84 4.32 0l30.108-17.392v11.395c0 .96-.361 1.68-1.2 2.16l-22.912 13.194c-3.119 1.8-6.837 2.639-10.675 2.639Zm29.748 14.274c14.515 0 26.63-10.316 29.39-23.991 13.434-3.479 22.071-16.074 22.071-28.91 0-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557 0-17.153-13.915-29.99-29.989-29.99-3.239 0-6.358.48-9.477 1.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515 0-26.63 10.316-29.39 23.991-13.434 3.48-22.07 16.074-22.07 28.91 0 8.396 3.598 16.553 10.075 22.431-.6 2.519-.96 5.038-.96 7.556 0 17.154 13.915 29.989 29.99 29.989 3.238 0 6.357-.479 9.476-1.559 5.397 5.278 12.835 8.637 20.992 8.637Z" transform="translate(2 2) scale(0.111111)"/></svg>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>
<svg viewBox="0 0 168 168"><path fill="currentColor" d="M0 0 C4.60646 -0.02449 9.21293 -0.04898 13.95898 -0.07422 C18.36178 -0.07809 22.76457 -0.08195 27.30078 -0.08594 C31.35142 -0.09416 35.40206 -0.10237 39.57544 -0.11084 C50.01716 0.39084 58.1045 1.98581 65.86719 9.32422 C72.58732 16.89518 75.64986 24.7641 76 34.75 C75.80503 43.04213 73.77233 50.05835 68.45703 56.51172 C48.59843 77.42243 12.96633 86.72707 -13.3125 96.375 C-14.39531 96.77332 -15.47813 97.17164 -16.59375 97.58203 C-31.41225 101.90409 -48.91004 100.28533 -62.80469 93.72656 C-67.89984 90.87377 -72.64017 87.96542 -76.3125 83.375 C-76.99609 82.74219 -77.67969 82.05859 -78.3125 81.375 C-79.61689 79.21517 -80.90575 77.04821 -82.1875 74.875 C-82.5523 74.2743 -82.91711 73.67359 -83.29297 73.05469 C-87.65872 65.59322 -88.68539 58.56469 -88.625 50 C-88.61936 49.16146 -88.61372 48.32293 -88.60791 47.45898 C-88.48759 41.32644 -87.87973 36.00919 -85.3125 30.375 C-84.74402 29.06209 -84.74402 29.06209 -84.16406 27.72266 C-78.77479 16.61702 -70.37319 8.68087 -59.23438 3.49609 C-41.23387 -3.41052 -18.94818 0.00529 0 0 Z" transform="translate(89.3125,0.625)"/><path fill="currentColor" d="M0 0 C7.10255 5.87716 12.06293 13.31284 14.45703 22.24219 C15.74272 32.99405 14.88872 42.71423 9.45703 52.24219 C8.88082 53.26893 8.88082 53.26893 8.29297 54.31641 C3.47293 61.87436 -4.30344 66.22206 -12.54297 69.24219 C-20.50509 71.23272 -28.99856 70.51365 -37.16797 70.55469 C-39.06934 70.58369 -40.9707 70.6127 -42.92969 70.64258 C-54.06986 70.69318 -62.25283 70.4685 -71.53125 64.23438 C-78.01435 58.32876 -82.8589 52.02936 -84.54297 43.24219 C-85.2771 33.61382 -84.43782 24.94395 -78.73047 16.92969 C-70.2092 5.92603 -56.05818 1.71882 -43.54297 -3.13281 C-42.65924 -3.47868 -41.7755 -3.82456 -40.86499 -4.18091 C-26.75133 -9.53298 -12.64974 -8.74406 0 0 Z" transform="translate(152.54296875,96.7578125)"/><path fill="currentColor" d="M0 0 C6.6089 4.33458 11.58909 9.56183 13.92969 17.26562 C14.49441 20.83632 14.64766 24.34125 14.67969 27.95312 C14.70253 29.27075 14.70253 29.27075 14.72583 30.61499 C14.53767 38.53492 11.63107 44.14865 6.49219 50.07812 C-1.22158 56.66305 -7.77258 58.76832 -17.82031 58.57422 C-25.3487 57.85938 -30.87067 54.26191 -36.34375 49.20312 C-42.5565 42.23135 -43.41871 34.23624 -43.45532 25.24487 C-43.29456 16.55946 -40.6106 10.82878 -34.82031 4.39062 C-25.29255 -4.221 -11.55165 -5.84541 0 0 Z" transform="translate(44.0703125,108.734375)"/></svg>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z"/></svg>
</div>
<span class="ca-node-label">Provider API</span>
</div>
<div class="ca-node">
<div class="ca-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
</div>
<span class="ca-node-label">Model</span>
</div>
</div>
<div class="ca-tags">
<span class="ca-tag">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>
API Key
</span>
<span class="ca-tag">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
Per Token
</span>
</div>
</div>
<!-- LANE 2: Orchestration Frameworks -->
<div class="ca-lane" data-lanes="4">
<div class="ca-lane-label">Orchestration Frameworks</div>
<div class="ca-track">
<div class="ca-line-fwd"></div>
<div class="ca-line-back"></div>
<div class="ca-arrowhead ca-arrowhead-fwd"></div>
<div class="ca-arrowhead ca-arrowhead-back"></div>
<div class="ca-dot ca-dot-fwd"></div>
<div class="ca-dot ca-dot-back"></div>
<div class="ca-node">
<div class="ca-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
</div>
<span class="ca-node-label">Your Code</span>
</div>
<div class="ca-node">
<div class="ca-framework-badge">
<svg class="ca-icon-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>
<span class="ca-lc-chip">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.0988 5.9175C2.7359 5.9175 0 8.6462 0 12s2.736 6.0825 6.0988 6.0825h11.8024C21.2641 18.0825 24 15.3538 24 12s-2.736-6.0825-6.0988-6.0825ZM5.9774 7.851c.493.0124 1.02.2496 1.273.6228.3673.4592.4778 1.0668.8944 1.4932.5604.6118 1.199 1.1505 1.7161 1.802.4892.5954.8386 1.2937 1.1436 1.9975.1244.2335.1257.5202.31.7197.0908.1204.5346.4483.4383.5645.0555.1204.4702.286.3263.4027-.1944.04-.4129.0476-.5616-.1074-.0549.126-.183.0596-.2819.0432a4 4 0 0 0-.025.0736c-.3288.0219-.5754-.3126-.732-.565-.3111-.168-.6642-.2702-.982-.446-.0182.2895.0452.6485-.231.8353-.014.5565.8436.0656.9222.4804-.061.0067-.1286-.0095-.1774.0373-.2239.2172-.4805-.1645-.7385-.007-.3464.174-.3808.3161-.8096.352-.0237-.0359-.0143-.0592.0059-.0811.1207-.1399.1295-.3046.3356-.3643-.2122-.0334-.3899.0833-.5686.1757-.2323.095-.2304-.2141-.5878.0164-.0396-.0322-.0208-.0615.0018-.0864.0908-.1107.2102-.127.345-.1208-.663-.3686-.9751.4507-1.2813.0432-.092.0243-.1265.1068-.1845.1652-.05-.0548-.0123-.1212-.0099-.1857-.0598-.028-.1356-.041-.1179-.1366-.1171-.0395-.1988.0295-.286.0952-.0787-.0608.0532-.1492.0776-.2125.0702-.1216.23-.025.3111-.1126.2306-.1308.552.0814.8155.0455.203.0255.4544-.1825.3526-.39-.2171-.2767-.179-.6386-.1839-.9695-.0268-.1929-.491-.4382-.6252-.6462-.1659-.1873-.295-.4047-.4243-.6182-.4666-.9008-.3198-2.0584-.9077-2.8947-.266.1466-.6125.0774-.8418-.119-.1238.1125-.1292.2598-.139.4161-.297-.2962-.2593-.8559-.022-1.1855.0969-.1302.2127-.2373.342-.3316.0292-.0213.0391-.0419.0385-.0747.1174-.5267.5764-.7391 1.0694-.7267"/></svg>
</span>
</div>
<span class="ca-node-label">Framework</span>
</div>
<div class="ca-node">
<div class="ca-provider-cluster">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M75.91 73.628V62.232c0-.96.36-1.68 1.199-2.16l22.912-13.194c3.119-1.8 6.838-2.639 10.676-2.639 14.394 0 23.511 11.157 23.511 23.032 0 .839 0 1.799-.12 2.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318 0L75.91 73.627Zm53.499 44.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142 69.55l9.836-5.638c.839-.48 1.559-.48 2.399 0l22.912 13.195c6.598 3.839 11.035 11.995 11.035 19.912 0 9.116-5.397 17.513-13.915 20.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834 9.837-22.55 23.152-22.55 5.039 0 9.716 1.679 13.676 4.678L70.993 55.516c-1.44.84-2.16 2.039-2.16 3.719v34.787-.002Zm21.173 12.234L75.91 98.339V81.546l14.095-7.917 14.094 7.917v16.793l-14.094 7.916Zm9.056 36.467c-5.038 0-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839 2.159-2.038 2.159-3.718V85.863l9.956 5.757c.84.48 1.2 1.2 1.2 2.16v26.389c0 12.835-9.957 22.552-23.27 22.552v.001Zm-28.43-26.75L47.72 102.778c-6.599-3.84-11.036-11.996-11.036-19.913 0-9.236 5.518-17.513 14.034-20.992v27.35c0 1.68.72 2.879 2.16 3.718l29.989 17.393-9.837 5.638c-.84.48-1.56.48-2.399 0Zm-1.318 19.673c-13.555 0-23.512-10.196-23.512-22.792 0-.959.12-1.919.24-2.879l23.63 13.675c1.44.84 2.88.84 4.32 0l30.108-17.392v11.395c0 .96-.361 1.68-1.2 2.16l-22.912 13.194c-3.119 1.8-6.837 2.639-10.675 2.639Zm29.748 14.274c14.515 0 26.63-10.316 29.39-23.991 13.434-3.479 22.071-16.074 22.071-28.91 0-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557 0-17.153-13.915-29.99-29.989-29.99-3.239 0-6.358.48-9.477 1.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515 0-26.63 10.316-29.39 23.991-13.434 3.48-22.07 16.074-22.07 28.91 0 8.396 3.598 16.553 10.075 22.431-.6 2.519-.96 5.038-.96 7.556 0 17.154 13.915 29.989 29.99 29.989 3.238 0 6.357-.479 9.476-1.559 5.397 5.278 12.835 8.637 20.992 8.637Z" transform="translate(2 2) scale(0.111111)"/></svg>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>
<svg viewBox="0 0 168 168"><path fill="currentColor" d="M0 0 C4.60646 -0.02449 9.21293 -0.04898 13.95898 -0.07422 C18.36178 -0.07809 22.76457 -0.08195 27.30078 -0.08594 C31.35142 -0.09416 35.40206 -0.10237 39.57544 -0.11084 C50.01716 0.39084 58.1045 1.98581 65.86719 9.32422 C72.58732 16.89518 75.64986 24.7641 76 34.75 C75.80503 43.04213 73.77233 50.05835 68.45703 56.51172 C48.59843 77.42243 12.96633 86.72707 -13.3125 96.375 C-14.39531 96.77332 -15.47813 97.17164 -16.59375 97.58203 C-31.41225 101.90409 -48.91004 100.28533 -62.80469 93.72656 C-67.89984 90.87377 -72.64017 87.96542 -76.3125 83.375 C-76.99609 82.74219 -77.67969 82.05859 -78.3125 81.375 C-79.61689 79.21517 -80.90575 77.04821 -82.1875 74.875 C-82.5523 74.2743 -82.91711 73.67359 -83.29297 73.05469 C-87.65872 65.59322 -88.68539 58.56469 -88.625 50 C-88.61936 49.16146 -88.61372 48.32293 -88.60791 47.45898 C-88.48759 41.32644 -87.87973 36.00919 -85.3125 30.375 C-84.74402 29.06209 -84.74402 29.06209 -84.16406 27.72266 C-78.77479 16.61702 -70.37319 8.68087 -59.23438 3.49609 C-41.23387 -3.41052 -18.94818 0.00529 0 0 Z" transform="translate(89.3125,0.625)"/><path fill="currentColor" d="M0 0 C7.10255 5.87716 12.06293 13.31284 14.45703 22.24219 C15.74272 32.99405 14.88872 42.71423 9.45703 52.24219 C8.88082 53.26893 8.88082 53.26893 8.29297 54.31641 C3.47293 61.87436 -4.30344 66.22206 -12.54297 69.24219 C-20.50509 71.23272 -28.99856 70.51365 -37.16797 70.55469 C-39.06934 70.58369 -40.9707 70.6127 -42.92969 70.64258 C-54.06986 70.69318 -62.25283 70.4685 -71.53125 64.23438 C-78.01435 58.32876 -82.8589 52.02936 -84.54297 43.24219 C-85.2771 33.61382 -84.43782 24.94395 -78.73047 16.92969 C-70.2092 5.92603 -56.05818 1.71882 -43.54297 -3.13281 C-42.65924 -3.47868 -41.7755 -3.82456 -40.86499 -4.18091 C-26.75133 -9.53298 -12.64974 -8.74406 0 0 Z" transform="translate(152.54296875,96.7578125)"/><path fill="currentColor" d="M0 0 C6.6089 4.33458 11.58909 9.56183 13.92969 17.26562 C14.49441 20.83632 14.64766 24.34125 14.67969 27.95312 C14.70253 29.27075 14.70253 29.27075 14.72583 30.61499 C14.53767 38.53492 11.63107 44.14865 6.49219 50.07812 C-1.22158 56.66305 -7.77258 58.76832 -17.82031 58.57422 C-25.3487 57.85938 -30.87067 54.26191 -36.34375 49.20312 C-42.5565 42.23135 -43.41871 34.23624 -43.45532 25.24487 C-43.29456 16.55946 -40.6106 10.82878 -34.82031 4.39062 C-25.29255 -4.221 -11.55165 -5.84541 0 0 Z" transform="translate(44.0703125,108.734375)"/></svg>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z"/></svg>
<span class="ca-swap-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
</span>
</div>
<span class="ca-node-label">Provider API</span>
</div>
<div class="ca-node">
<div class="ca-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
</div>
<span class="ca-node-label">Model</span>
</div>
</div>
<div class="ca-tags">
<span class="ca-tag">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
Swappable
</span>
</div>
</div>
</div>
</div>
<script>
(function () {
var wrapper = document.getElementById('cloudApiRoot');
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') { dark = true; }
else if (bodyAttr === 'false') { dark = false; }
else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
var playBtn = document.getElementById('caPlayBtn');
var restartBtn = document.getElementById('caRestartBtn');
var playIcon = document.getElementById('caPlayIcon');
var pauseIcon = document.getElementById('caPauseIcon');
var playing = false;
function setPlaying(state) {
playing = state;
wrapper.classList.toggle('is-playing', playing);
playIcon.style.display = playing ? 'none' : '';
pauseIcon.style.display = playing ? '' : 'none';
}
playBtn.addEventListener('click', function () { setPlaying(!playing); });
restartBtn.addEventListener('click', function () {
var dots = wrapper.querySelectorAll('.ca-dot');
dots.forEach(function (d) {
d.style.animation = 'none';
void d.offsetWidth;
d.style.animation = '';
});
setPlaying(true);
});
})();
</script>
</body>
</html>How developers interact with models through code β send a request, get a response.
Two sub-categories
Call a model provider's endpoint over HTTP. You write the code, they run the model.
Requires an API key from the provider
Billed per token (input + output)
Examples: OpenAI, Anthropic, Cohere, Mistral
import anthropic
client = anthropic.Anthropic()
response = client.messages.create(
model="claude-sonnet-4-20250514",
messages=[{"role": "user", "content": "Explain gradient descent"}]
)
print(response.content[0].text)Libraries that sit on top of an API and add application-level features β memory, tools, retrieval, and agent logic. The model still runs in the cloud; the framework just structures how you talk to it.
LangChain is the most popular β adds conversation memory, document Q&A (RAG), and tool use
Swap the underlying model (GPT-4 β Claude) without rewriting your app
Good for: chatbots, document Q&A, autonomous agents
from langchain_openai import ChatOpenAI
from langchain.chains import ConversationChain
llm = ChatOpenAI(model="gpt-4o") # model runs on OpenAI's servers
chain = ConversationChain(llm=llm) # adds memory, history
chain.predict(input="What is backpropagation?")Other options
Managed cloud platforms β AWS Bedrock, Google Vertex AI, Azure AI β let enterprises access multiple models through their existing cloud account, with added compliance, billing control, and private networking.
API routing platforms β like OpenRouter β let you call many providers through a single unified API, making it easy to switch models or optimise for cost.
Key benefit of this whole category: no infrastructure to manage. You write code, they handle the servers, GPUs, and uptime.
3. π» Local Inference β Run It Yourself
Running the model entirely on your own machine β no cloud, no API, no internet needed.
Benefits:
π‘οΈ Full privacy
βοΈ Works offline
πΈ Zero API costs
π¬ Complete control and experimentation
Two main ways to run models locally:
π€ HuggingFace Transformers
Load model architecture, weights, and tokenizer directly in Python
Highly flexible with massive model selection
Best for advanced users who want full control
from transformers import AutoModelπ¦ Ollama
Simplified, beginner-friendly local model runtime
Pre-packaged models with optimized execution
Comes with a local API interface out of the box
Your App β Local API (Ollama) β Model on Your Machineβ‘ Feature | π¦ Ollama | π€ HuggingFace |
|---|---|---|
Ease of use | Very easy | Moderate |
Flexibility | Limited | Very high |
Performance | Optimized | Depends |
Model selection | Curated | Massive |
Local API | β Built-in | β Manual setup |
π Key Terms to Remember
π’ Parameters β learned numbers that store the model's knowledge (e.g. 7B = 7 billion parameters)
βοΈ Weights β the actual numerical values inside the model; weights = knowledge
βοΈ Inference β Inference is simply running a trained model on new input to get an output.
ποΈ Distillation β compressing knowledge from a large model into a smaller one