stately.ai

useState()

import React, { useState } from 'react';

function EspressoCounter() {
  // Initialize the state variable `espressoCount` with an initial value of 0
  const [espressoCount, setEspressoCount] = useState(0);

  // Define a function to increment the espresso count
  const drinkEspresso = () => {
    setEspressoCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <h1>Espresso Counter</h1>
      <p>You have drunk {espressoCount} {espressoCount === 1 ? 'espresso' : 'espressos'}.</p>
      <button onClick={drinkEspresso}>Drink Espresso</button>
    </div>
  );
}

useReducer()

useEffect()

useContext()

useSyncExternalStore()

LLMs are
not enough

wattenberger.com/thoughts/boo-chatbots

exorva.com/blog/uis-chat-gpt-wont-replace

magrawala.substack.com/p/unpredictable-black-boxes-are-terrible

Input

Output

Input

Output

Goal

Start

AutoGPT

What is an agent?

Perform tasks → accomplish goal

Mastering Atari with Discrete World Models
(Google Research)

sites.google.com/view/op3-soccer

Creating intelligent agents

→ State machines

Determinism, explainability

→ Reinforcement learning

Exploration, exploitation

→ Large language models

Interpretation, creativity

State machines

The original AI

import { createMachine } from "xstate";

export const ghostMachine = createMachine(
  {
    id: "Ghost 👻",
    initial: "Wandering maze",
    states: {
      "Wandering maze": {
        on: {
          "Lose Pac-Man": {
            target: "Chase Pac-Man",
          },
          "Pac-Man eats power pill": {
            target: "Run away from Pac-Man",
          },
        },
      },
      "Chase Pac-Man": {
        on: {
          "Pac-Man eats power pill": {
            target: "Run away from Pac-Man",
          },
        },
      },
      "Run away from Pac-Man": {
        on: {
          "power pill wears off": {
            target: "Wandering maze",
          },
          "eaten by Pac-Man": {
            target: "Return to base",
          },
        },
      },
      "Return to base": {
        on: {
          "reach base": {
            target: "Wandering maze",
          },
        },
      },
    },
  }
);

import { useMachine } from '@xstate/react';

// ...

function Ghost() {
  const [state, send] = useMachine(ghostMachine);
  
  const chasing = state.matches('Chase Pac-Man');
  
  const onEaten = () => {
    send({ type: 'eaten by Pac-Man' });
  }
  
  // ...
}