Adding Tools

Now that we have our note and email components set up, let's add tools that help your AI assistant work with your CRM data. Tools are how your components get the data they need to be useful.

Why associate tools with components?

Helps provide context to the AI when choosing a component
Helps the AI generate or fill in the props for the component

1. Define Tool Schemas

First, let's define the schemas for our CRM tools.

What's happening here:

Define schemas and types first
Use inferred types in components
Register components with their schemas
Schemas are used to generate type-safe props for the component
They are alos used to understand when and how to use the component

src/schemas/crm-tools.ts

import { z } from "zod";
 
// Search leads schema
export const leadSearchSchema = z.object({
  query: z.string().describe("Search query for finding leads"),
  limit: z.number().optional().default(10),
});
 
// Lead details schema
export const leadDetailsSchema = z.object({
  leadId: z.string().describe("The ID of the lead to fetch details for"),
});
 
// Response types
export const leadSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email(),
  company: z.string(),
  lastContact: z.string().datetime(),
});
 
export type LeadSearchInput = z.infer<typeof leadSearchSchema>;
export type LeadDetailsInput = z.infer<typeof leadDetailsSchema>;
export type Lead = z.infer<typeof leadSchema>;

2. Create Tool Registry

Now let's register our tools using these schemas.

What's happening here:

Tool definitions specify the schema and description for each tool
Tool implementations are registered separately with type-safe handlers
Return types are properly typed to match the expected response schemas

src/config/tool-registry.ts

import { createHydraToolRegistry } from "hydra-ai-react";
import {
  leadSearchSchema,
  leadDetailsSchema,
  type LeadSearchInput,
  type LeadDetailsInput,
  type Lead,
} from "../schemas/crm-tools";
 
// Define the tool definitions
export const toolDefinitions = {
  searchLeads: {
    description: "Search for leads in the CRM system",
    inputSchema: leadSearchSchema,
  },
  getLeadDetails: {
    description: "Get detailed information about a specific lead",
    inputSchema: leadDetailsSchema,
  },
};
 
// Create the registry with the definitions
export const toolRegistry = createHydraToolRegistry(toolDefinitions);
 
// Register the implementations
toolRegistry.registerTool(
  "searchLeads",
  async (input: LeadSearchInput): Promise<Lead[]> => {
    // In a real app, this would call your CRM API
    return await searchLeadsInCrm(input.query, input.limit);
  },
);
 
toolRegistry.registerTool(
  "getLeadDetails",
  async (input: LeadDetailsInput): Promise<Lead> => {
    // In a real app, this would call your CRM API
    return await getLeadFromCrm(input.leadId);
  },
);

3. Connecting Tools to Components

Now connect these tools to your note and email components.

What's happening here:

Component registry is generic over the tool registry type
Props schemas are properly typed to match component props
Associated tools are type-checked against available tool names

src/config/component-registry.ts

import { createHydraComponentRegistry } from "hydra-ai-react";
import { CustomerNote } from "../components/CustomerNote";
import { EmailPreview } from "../components/EmailPreview";
import {
  customerNoteSchema,
  emailPreviewSchema,
} from "../schemas/crm-components";
 
export const componentRegistry = createHydraComponentRegistry({
  CustomerNote: {
    component: CustomerNote,
    description: "Display a note about a customer lead",
    propsSchema: customerNoteSchema,
    associatedTools: ["searchLeads", "getLeadDetails"],
  },
  EmailPreview: {
    component: EmailPreview,
    description: "Preview an email to a lead",
    propsSchema: emailPreviewSchema,
    associatedTools: ["searchLeads", "getLeadDetails"],
  },
});

Next Steps

We'll see how to make these components interactive!

Adding Tools

1. Define Tool Schemas

2. Create Tool Registry

3. Connecting Tools to Components

On this page