import { useState } from 'react'; export default function ContextEngineeringDiagram() { const [activeLayer, setActiveLayer] = useState(null); const layers = [ { id: 'system', label: 'System Prompt', color: '#6366f1', tokens: '~2-8%', description: 'Identity, capabilities, constraints, and behavioral instructions that shape the model\'s persona and boundaries.', examples: ['Role definition', 'Output format', 'Safety rules'] }, { id: 'memory', label: 'Memory', color: '#8b5cf6', tokens: '~5-15%', description: 'Persistent knowledge about the user, their preferences, and prior interactions across sessions.', examples: ['User preferences', 'Past decisions', 'Learned context'] }, { id: 'retrieved', label: 'Retrieved Context', color: '#a855f7', tokens: '~20-50%', description: 'Dynamically fetched information from external sources — documents, databases, APIs, search results.', examples: ['RAG documents', 'Search results', 'API responses'] }, { id: 'tools', label: 'Tool Definitions', color: '#d946ef', tokens: '~5-10%', description: 'Schemas and descriptions of available functions the model can invoke to take actions or gather information.', examples: ['Function schemas', 'API specs', 'Action definitions'] }, { id: 'history', label: 'Conversation History', color: '#ec4899', tokens: '~10-30%', description: 'The rolling window of prior messages in the current session, providing conversational continuity.', examples: ['Prior turns', 'Assistant responses', 'Tool results'] }, { id: 'user', label: 'User Input', color: '#f43f5e', tokens: '~1-5%', description: 'The current query or instruction from the user — often the smallest but most important piece.', examples: ['Current query', 'Attached files', 'Instructions'] } ]; return (

Context Engineering

The discipline of designing what goes into the context window — orchestrating information to maximize model performance within token constraints.

{/* Main Diagram */}

{/* Context Window Container */}

CONTEXT WINDOW ~128k tokens

{layers.map((layer) => (

setActiveLayer(layer.id)} onMouseLeave={() => setActiveLayer(null)} >

{layer.label} {layer.tokens}

))}

{/* Arrow pointing down */}

MODEL INFERENCE

{/* Detail Panel */}

{activeLayer ? ( <>

l.id === activeLayer)?.color }} > {layers.find(l => l.id === activeLayer)?.label}

{layers.find(l => l.id === activeLayer)?.description}

{layers.find(l => l.id === activeLayer)?.examples.map((ex, i) => (

{ex}

))}

) : (

Hover over a layer to explore its role in the context window.

)}

THE TRADEOFF

Every token spent on one layer is unavailable for another. Context engineering is the art of allocation.

); }

dog