Skip to main content
AgentView allows the members of your organisation to play around with your agent. In order to make it possible, your users must have a component via which they can provide input to your agent and start a new run. You can set it via inputComponent property of the agent: 
export default defineConfig({
  apiBaseUrl: "http://localhost:1990",
  agents: [
    {
      name: "simple_chat",
      runs: [
        {
          input: {
            schema: z.object({
              type: z.literal("message"),
              role: z.literal("user"),
              content: z.string(),
            }),
            displayComponent: ({ item }) => <UserMessage>{item.content}</UserMessage>,
          },
          steps: [
            // ...
          ],
          output: {
            // ...
          }
        }
      ],
      inputComponent: ({ submit, cancel, isRunning }) => <UserMessageInput
        onSubmit={(val) => submit("http://localhost:3000/simple_chat", { input: { content: val, type: "message", role: "user" } })}
        onCancel={cancel}
        isRunning={isRunning}
      />
    }
  ]
})
The job of inputComponent is to submit a request to your Agent Endpoint, which should trigger a new run. Please keep in mind that Studio doesn’t listen to the response from your Agent (it might be your custom format). It only displays live changes based on the data you sent to AgentView via av.createRun or av.updateRun calls. For example, if your Agent Endpoint is streaming each token, but it only calls av.updateRun at the end of the stream, then AgentView will see update only at the end of the stream. <UserMessageInput /> is simple component from AgentView Design System that displays a text input, send and cancel buttons. You can provide your custom one whenever you need to. Here are inputComponent properties:
PropDescriptionType
sessionCurrent session objectSession
tokenA user tokenstring
submitA thin wrapper on top of native browser fetch, that manages state and simplifies code.(url: string, body: Record<string, any>, init?: RequestInit) => Promise<Response>
cancelIf you use submit, it cancels the request properly() => void
isRunningIf you use submit, it properly handles information whether the component should be disabledboolean

​
submit function

submit is a thin wrapper on top of native browser fetch function that reduces a lot of boilerplate code:
  • sets POST method and Content-Type: application/json header
  • accepts body second parameter as a JSON
  • if you call cancel it properly handles cancellation
  • properly computes isRunning based on session and request state
submit returns a Response object like fetch, and its 3rd parameter init? is the same as you would pass to fetch function (second param).