Hello everyone,
Today I wanted to run an experiment: Agents as Components
My thinking is simple: AI SDK gives you ToolLoopAgent, a class on the server. React gives you components, encapsulated, with state and hooks. What if an agent evolves to a React component?
I shared my thinking on X, I faced some challenges, for example, experimental_context doesn’t persist between requests.
I created tools that return state:
const rememberFact = tool({
execute: async ({ fact }) => ({ stored: true, fact })
})
const setMode = tool({
execute: async ({ mode, reason }) => ({ mode, reason })
})
And hooks that extract that state, yeah, something like Tools as Hooks 
const agentMode = useAgentMode() // reads setMode outputs
const sessionContext = useSessionContext() // reads rememberFact outputs
Anyway, the result was very satisfying, I managed to preserve states between requests, with no database!
Conclusions
I mapped 5 of 10 React patterns:
✓ props, state, hooks, composition, Provider
Still yet to explore: lifecycle, error boundaries, suspense, refs, controlled components
But in general, the analogy has room to grow.
Repo:
Demo:
Just wanted to share that, I know we commonly share ready-to-use products here, but wanted to make something different.
Thanks,
Ronny
