Tweet Media Extractor Plugin
Tags: cozechallenge, devechallenge, ai, machinelearning
Published: 2024-04-27 11:24:46

*This is a submission for the [Coze AI Bot Challenge](https://dev.to/devteam/join-us-for-the-coze-ai-bot-challenge-3000-in-prizes-4dp): Trailblazer.*

## What I Built
<!-- Tell us what your plugin or workflow does and what problem it solves -->

There are already amazing Twitter related plugins available on Coze Plugins store that can be used with Tweets.

![Plugin store coze](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63a1t0fx83p9mtq5nx47.png)

What I needed was a plugin that could take the Media comprised in a Tweet, could be an image or video (Which I needed in different resolutions)



![Tweet media extractor plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h720nomt31jozjdfmzrl.png)

So I built one to use on my [TweetMediaManager bot](https://dev.to/sojinsamuel/how-tweetmediamanager-transforms-tweet-urls-into-valuable-resources-99n), which is an integral part for the bots functionality.

When a user submits a tweet or post URL:
`https://twitter.com/<username>/status/<id>`

It has a unique id associated with it. which is the input parameter being used in TweetMediaExtractor to make a LookUp search via Twitter API v2.

If the tweet does comprise media the JSON response would contain an includes field.

```json
// Assuming the target Tweet contained a video
 {
    "data": {
        ...
    },
    "includes": {
        "media": [
            {
                "media_key": "77777777",
                "type": "video",
                "variants": [
                    {
                        "bit_rate": 632000,
                        "content_type": "video/mp4",
                        "url": "https://video.twimg.com/ext_tw_video/12345678/pu/vid/avc1/320x568/4024rVUaMBVYHT_b.mp4?tag=12"
                    },
                    {
                        "bit_rate": 950000,
                        "content_type": "video/mp4",
                        "url": "https://video.twimg.com/ext_tw_video/12345678/pu/vid/avc1/480x852/5JGUFqyletKVFUuF.mp4?tag=12"
                    },
                    {
                        "bit_rate": 2176000,
                        "content_type": "video/mp4",
                        "url": "https://video.twimg.com/ext_tw_video/12345678/pu/vid/avc1/720x1280/E9zgV0hONDsfOwrq.mp4?tag=12"
                    },
                    {
                        "content_type": "application/x-mpegURL",
                        "url": "https://video.twimg.com/ext_tw_video/12345678/pu/pl/ORE8nOl29XDVW9kz.m3u8?tag=12&container=cmaf"
                    }
                ]
            }
        ],
        "users": [
            ...
        ]
    }
}
```

Even though we could download an image by going to devtools via inspect on chrome, using the same method for a video will only give you a blob URL. which isn't what we want. Many people do share awesome infographical or gif representation of AWS architectural patterns which is what my motivation behind building this custom plugin.

At the time of building this, I wasn't familiar with the Coze Studio and was honestly confused like what are tools? where do they even come in action. where would I safely store my Twitter API Keys, what does Tool name mean.

Even though there is already options from Coze to bind existing external service APIs. I still needed the Studio option because I needed to implement oauth 1.0 authentication method for the Twitter API.

So my second option was to create a REST API via AWS API gateway and make a resource path `/getmedia`, which then executes a lambda function and the id needed was passed via query param by registering it as an Existing service (used the API Gateway REST API endpoint).

## Demo

<!-- If submitting a plugin, share a link to your plugin in the Coze Plugin Store -->

You can check out the [TweetMediaExtractor plugin from Coze plugin store](https://www.coze.com/store/plugin/7362301488493969413?from=explore_card)


![Tweet Media Extractor Jason response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gdgupj2j8i5oxcu37qu.png)

This is the JSON response we saw earlier, the plugin usage in action can be tested via my [TweetMediaManager bot](https://www.coze.com/s/ZmFqHVFVQ/)

## Journey

Even though I moved forward with using API Gateway instead of Coze Studio, it was still a great experience to learn about this AWS service and made my development process much easier.

Still, I wasn't gonna let go of using Coze Studio that easily!

It is indeed a learning process, So i created another plugin called TweetGagger (yeah another plugin powered by Twitter API) which I made it work from the Studio itself instead of using API gateway.

Read: TweetGagger Plugin Submission

<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! -->