Adding Components

Let's create the basic components that our CRM assistant will use to display customer notes and emails.

1. Defining Schemas

First, let's define our component schemas with Zod.

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 also used to help the AI understand when to use the component

import { z } from "zod";
 
// Define schemas with descriptions to help the AI understand their purpose
export const customerNoteSchema = z.object({
  title: z.string().describe("The title of the note"),
  content: z.string().describe("The content of the note"),
  associatedLeadId: z.string().describe("The ID of the associated lead"),
});
 
export const emailPreviewSchema = z.object({
  to: z.string().email().describe("The email address of the recipient"),
  subject: z.string().max(100).describe("Email subject line"),
  content: z.string().describe("Email content"),
});
 
// Infer types from schemas for use in components
export type CustomerNoteProps = z.infer<typeof customerNoteSchema>;
export type EmailPreviewProps = z.infer<typeof emailPreviewSchema>;

2. Creating Components

Now let's create our static display components using the inferred types:

import type { CustomerNoteProps } from "../schemas/crm-components"; 
 
// Note: Using Readonly to ensure props immutability
export const CustomerNote = ({
  title,
  content,
  associatedLeadId,
}: Readonly<CustomerNoteProps>) => {
  return (
    <div>
      <div>
        <span>Lead ID: {associatedLeadId}</span>
        <h3>{title}</h3>
      </div>
      <div>{content}</div>
    </div>
  );
};

3. Registering Components

Now let's register our components with Hydra.

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
• Description are added to help the AI understand when and how to use the component

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: "Displays a customer interaction note in a formatted card",
    propsSchema: customerNoteSchema,
  },
  EmailPreview: {
    component: EmailPreview,
    description:
      "Displays an email preview generated from a note in a formatted card",
    propsSchema: emailPreviewSchema,
    associatedTools: ["createEmail", "sendEmail"],
  },
});

Adding to the Message Thread

Components will appear in the message thread when the AI decides to use them.

What's happening here:

• Messages can contain an optional component of type HydraComponent
• HydraComponent now includes the actual Component directly
• Props are passed directly to the component
• No need to look up components in the registry at render time

<div>
  {messages.map((message: HydraThreadMessage, index) => (
    <div key={`${message.type}-${index}`}>
      {/* Show message content */}
      <div>{message.content}</div>
      {/* Show any AI-generated components */}
      {message.component && (
        <div>
          <message.component.Component {...message.component.props} />
        </div>
      )}
    </div>
  ))}
</div>

What you have now?

• Your AI assistant can now display static components in the chat interface!
• Type-safe props and validation through Zod schemas
• Clear component descriptions to help the AI use them appropriately