Chapter 6: Adding a User Interface

TL;DR

1. Create a new file: views/GreeterView.tsx.
2. Add the code below to the new file. It imports useTool from the SDK, sets up a state for an input field, and uses a button to call a backend tool named greet.

import { useState } from 'react';
import { useTool } from '@worka-ai/sdk';
import { Button, Input, Text, VStack } from '@chakra-ui/react';

function GreeterView() {
  const [name, setName] = useState('');
  const { call: callGreet, data, isLoading, error } = useTool('greet');

  return (
    <VStack spacing={4} align="stretch" p={8}>
      <Text fontSize="xl">Greeter Pack</Text>
      <Input
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Button
        onClick={() => callGreet({ name })}
        isLoading={isLoading}
        colorScheme="blue"
      >
        Greet Me
      </Button>
      {error && <Text color="red.500">Error: {error.message}</Text>}
      {data && <Text fontSize="lg">{data.greeting}</Text>}
    </VStack>
  );
}

export default GreeterView;

3. The worka dev process automatically makes this new view available in the Worka app.

---

Now that you have a running pack, let's modify it to make it interactive. We will add a new view with an input field and a button that calls a backend tool.

Step 1: Create a New View File

Any .tsx file you create inside the views/ directory is automatically detected by the worka dev server and made available to the Host application as a view.

Create a new file named views/GreeterView.tsx in your pack's directory.

Step 2: Introduce the useTool Hook

The @worka-ai/sdk provides a set of React hooks that are the only way your UI should communicate with a backend. The most important of these is useTool.

Add the following code to your new GreeterView.tsx file:

import { useState } from 'react';
import { useTool } from '@worka-ai/sdk';
import { Button, Input, Text, VStack } from '@chakra-ui/react';

function GreeterView() {
  const [name, setName] = useState('');
  // This is the core hook for backend communication
  const { call: callGreet, data, isLoading, error } = useTool('greet');

  // ... we will add the UI next
}

export default GreeterView;

Let's break down the useTool('greet') line:

• We tell the hook we want to interact with a tool named greet.
• It returns an object with everything we need to manage the tool call:
  • call: The function we will execute to run the tool. We rename it to callGreet for clarity.
  • data: Will hold the successful response from the tool.
  • isLoading: A boolean that is true while the tool call is in progress.
  • error: Will hold any error object if the call fails.

Step 3: Build the Interactive UI

Now, let's add the JSX to create the user interface. We will use components from the Chakra UI library, which is available to all packs by default.

Complete your GreeterView.tsx file with the following code:

// ... (imports and hook call from above)

function GreeterView() {
  const [name, setName] = useState('');
  const { call: callGreet, data, isLoading, error } = useTool('greet');

  return (
    <VStack spacing={4} align="stretch" p={8}>
      <Text fontSize="xl">Greeter Pack</Text>
      <Input
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Button
        onClick={() => callGreet({ name })}
        isLoading={isLoading}
        colorScheme="blue"
      >
        Greet Me
      </Button>
      {error && <Text color="red.500">Error: {error.message}</Text>}
      {data && <Text fontSize="lg">{data.greeting}</Text>}
    </VStack>
  );
}

export default GreeterView;

Notice how the UI is connected to the hook:

• The Input field updates a local state variable, name.
• The Button's onClick handler calls our callGreet function, passing the current name as a parameter: callGreet({ name }).
• The button's isLoading prop is tied directly to the hook's isLoading state, so it will show a spinner automatically.
• We conditionally render the error or the data from the hook to give feedback to the user.

Step 4: See It Live

Save your GreeterView.tsx file. The worka dev command running in your terminal will detect the change and automatically make the new view available. In the Worka app, you can now navigate to your new "Greeter View" to see and interact with it.

In the next chapter, we will implement the greet tool in the backend so the UI has something to talk to.