Adding Components to Hydra AI

This guide will walk you through the process of adding and registering new components with Hydra AI.

Creating a New Component

First, create your React component as you normally would:

src/components/WelcomeCard.tsx

import React from "react";
 
interface WelcomeCardProps {
  userName: string;
  role?: string;
  theme?: "light" | "dark";
}
 
export const WelcomeCard: React.FC<WelcomeCardProps> = ({
  userName,
  role = "user",
  theme = "light",
}) => {
  return (
    <div className={`welcome-card ${theme}`}>
      <h2>Welcome, {userName}!</h2>
      {role && <p>Role: {role}</p>}
    </div>
  );
};
 
export default WelcomeCard;

Registering the Component

Step 1: Update hydra-config.ts

💡 Recommended: Use Zod for Type Definitions

While this example uses JSON Schema, we recommend using Zod for better type safety and validation. Check out our Using Zod guide to learn more.

Add your new component to your hydra-config.ts file:

src/hydra-config.ts

import WelcomeCard from "./components/WelcomeCard";
import { HydraClient } from "hydra-ai";
 
export function registerComponents() {
  const hydra = new HydraClient({
    hydraApiKey: process.env.NEXT_PUBLIC_HYDRAAI_API_KEY,
  });
 
  hydra.registerComponent({
    name: "WelcomeCard",
    description: "A welcoming card that displays user information",
    component: WelcomeCard,
    propsDefinition: {
      WelcomeCard: {
        type: "object",
        properties: {
          userName: {
            type: "string",
            description: "The name of the user to display",
          },
          role: {
            type: "string",
            description: "User's role in the system",
            default: "user",
          },
          theme: {
            type: "string",
            enum: ["light", "dark"],
            description: "Visual theme of the card",
            default: "light",
          },
        },
        required: ["userName"],
      },
    },
  });
 
  return hydra;
}

Using Context Tools

When adding components that need to fetch data, you can include context tools:

src/hydra-config.ts

hydra.registerComponent({
  name: "UserDashboard",
  description: "Dashboard showing user activity",
  component: UserDashboard,
  propsDefinition: {
    UserDashboard: {
      type: "object",
      properties: {
        userId: {
          type: "string",
          description: "The ID of the user",
        },
      },
      required: ["userId"],
    },
  },
  contextTools: [
    {
      definition: {
        name: "fetchUserData",
        description: "Fetches user data from the API",
        parameters: [
          {
            name: "userId",
            type: "string",
            description: "The ID of the user",
          },
        ],
      },
      getComponentContext: async (userId: string) => {
        return await getUserData(userId);
      },
    },
  ],
});

🔒 Type Safety Tip

Using Zod can help ensure type safety for your context tools' return values. More information on Zod context tools can be found in our next guide.

Best Practices

Type Definitions:
- Consider using Zod for better type safety
- Keep prop definitions clear and well-documented
- Use TypeScript

Now you're ready to create and register components with Hydra AI! Remember to test your components thoroughly before deploying them to production.

Add Components & Tools