> ## Documentation Index
> Fetch the complete documentation index at: https://help.emergent.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Giphy Integration

> Add GIFs to your app with Giphy

## What is Giphy?

Giphy is the world's largest library of GIFs and stickers. You can add fun, animated GIFs to your app - perfect for chat apps, social features, and making things more engaging!

**Perfect for:**

* Chat applications
* Social media posts
* Comments and reactions
* Making your app more fun

## What You'll Need

<Steps>
  <Step title="Giphy Account">
    Sign up at [developers.giphy.com](https://developers.giphy.com) - it's free!
  </Step>

  <Step title="Get API Key">
    Create an app to get your key
  </Step>

  <Step title="A good initial prompt">
    That's all it takes!
  </Step>
</Steps>

## Step 1: Get Your Giphy API Key

### Create Account

1. Go to [developers.giphy.com](https://developers.giphy.com)
2. Click **Sign Up** or log in with your Giphy account
3. Verify your email

### Create an App

1. Go to [Dashboard](https://developers.giphy.com/dashboard)
2. Click **Create an App**
3. Choose **API** (not SDK)
4. Give it a name and description
5. Click **Create App**
6. Copy your API key!

<Note>
  **Good news!** Giphy API keys are public - you can use them in your frontend code. No need to hide them!
</Note>

### Free Tier

<CardGroup cols={2}>
  <Card title="Free Plan" icon="gift" color="#10b981">
    **42 requests per hour**

    **1,000 requests per day**

    Perfect for testing and small apps
  </Card>

  <Card title="Need More?" icon="rocket" color="#3b82f6">
    Contact Giphy for higher limits

    Great for popular apps
  </Card>
</CardGroup>

## Step 2: Tell the Agent What You Want

Just describe what you're building! Here are examples:

### Example 1: Chat with GIFs

```
I want users to send GIFs in my chat app.

Features:
- GIF button in message box
- Search for GIFs
- Click to select and send
- Display GIFs in chat messages

Giphy API key: [paste your key]

Please set this up for me.
```

### Example 2: GIF Picker Modal

```
I need a GIF picker that pops up when users click a button.

Features:
- Modal/popup window
- Show trending GIFs when it opens
- Search bar to find specific GIFs
- Grid of GIF results
- Click to select

Giphy API key: [paste your key]

Please build this.
```

### Example 3: Social Posts with GIFs

```
I want users to add GIFs to their social media posts.

Features:
- GIF picker in post composer
- Search and browse GIFs
- Preview before posting
- Display GIF in feed

Giphy API key: [paste your key]

Please set this up.
```

<Tip>
  **That's it!** The agent will handle all the technical setup. No coding needed from you.
</Tip>

## Step 3: Test It Works

After the agent sets everything up:

<Steps>
  <Step title="Click Preview">
    In Emergent, click the **Preview** button
  </Step>

  <Step title="Open GIF Picker">
    Click the GIF button (or however you told the agent to set it up)
  </Step>

  <Step title="See Trending GIFs">
    You should see popular GIFs
  </Step>

  <Step title="Try Searching">
    Search for "happy" or "excited"
  </Step>

  <Step title="Select a GIF">
    Click on one
  </Step>

  <Step title="Check It Works">
    The GIF should appear in your app!
  </Step>
</Steps>

## Common Questions

<AccordionGroup>
  <Accordion title="How much does Giphy cost?">
    **Free!** You get 1,000 searches per day for free. That's plenty for most apps.

    Need more? Contact Giphy for paid plans.
  </Accordion>

  <Accordion title="Can I filter inappropriate GIFs?">
    Yes! Tell the agent:

    ```
    Only show family-friendly GIFs (G-rated).
    Filter out inappropriate content.
    ```
  </Accordion>

  <Accordion title="The search is slow. Can you make it faster?">
    Tell the agent:

    ```
    The GIF search feels slow. Can you:
    1. Show trending GIFs instantly while searching
    2. Add a loading indicator
    3. Make search faster
    ```
  </Accordion>

  <Accordion title="Can users upload their own GIFs?">
    Giphy is for searching Giphy's library. For custom uploads, you'd need file upload to AWS S3 or similar.
  </Accordion>
</AccordionGroup>

## Something Not Working?

### GIFs Not Loading

**Tell the agent:**

```
GIFs aren't showing up. I see broken images.
Can you check the Giphy integration?
```

### Search Not Working

**Tell the agent:**

```
When I search for GIFs, nothing happens.
Can you debug the search?
```

### Hitting Rate Limits

**Tell the agent:**

```
I'm getting "too many requests" errors from Giphy.
Can you add caching so we don't hit limits?
```

## Real Examples

### Example 1: Reaction GIFs

```
I want users to react to posts with GIFs.

Flow:
1. Click "React with GIF" button on a post
2. Search or pick from trending
3. GIF appears as a reaction below the post

Giphy API key: [paste key]

Please build this.
```

### Example 2: GIF Comments

```
Users should be able to comment with GIFs.

Features:
- Text comment box
- GIF button next to it
- Can add text + GIF together
- Display in comments thread

Giphy API key: [paste key]

Please set this up.
```

## Quick Checklist

Before going live:

* Tested GIF search
* GIFs load and display correctly
* Tried on mobile phone
* Family-friendly filter is on (if needed)
* "Powered by GIPHY" logo is visible (required!)

<Warning>
  **Important:** Giphy requires you to display "Powered by GIPHY" when using their API. The agent should add this automatically.
</Warning>

## Remember

**API key is public** - It's easy to use in your frontend

**Free tier is generous** - 1,000 searches/day

**Test thoroughly** - Make sure GIFs load fast

**Give credit** - Show "Powered by GIPHY" logo

<Info>
  Stuck? Tell the agent: "I need help with my Giphy integration" and describe what's not working.
</Info>