Have anyone else worked with multiple AI states within the same app?

[hinderberg]

I'm building an app that requires many different agents, and it is natural that I do not want them all to share the same state. I'm exploring software design patterns for having multiple createAI states within the same app and wondering what others have done in the same situation.

I'm using NextJS and Vercel for deployment. What I've considered so far is:

• Separate states by routes - not ideal since some of these agents will work under the same route
• Having one state to rule them all - Since history.update does not take partial objects, this will get pretty messy
• Others?

[defless]

If I get well what you're talking about, here's what I did to achieve that:

I created multiple Ai 'stores' with multiple createAi allowing me to have distinct Ai/Ui states.
But they all share the same onMessage action (using streamUi).

    // one of my AiStore
    <AiStore
      initialAIState={[]}
      initialUIState={[{
        id: 0,
        display: (<p>Hello there</p>),
      }]}
      onMessage={submitUserMessage.bind(null, 'oneOfMyUseCase')}
    >
        // my component
     </AiStore>

// AiStore
const AiStore = ({
  initialAIState,
  initialUIState,
  onMessage,
  children,
}: AiStoreProps) => {
  const Ai = createAI({
    actions: {
      onMessage,
    },
    initialAIState,
    initialUIState,
  });

  return (
    <Ai children={children} />
  );
};

It's this action that allow streamUI to call the right tools according to a parameter passed from the page to my submitUserMessage action (here: oneOfMyUseCase for example).

export async function submitUserMessage (
  useCase: 'oneOfMyUseCase' | 'theOtherUseCase',
  input: string,
) {
  const history = getMutableAIState();

  history.update([
    ...history.get(),
    { role: 'user', content: input },
  ]);

  const ui = await streamUI({
    model: openai('gpt-3.5-turbo'),
    system: 'You are an assistant',
    messages: [...history.get()],
    text: ({ content, done }) => {
      if (done) {
        history.done([
          ...history.get(),
          { role: 'assistant', content },
        ]);
      }

      return (
        <p>{ content }</p>
      );
    },

    tools: getTools(history, context), // this methods returns use case associated tools
  });

  return {
    id: Date.now(),
    display: ui.value,
  };
}

When submitUserMessage updates the history, it only updates the one from it has been called.

(If that's not clear enough I can work on a sandbox)

[hinderberg]

Thanks. It's the same pattern I ended up using as well. I would love for others to show different ways of doing it.

[dvzrd]

If you're talking about architecture, you can split your layout's data with parallel routes if you're using Next. Using this pattern you can have a layout, page, loading, etc for every slot as well as your base page. There's other examples in docs for parallel fetching you can look at to get an idea of how your UI can render asynchronously.

Here's an example:

(ai)
  feature/
    @header
       page.tsx
    @footer
       page.tsx
    @sidebar
       page.tsx
       loading.tsx
       layout.tsx
    layout.tsx
    loading.tsx
    page.tsx

If you're looking for a pattern that uses a single (createAI) store, wouldn't it be possible to have a complex object mapped to initialAIState and/or initialUIState? You can write actions to fill different parts of these objects based on user input or page load. If you need a global store, this might be the way to go. I guess you can also create your own store if you want to sync up the separate stores? Not sure about that one but if someone has a solution please let me know.

[Pozi09]

What kind of application are you developing, mobile or web?

[hinderberg]

Both, why?

[Pozi09]

I'm an aspiring developer and I'm wondering how you promote and monetize them, if it's not too much trouble, could you please tell me about it