Step 2: Add Hydra AI

In this step, we'll install Hydra, add a Hydra config file to the app, and get a Hydra API key set.

Add Hydra AI

Before we can have Hydra respond to messages and control UI components, we need to install and configure it.

1. Install Hydra AI dependency

   First, we'll install Hydra AI by running the following command:

   npm install @hydra-ai/slack

2. Add Hydra Config file

   Next, we'll create a Hydra config file, where we create an instance of Hydra and eventually register the components we want it to use.

   Add a new file called hydra-config.ts under src/ with the following contents:

   import { HydraClient } from "@hydra-ai/slack";
    
   export function initializeHydra() {
       const hydra = new HydraClient({
           hydraApiKey: process.env.HYDRAAI_API_KEY,
       });
    
       return hydra;
   }

   You can see that this HydraClient is initialized with the API key from the environment variables. We'll set that up next.

3. Set Hydra API key

   Finally, we'll set the Hydra API key in the environment variables.

   You can get a Hydra API key by creating a new Hydra "project" in the Hydra dashboard here.

   Once you've created a project and copied an API key, add the following to the .env file:

   HYDRAAI_API_KEY=your-api-key

   Now your full .env file should look like this:

   SLACK_APP_TOKEN=<your-slack-app-token>
   SLACK_BOT_TOKEN=<your-slack-bot-token>
   HYDRAAI_API_KEY=<your-hydraai-api-key>

In the next step, we'll add a message listener that uses Hydra to respond to user messages.