List solutions and start an execution from your app

Ce contenu n’est pas encore disponible dans votre langue.

This page is for developers. It shows the three things an application does with the React SDK: list what can be launched, start an execution, and show the conversation.

What you need

An application wrapped in AgentivityProvider. See Start a VibeApp with the React SDK.
At least one solution with a tag in your workspace. See What a Solution is, and how to mark one.

List the solutions

useAgentivityClient gives the client. entities.fetchEntities returns the agents, teams and workflows of the workspace. With tags, it returns only those that carry a tag.

import { useEffect, useState } from 'react';
import { useAgentivityClient } from '@agentivity-labs/sdk-react';

export function Solutions({ onPick }: { onPick: (id: string) => void }) {
  const client = useAgentivityClient();
  const [solutions, setSolutions] = useState<{ id: string; displayName: string }[]>([]);

  useEffect(() => {
    client.entities.fetchEntities({ tags: ['solution'] }).then(setSolutions);
  }, [client]);

  return (
    <ul>
      {solutions.map((s) => (
        <li key={s.id}>
          <button onClick={() => onPick(s.id)}>{s.displayName}</button>
        </li>
      ))}
    </ul>
  );
}

Each entity also has a kind (agent, team or workflow) and a role, which you can show as a description.

Start an execution and show the conversation

runs.startExecution starts an execution. It returns an executionId and a streamUrl. useRunStream listens to the stream. ChatController turns the events into a conversation, and ChatDiscussion shows it.

import { useEffect, useMemo, useState } from 'react';
import { useAgentivityClient, useRunStream, ChatController, ChatDiscussion } from '@agentivity-labs/sdk-react';

export function SolutionChat({ solutionId }: { solutionId: string }) {
  const client = useAgentivityClient();
  const [streamUrl, setStreamUrl] = useState<string>();
  const [executionId, setExecutionId] = useState<string>();
  const controller = useMemo(() => new ChatController({ contextId: solutionId }), [solutionId]);

  const { events } = useRunStream(streamUrl);
  useEffect(() => {
    events.forEach(controller.feedEvent);
  }, [events, controller]);

  async function handleSend(text: string) {
    const session = await client.runs.startExecution({ entityId: solutionId, input: text, executionId, enableHil: true });
    setExecutionId(session.executionId);
    setStreamUrl(session.streamUrl);
  }

  return (
    <ChatDiscussion
      controller={controller}
      onSend={handleSend}
      onHilResponse={(gate, text, source) =>
        client.runs.submitHilResponse({ executionId: executionId!, requestId: gate.requestId, response: text, source })
      }
    />
  );
}

What each part does:

Part	Role
`entityId`	The identifier of the agent, the team or the workflow to run.
`input`	The request of the person.
`executionId`	Give the one you received to continue the same conversation. Leave it empty to start a new one.
`enableHil`	Lets the execution stop and ask the person. HIL stands for “human in the loop”.
`onHilResponse`	Called when the person answers a question of the execution. `submitHilResponse` sends the answer, and the execution continues. The answer names its question with `requestId`, so several questions can wait at the same time, and the answer is kept in the conversation.

The screens sent by the team

When a team asks the application to show a choice, a form or a chart, ChatDiscussion shows the matching widget in the conversation, if you give it the widgets in widgetRegistry. See The widgets an agent can show and Add your own widgets.

Read and write Data Table rows

The client also reads and writes the rows of a Data Table, for example to list past requests without starting an execution.

const rows = await client.dataTables.listRows(tableId);
await client.dataTables.insertRow(tableId, { customer: 'Northgate Bakery', invoice: 'INV-2041' });

To search a large table, read one page of it with listRowsPage. It takes conditions, a sort order, a page size and a starting point, and it says how many rows the search found in all.

const page = await client.dataTables.listRowsPage(tableId, {
  where: [{ column: 'amount', op: '>=', value: 1000 }],
  orderBy: 'amount desc',
  limit: 20,
  offset: 0,
});
// page.rows, page.total (all the rows found), page.hasMore

The operators are =, !=, contains, starts_with, >, >=, <, <=, between (the value is a pair, low then high), is_empty and is_not_empty (these two take no value).

The columns of a table are set in the Studio, not from an application.

How to know it worked

The list shows your solutions.
After a message is sent, the conversation fills in as the execution goes.
When the execution asks a question, the person can answer in the conversation, and the execution continues.

If it does not work

The list is empty. No entity carries the tag you asked for.
Nothing arrives after a message. The event stream is not reached. Check that the application and the server share one address, and that nothing in between holds the stream back.
The execution fails at once. The solution itself does not work. Run it in the Studio first.

Next step

Show the team at work in your app.