Initial Hydra Setup

In this quickstart, we'll build an AI-powered CRM assistant that helps users manage customer notes and emails. We'll start by setting up the core Hydra configuration.

1. Adding the Context Provider

Make sure to set your NEXT_PUBLIC_HYDRA_API_KEY in your environment variables before initializing the application.

Next, wrap your application with the HydraProvider to make Hydra's functionality available throughout your app.

What's happening here:

Wrap your application with the HydraProvider to make Hydra's functionality available throughout your app.

Implementing the App Wrapper

src/App.tsx

import { HydraProvider } from "hydra-ai-react";
import { initializeHydra } from "./config/hydraConfig";
 
export const App = (): ReactElement => {
  const hydraConfig = initializeHydra();
 
  return (
    <HydraProvider config={hydraConfig}>
      {/* Your app components */}
    </HydraProvider>
  );
};

2. Configure Hydra

Definitions:

Hydra Config: The configuration for the Hydra AI SDK
Personality: The personality of the AI assistant
Tool Registry: A registry of tools (sometimes called function calls) that the AI can use to interact with the world
Component Registry: A registry of UI components that the AI can use to interact with the user

The personality configuration defines how our CRM assistant will interact with users.

What's happening here:

Define personality configuration
Define tool registry
Define component registry
Initialize Hydra with all the necessary configuration

We will add tools, and components latter in this quickstart.

src/config/hydraConfig.ts

import {
  createHydraComponentRegistry,
  createHydraToolRegistry,
} from "hydra-ai-react";
 
const personality = {
  role: `You are a helpful CRM assistant focused on helping users manage customer interactions. You specialize in helping users create notes, edit them, and convert them into follow-up emails.`,
 
  style: `You communicate professionally while helping users manage their customer relationships efficiently. You provide clear suggestions for notes and emails while maintaining a helpful, business-appropriate tone.`,
 
  rules: [
    "Always confirm the customer/lead context before taking actions",
    "Provide clear previews of generated content",
    "Maintain professional language in generated emails",
    "Ask for clarification when customer details are unclear",
  ],
};
 
// Create registries for tools and components
export const toolRegistry = createHydraToolRegistry({
  // Tool definitions will be added here
});
 
export const componentRegistry = createHydraComponentRegistry({
  // Component definitions will be added here
});
 
export const initializeHydra = (): HydraConfig => {
  if (!process.env.NEXT_PUBLIC_HYDRA_API_KEY) {
    throw new Error("NEXT_PUBLIC_HYDRA_API_KEY is not set");
  }
 
  return {
    apiKey: process.env.NEXT_PUBLIC_HYDRA_API_KEY,
    toolRegistry,
    componentRegistry,
    personality,
    // debug: true, // Optional: Enable for development
  };
};

What you have now?

Defined the function and personality of your AI assistant
Created empty registries for tools and components
Initialized Hydra with the necessary configuration
You know have access to the powerful context hooks to create a chat interface

In the next section, we'll use the context hooks to create a chat interface.

Initial Hydra Setup

1. Adding the Context Provider

Implementing the App Wrapper

2. Configure Hydra

What you have now?

On this page