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:

1
const rememberFact = tool({
2
  execute: async ({ fact }) => ({ stored: true, fact })
3
})
4

5
const setMode = tool({
6
  execute: async ({ mode, reason }) => ({ mode, reason })
7
})

And hooks that extract that state, yeah, something like Tools as Hooks

1
const agentMode = useAgentMode()           // reads setMode outputs
2
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: https://github.com/rbadillap/agents-as-components

GitHub

GitHub - rbadillap/agents-as-components: Exploring how AI agents can behave like React components. State, hooks, and composition patterns for ToolLoopAgent. Built with AI SDK.

Exploring how AI agents can behave like React components. State, hooks, and composition patterns for ToolLoopAgent. Built with AI SDK. - rbadillap/agents-as-components

Demo: https://x.com/rbadillap/status/2022083294834442425

Just wanted to share that, I know we commonly share ready-to-use products here, but wanted to make something different.

Thanks, Ronny