Files
AutoGPT/autogpt_platform/frontend/src
Swifty 39fe22f7e7 feat(block): Add Ayrshare integration for social media posting (#9946)
This PR implements a comprehensive Ayrshare social media integration for
AutoGPT Platform, enabling users to post content across multiple social
media platforms through a unified interface. Ayrshare provides a single
API to manage posts across Facebook, Twitter/X, LinkedIn, Instagram,
YouTube, TikTok, Pinterest, Reddit, Telegram, Google My Business,
Bluesky, Snapchat, and Threads.

The integration addresses the need for social media automation and
content distribution workflows within AutoGPT agents, allowing users to:
- Connect their social media accounts via SSO
- Post content with platform-specific options and constraints
- Schedule posts across multiple platforms simultaneously
- Handle platform-specific media requirements and validation

⚠️ To simplify the review process all except the twitter post block has
been commented out, future pr's will uncomment other platfroms so we can
test them in isolation.

### Changes 🏗️

#### Backend Integration (`backend/integrations/ayrshare.py`)
- **AyrshareClient**: Complete API client implementation with post
creation, profile management, and JWT generation
- **SocialPlatform enum**: Comprehensive platform definitions for all
supported social networks
- **Response models**: PostResponse, ProfileResponse, JWTResponse for
type-safe API interactions
- **Error handling**: Custom AyrshareAPIException with proper HTTP
status code handling

#### Social Media Posting Blocks (`backend/blocks/ayrshare/post.py`)
- **BaseAyrshareInput**: Shared input schema with common fields (post
text, media URLs, scheduling, etc.)
- **Platform-specific blocks**: 13 dedicated posting blocks, each with
platform-specific validation and options:
  - PostToFacebookBlock: Carousel, Reels, Stories, targeting, alt text
- PostToXBlock: Threads, polls, long posts, premium features, subtitles
- PostToLinkedInBlock: Document support, visibility controls, audience
targeting
  - PostToInstagramBlock: Stories, Reels, user tags, collaborators
- PostToYouTubeBlock: Video uploads, playlists, visibility, country
targeting
  - PostToPinterestBlock: Pins, carousels, board management
  - PostToTikTokBlock: Video/image posts, AI labeling, brand content
  - PostToRedditBlock: Basic posting functionality
  - PostToTelegramBlock: GIF handling, mentions
  - PostToGMBBlock: Event/offer posts, call-to-action buttons
  - PostToBlueskyBlock: Character limit validation, alt text
  - PostToSnapchatBlock: Story types, video thumbnails
  - PostToThreadsBlock: Hashtag restrictions, carousel support

#### Helper Models
- **CarouselItem**: Facebook carousel configuration
- **CallToAction, EventDetails, OfferDetails**: Google My Business post
types
- **InstagramUserTag**: Instagram user tagging with coordinates
- **LinkedInTargeting**: LinkedIn audience targeting options
- **PinterestCarouselOption**: Pinterest carousel image options
- **YouTubeTargeting**: YouTube country blocking/allowing

#### Authentication & SSO (`backend/server/integrations/router.py`)
- **SSO endpoint**: `/integrations/ayrshare/sso_url` for account linking
- **Profile management**: Automatic profile creation and key management
- **JWT generation**: Secure token generation for social media account
linking
- **Platform allowlist**: Configured access to all supported social
platforms

#### Frontend Integration (`frontend/src/components/CustomNode.tsx`)
- **AYRSHARE block type**: New BlockUIType.AYRSHARE for
Ayrshare-specific nodes
- **SSO button**: "Connect Social Media Accounts" with loading states
- **Handle generation**: Special handling for Ayrshare blocks with SSO
integration

#### Configuration
- **Environment variables**: Added AYRSHARE_API_KEY and AYRSHARE_JWT_KEY
to .env.example
- **Block registration**: All Ayrshare blocks registered in
AYRSHARE_NODE_IDS array

#### Type Safety & Error Handling
- **Modern typing**: Updated to use `list`, `dict`, `Any` instead of
legacy typing
- **Comprehensive validation**: Platform-specific constraints (character
limits, media counts, file types)
- **User-friendly errors**: Clear error messages for validation failures
and API errors

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:

  **Test Plan:**
  
  **Backend API Testing:**
  - [x] Verify AyrshareClient initializes correctly with API key
  - [x] Test JWT generation for SSO authentication
  - [x] Test profile creation and management
  - [x] Verify all 13 posting blocks are properly registered
  - [x] Test platform-specific validation rules for each block
  - [x] Verify error handling for missing credentials and API failures
  
  **Frontend Integration Testing:**
  - [x] Verify AYRSHARE block type renders correctly in flow editor
  - [x] Test SSO button functionality and popup window behavior
  - [x] Confirm loading states work properly during authentication
  - [x] Verify input handles generate correctly for Ayrshare blocks
  - [x] Test platform-specific input fields and validation
  
  **End-to-End Workflow Testing:**
  - [x] Create agent with Ayrshare posting blocks
  - [x] Test SSO flow: click "Connect Social Media Accounts" button
  - [x] Verify popup opens with Ayrshare authentication page
  - [x] Test social media account linking process
  - [x] Create posts with various platform-specific options:
      - [ X ] X (Twitter) - tested basic posting with image
  - [] Test scheduling functionality across platforms
  - [x] Verify media upload constraints and validation
  - [] Test error handling for invalid inputs and failed posts
  
  **Error Case Testing:**
  - [] Test behavior with missing AYRSHARE_API_KEY configuration
  - [] Test invalid social media credentials handling
  - [] Test network failure scenarios
  - [] Verify platform-specific validation error messages
  - [] Test character limit enforcement per platform
  - [] Test media file type and size restrictions
  
  **Security Testing:**
  - [ x ] Verify JWT tokens are properly generated and validated
  - [x] Test profile key isolation between users
  - [x] Confirm sensitive credentials are not logged
  - [x] Verify SSO popup prevents XSS attacks

#### For configuration changes:
- [x] `.env.example` is updated or already compatible with my changes
- [x] `docker-compose.yml` is updated or already compatible with my
changes
- [x] I have included a list of my configuration changes in the PR
description (under **Changes**)

**Configuration Changes:**
- Added `AYRSHARE_API_KEY` environment variable for Ayrshare API
authentication
- Added `AYRSHARE_JWT_KEY` environment variable for SSO token generation
- No docker-compose.yml changes required (uses existing backend
services)

---------

Co-authored-by: Reinier van der Leer <pwuts@agpt.co>
2025-07-25 13:33:29 +00:00
..