Component Context

Understanding and Utilizing the ComponentContext Component in doable.sh

The ComponentContext component from the Doable AI SDK is an incredibly powerful tool for adding context about any UI component in your application. By using this component, you can declaratively inform your operator about specific parts of your app, allowing the AI to understand, interact with, and respond based on the context you provide.

Why Use ComponentContext?

ComponentContext is essential when you need your operator to be context-aware. Instead of guessing or making assumptions about components, the AI will know exactly what it is interacting with. This results in more accurate responses and more intelligent behavior when users interact with your app.

Key Benefits:

• Declaratively add context without changing your app's structure.
• Enhance the operator's understanding of complex interfaces.
• Support advanced interactions beyond basic buttons and tables.

Installation and Setup

Before using the ComponentContext component, ensure you have the Doable AI SDK installed:

npm install @doable.sh/sdk  
pnpm i @doable.sh/sdk  
yarn add @doable.sh/sdk  

Next, import the necessary components in your React app:

import { ComponentContext, UserContext, TaskDefinition, startTask } from '@doable.sh/sdk'  

Real-World Example:

Imagine you are building an admin dashboard where each row in a table represents a different operator. Clicking a row should open the operator's detailed view.

To make this interaction clear, you could use:

<ComponentContext  
    description={'This is index: ${index} in the table of operators. Click this row to drill into the operator named ${operator.name}'}  
    name={operator.name}  
    path={'/dashboard/${operator.id}'}  
/>  

This way, the AI understands that clicking this row means the user intends to view detailed information about the selected operator.

Use Cases of ComponentContext

1. Tables

Tables are a common way to display data. By wrapping table rows with ComponentContext, the operator can better understand each row's purpose.

Example:
In a dashboard, each row could represent an operator. By adding context, the AI knows which operator the user clicks on and can drill down accordingly.

2. Buttons

Buttons often trigger actions. With ComponentContext, you can add meaningful descriptions to each button, informing the operator about what the button does.

Example:
A "Save Changes" button within a settings form can be labeled as:
'This button saves the current configuration settings for the operator.'

3. Dialogs

Dialogs are essential for showing additional information or confirmation messages. By providing context, the operator understands why the dialog is open and what it represents.

Example:
A confirmation dialog could be labeled as:
'Confirmation dialog for deleting the operator. Click "Yes" to proceed.'

4. Tabs

If your application has tabs, use ComponentContext to indicate which tab is active and what data it displays.

Example:
'This is the "Configuration" tab for managing operator settings.'

5. Forms

Forms often consist of multiple fields. By wrapping each field with ComponentContext, you make it clear what the user is filling out.

Example:
'This field accepts the operator's name for configuration.'

6. Interactive Elements

Interactive elements like sliders, toggles, or radio buttons can also be wrapped to make their purpose clear.

Example:
'This toggle enables or disables voice recognition for the operator.'

7. Custom Components

For any custom or complex component that might not be intuitive, adding context helps the AI accurately interpret user interactions.

Example:
'A color picker to customize the operator's theme color.'

Best Practices

1. Be Specific: Provide clear, concise descriptions that accurately describe the component's purpose.
2. Use Paths Strategically: The path prop helps the operator know where the component resides, especially in a multi-page app.
3. Think Beyond Buttons and Tables: Consider dialogs, forms, toggles, and other interactive elements.
4. Update as Needed: Keep descriptions up to date as your UI evolves.

Summary

The ComponentContext component is a game-changer for building context-aware AI operators. By declaratively adding context to your components, you make your operator smarter, more accurate, and more intuitive to use. Whether you're dealing with tables, buttons, dialogs, or even custom components, ComponentContext ensures the AI knows exactly what it's interacting with.

Leverage ComponentContext to enhance user experience and make your AI operators truly intelligent!