Install tap and create your first resource.
Installation
npm install @assistant-ui/tapDefine a resource
Resources are the building blocks of tap. They use hooks you already know from React — but run outside of React components.
import { resource, tapState, tapEffect } from "@assistant-ui/tap";
const Counter = resource(() => {
const [count, setCount] = tapState(0);
tapEffect(() => {
console.log(`Count: ${count}`);
}, [count]);
return {
count,
increment: () => setCount((c) => c + 1),
};
});Use it
Create an instance with createResourceRoot, then read state and call methods on it.
import { createResourceRoot } from "@assistant-ui/tap";
const root = createResourceRoot();
const handle = root.render(Counter());
// subscribe to changes
handle.subscribe(() => {
console.log(handle.getValue().count);
});
// call methods
handle.getValue().increment(); // logs: "Count: 1"
handle.getValue().increment(); // logs: "Count: 2"
// cleanup
root.unmount();Use it in React
Use useResource to bind a resource to a React component's lifecycle.
import { useResource } from "@assistant-ui/tap/react";
function CounterComponent() {
const { count, increment } = useResource(Counter());
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}