How to Build A User-Friendly UI for LangChain's Social Media Agent with Easy Notion Integration

LangChain's Social Media Agent is a fantastic tool. It allows you to take a list of links – maybe articles you've read, interesting projects, or company blog posts – and automatically generate engaging social media updates. Imagine processing 50 links and scheduling them out over the next few weeks. You could go on vacation knowing your social media feed remains active and consistent with content you've already approved. That's powerful automation!

The Challenge: The Terminal Barrier

While powerful, the default way to interact with the LangChain Social Media Agent involves the command line. To feed it a link, you typically need to:

1. Open the codebase.
2. Edit a file to insert your desired URL.
3. Run a specific command (generate_post) in your terminal.

For continuous processing, you can set up a cron job (requiring knowledge of cron syntax) and configure Slack integration to monitor a channel for links. For those not comfortable working directly in the terminal, these steps can be so difficult that it prevents them from leveraging this useful agent.

The Solution: An Accessible Web Interface

Seeing this potential barrier, I wanted to create a simple web UI to make interacting with the agent painless – no terminal required. The goal was to provide an intuitive front-end that handles sending links to the agent running locally.

To achieve this, I made a couple of small tweaks to the agent's code:

1. Modified the generate_post command to accept the URL as an argument instead of being hardcoded.
2. Added a generate_multiple_posts command that accepts an array of URLs and a mode.
   • multi-post mode: Generates one social media post per URL.
   • single-post mode: Uses all provided URLs as context to generate a single, consolidated post.

With these changes in place, I built a simple UI using ExpressJS.

This UI offers three straightforward ways to feed links to the agent:

1. Single URL: Paste one link, hit submit, and the agent starts processing.
2. Multiple URLs: Paste multiple links and choose either single-post or multi-post mode.
3. Notion Integration: Select a Notion page containing links, choose a mode, and ingest them all.

You can monitor the progress in the AgentInbox UI (provided by LangChain) connected to your local agent, watching as posts are generated and become ready for review.

Easy Notion Integration with Arcade.dev Direct Tool Calling

The Notion integration is where things get very cool. It’s amazingly easy to connect external services using Arcade.dev.

Many of us use Notion as a digital notebook, a swipe file, or a link collector. Wouldn't it be great to point the Social Media Agent directly at a Notion page full of links you've saved?

That's exactly what the UI does, and it uses Arcade.dev to handle the connection without relying on an LLM for the interaction itself. Here’s how it works:

1. Specify Page: In the UI, you enter the title of your Notion page (e.g., "Link Collection").
2. Arcade Handles Authentication: The backend uses the Arcade Notion Toolkit, specifically the GetPageContentByTitle tool. If you haven't authorized Arcade to access your Notion account before, Arcade sends an authorization_required event to the UI.
3. User Authorizes: The UI displays an authorization link. You click it, select the Notion pages you want Arcade to access, and grant permission.
4. Direct Tool Calling: Once authorized, the backend makes a direct tool call using the Arcade client (client.tools.execute). This directly executes the GetPageContentByTitle function with your user ID and the page title.
5. Process Links: The backend receives the content from Notion, extracts the links, and sends them to the LangChain agent using the generate_multiple_posts command.

This direct tool calling approach shows the versatility of Arcade.dev toolkits. It means you can leverage Arcade's authentication handling and pre-built tool integrations within standard web applications, UIs, or backend scripts, not just within LLM-powered agents. It simplifies using APIs like Notion significantly.

See It In Action & Get Involved!

In the video this post is based on, I showed how to add a new link to my "Link Collection" page in Notion with the Web Clipper Extension, then using the UI to ingest all links from that page. The agent successfully processed them, creating individual posts ready for review in the AgentInbox.

If you enjoyed this overview, please consider liking the video and subscribing to the Arcade.dev channel for more tutorials, demos, and fun ways to integrate Arcade into your development process. Don’t forget to leave a comment! We’d love to hear your thoughts!

Until next time, happy building!

See the full repo to build it yourself at: https://github.com/ArcadeAI/social-media-agent

Sign up for arcade.dev: https://account.arcade.dev/register