Agent MCP

Okay, let's break down the key pages and components of the proposed Centralized Video Clip Analytics Platform website, outlining their functionality, API interactions, and underlying logic, based on our previous discussions and the MCD. Public Pages (Accessible without Login) 1. Landing Page / Homepage (/) Purpose: Introduce the platform, articulate its value proposition (raw clips + analytics), showcase key features, build trust, and drive user sign-ups or logins. Key Components: Hero Section: Compelling headline (e.g., "Unlock Viral Potential: Raw Clips & Real-Time Analytics"), brief description, primary Call-to-Action (CTA) buttons ("Get Started Free", "View Pricing"). Features Section: Highlighting core offerings like Raw Clip Discovery, "Bloomberg-Style" Analytics , Creator CRM, API Access. Use icons and short descriptions.   How It Works Section: Simple steps outlining the user journey (Connect Accounts -> Discover & Clip -> Analyze Trends -> Grow). Testimonials/Social Proof (Optional): Quotes or logos from early users or partners. Pricing Overview: Brief summary of available plans linking to the full pricing page. Footer: Links to Pricing, About Us, Contact, Terms of Service, Privacy Policy, Login, Register. Functionality: Primarily informational. Navigation to other key public pages and the registration/login flows. Data Displayed: Static marketing content, feature descriptions, plan summaries. API Interactions: None. Logic: Standard static webpage rendering. CTAs link to respective pages/routes. 2. Pricing Page (/pricing) Purpose: Clearly present the different subscription tiers, their associated features, limitations (e.g., download limits, API access levels), and costs. Enable users to select a plan. Key Components: Pricing Table: Columns for each plan (e.g., Free, Starter, Pro, Enterprise/Agency ). Rows detailing features (Raw Clip Downloads/month, Analytics Access Level, CRM Platforms Supported, API Access, Support Level, etc.). Clear price display (monthly/annual options).   Feature Comparison Grid: Detailed breakdown comparing features across tiers. FAQ Section: Addressing common questions about billing, features, cancellation. CTAs: "Sign Up" or "Choose Plan" button for each tier, linking to the registration flow, potentially pre-selecting the chosen plan. Functionality: Allows users to compare plans and initiate the sign-up process for their chosen tier. Data Displayed: Predefined plan details, features, and pricing information. API Interactions: None directly on the page itself. Selecting a plan initiates the registration flow. Logic: Display static or configuration-driven pricing data. Highlight differences between plans. 3. Login Page (/login) Purpose: Enable existing users to securely authenticate and access the platform. Key Components: Email Input Field Password Input Field "Login" Button "Forgot Password?" Link "Don't have an account? Register" Link (Optional) Social Login Buttons (e.g., "Login with TikTok" , "Login with Google")   Functionality: User enters credentials and submits. Client-side validation (e.g., check for empty fields, basic email format). Handles social login initiation via OAuth. Data Displayed: Input fields, validation error messages (e.g., "Invalid email or password"). API Interactions: POST /api/auth/login: Sends email and password. Receives JWT (JSON Web Token) or session identifier upon successful authentication. Handles error responses (e.g., 401 Unauthorized). Social Login: Redirects to the respective platform's OAuth endpoint. Handles callback URL to receive authorization code/token. Logic: Validate input fields locally. On submit, disable button, send credentials to /api/auth/login. On success (e.g., 200 OK with token): Store token securely (e.g., localStorage, sessionStorage, httpOnly cookie), redirect user to the main application dashboard (/app/dashboard). On failure (e.g., 401): Display appropriate error message. Re-enable button. Social login buttons trigger the respective platform's OAuth flow. 4. Registration Page (/register) Purpose: Allow new users to create an account, potentially selecting a plan during sign-up. Key Components: Name/Username Input Field (Optional) Email Input Field Password Input Field Password Confirmation Input Field (Optional) Plan Selection (if not chosen on Pricing page) (Optional) Payment Information Fields (if signing up for a paid plan, likely integrated via payment gateway's elements) Terms of Service/Privacy Policy Checkbox "Register" Button "Already have an account? Login" Link Functionality: User enters required information, agrees to terms, and submits. Client-side validation (email format, password strength, password match, required fields). May integrate with payment gateway. Data Displayed: Input fields, validation error messages (e.g., "Passwords do not match", "Email already exists"), success message (e.g., "Registration successful! Please check your email for verification."). API Interactions: POST /api/auth/register: Sends user details (name, email, password, chosen plan). Receives success or error response. May also trigger payment processing via backend integration if a paid plan is selected. Logic: Validate input fields locally. On submit, disable button, send registration data to /api/auth/register. On success (e.g., 201 Created): Display success message, potentially redirect to login page or a "check email" page. On failure (e.g., 400 Bad Request, 409 Conflict): Display specific error message (e.g., "Email already in use"). Re-enable button. Authenticated User Pages (Require Login - Prefixed with /app/) 5. Main Dashboard (/app/dashboard) Purpose: Serve as the primary landing page after login, offering a high-level overview and navigation to core application sections. Key Components: Persistent Sidebar/Header Navigation: Links to "Clip Discovery", "Analytics Dashboard", "Creator CRM", "Account Settings". Welcome Message: Personalized greeting (e.g., "Welcome, [User Name]!"). Summary Widgets (Examples): "Recent Clip Requests": Status of the last few downloads. "Quick Analytics Snapshot": Key trending metric (e.g., top trending creator). "Account Status": Current subscription plan, usage summary (e.g., X/Y downloads used this month). "Quick Links": Buttons to common actions (e.g., "Discover New Clips", "View My Performance"). Functionality: Provides at-a-glance information and easy access to main platform features. Data Displayed: User's name, subscription status, recent activity summaries, key analytics highlights. API Interactions: GET /api/auth/user: Verify authentication and get basic user info (name, plan). GET /api/dashboard/summary (or similar): Fetch data for summary widgets (recent requests, quick stats). Logic: Verify user is authenticated (check for valid token/session). Redirect to /login if not. Fetch summary data from the backend API. Render widgets and navigation. 6. Clip Discovery Page (/app/discover) Purpose: Enable users to find content (streams/VODs) from monitored creators, select specific time segments, and request the download of the raw video clip. Key Components: Search Bar: Input field to search for monitored creators by name. Creator List: Displays search results or a default list of popular/monitored creators. VOD List Area: Displays VODs (thumbnail, title, date, duration) for the selected creator. Pagination if many VODs.   VOD Interaction Area: (If feasible) Embedded player or visual timeline representation of the selected VOD. Start Time Input / Slider End Time Input / Slider Preview of selected segment duration. "Request Raw Clip" Button: Initiates the download process for the selected segment. Disabled until a valid segment is selected. Clip Request History/Status Table: Lists recent download requests with status (Pending, Processing, Ready, Downloaded, Error) , timestamp, VOD source, and a "Download" button when ready.   Functionality: Search for creators. Browse VODs of a selected creator. Select a VOD. Define a start and end time for the desired clip segment. Submit a request to generate and download the raw clip. Monitor the status of clip requests. Download completed raw clips. Data Displayed: Creator names, VOD metadata, visual timeline (optional), selected start/end times, clip request status, download links. API Interactions: GET /api/creators?search={query}: Fetch list of creators matching the search term. GET /api/creators/{creatorId}/vods?page={n}: Fetch paginated list of VODs for a specific creator. POST /api/clips/request: Send { "vodId": "...", "startTime":..., "endTime":... } to initiate clip generation. Requires appropriate subscription/credits.   GET /api/clips/requests?page={n}: Fetch list of user's recent clip requests and their statuses. GET /api/clips/status/{requestId}: (Optional, for polling if WebSockets aren't used) Check status of a specific request.   GET /api/clips/download/{requestId}: Get the secure, temporary download URL for a completed clip.   Logic: Handle creator search input, fetch results via API, update creator list. On creator selection, fetch their VODs via API, update VOD list. On VOD selection, load VOD details/timeline. Manage state for start/end time selection. Validate segment (end > start, potentially max duration limits). Enable "Request Raw Clip" button when a valid segment is defined. On request button click, send data to /api/clips/request. Handle success (add to request list as "Pending") and error (display message, e.g., "Download limit reached"). Periodically fetch updated clip request statuses (or use WebSockets for real-time updates) and update the status table. Enable "Download" button when status is "Ready". Clicking it fetches the secure URL from /api/clips/download/{requestId} and initiates the browser download. 7. Analytics Dashboard ("Bloomberg" View) (/app/analytics) Purpose: Provide users with aggregated, market-level insights into trending clips, creators, topics, and overall platform activity, mimicking the intelligence function of financial terminals.   Key Components: Global Filters: Date Range Selector, Platform Selector (All, TikTok, Instagram, YouTube), Topic/Niche Filter (dropdown or multi-select). Key Metric Scorecards: Displaying current top-level stats (e.g., "Most Active Creator Today", "Hottest Trending Topic"). Trend Charts: Line charts showing metrics (e.g., Clip Velocity Score, Mention Frequency) over the selected time period for top items or selected filters.   Ranked Lists/Tables: Top Trending Creators, Top Trending Clips (by velocity/mentions), Top Topics. Include relevant metrics alongside names/titles. (Optional) Advanced Visualizations: Heatmaps showing activity by time of day, network graphs showing creator connections (if data allows). Functionality: Allows users to explore macro trends, identify rising stars or hot content themes, compare performance across platforms/topics, and filter data based on their interests. Interactive charts allow hovering for details or zooming. Data Displayed: Aggregated and anonymized trend data, rankings, scores, time-series visualizations (See Table 2 in MCD for specific metric examples). API Interactions: GET /api/analytics/trends: Primary endpoint, taking parameters like type (creators, clips, topics), platform, period, filter (topic/niche). Returns structured data suitable for rendering charts and tables. GET /api/analytics/topics: (Optional) Fetch list of available topics/niches for the filter dropdown. Logic: Initialize with default filter settings (e.g., last 7 days, all platforms). Fetch initial data from /api/analytics/trends based on default filters. Render scorecards, charts (using a library like Chart.js, D3.js, etc.), and tables. When user changes a filter, update the API request parameters, fetch new data, and re-render the relevant components. Handle loading states while data is being fetched. Display clear messages if no data is available for the selected filters. Include disclaimers about data sources and potential limitations. 8. Creator CRM Dashboard (Authenticated View) (/app/crm) Purpose: Provide authenticated creators with a private dashboard to monitor and analyze the performance of their own linked social media accounts (TikTok, Instagram, YouTube). Key Components: Account Connection Status: Display icons/status indicators for linked platforms. Link to Account Settings to manage connections. Platform Filter: Select data view for "All", "TikTok", "Instagram", or "YouTube". Date Range Selector: Choose the time period for analysis (e.g., Last 7 days, Last 30 days, Custom). KPI Summary Section: Display key metrics (Total Followers, Total Views, Total Likes, Average Engagement Rate) aggregated across selected platforms/period.   Performance Trend Charts: Line charts showing the evolution of key metrics (Followers, Views, Engagement) over the selected period.   Recent Posts Table: List of the user's recent posts/videos from linked accounts, showing thumbnail, title/caption snippet, date, and key metrics (Views, Likes, Comments, Shares). Sortable columns.   Functionality: Allows creators to track their personal growth, compare performance across platforms, identify their best-performing content, and understand audience engagement trends over time. Data Displayed: User's own performance data fetched via authenticated APIs (follower counts, views, likes, comments, engagement rates, post details).   API Interactions: GET /api/crm/performance: Fetch performance data specific to the logged-in user, taking platform and period as parameters. Backend aggregates data from stored, synced platform info. GET /api/crm/posts: Fetch list of recent posts/videos for the user, potentially paginated. Logic: Verify user authentication and check which platforms are linked. Prompt user to link accounts if none are connected. Fetch performance data and recent posts from the backend API based on default/selected filters. Render KPI summaries, charts, and the posts table. Handle filter changes (platform, date range), fetch updated data, and re-render. Display appropriate messages if data is still syncing or unavailable for a platform. 9. Account Settings Page (/app/settings) Purpose: Centralized location for users to manage their profile information, subscription plan, payment methods, linked social media accounts, and API access keys. Key Components: (Often organized into Tabs or Sections) Profile: Form with fields for Name, Email (potentially read-only), Current Password (for verification), New Password, Confirm New Password. "Update Profile" button. Subscription & Billing: Display current plan name, status (Active, Canceled), renewal/expiry date, current usage (e.g., downloads this cycle). Buttons like "Change Plan", "Update Payment Method", "Cancel Subscription". May embed payment gateway elements (e.g., Stripe Customer Portal link/button). Linked Accounts: List of supported platforms (TikTok, Instagram, YouTube). For each, show connection status ("Connected as [Username]" or "Not Connected"). "Connect" or "Disconnect" button for each. Clicking "Connect" initiates the OAuth flow.   API Keys: (Visible based on subscription tier) Section to generate new API keys. Table listing existing keys (partial key display, name/label, creation date, last used date). "Revoke" button for each key. "Generate New Key" button. Functionality: Allows users to perform self-service account management tasks. Data Displayed: User's profile data, subscription details, list of linked accounts and their status, list of generated API keys. API Interactions: GET /api/auth/user: Fetch current profile data. PUT /api/auth/user: Send updated profile data (name, password change). GET /api/subscriptions/current: Fetch current subscription plan and usage details. POST /api/subscriptions/manage or similar: Initiate plan change or redirect to payment gateway's management portal. POST /api/auth/link/{platform}: Initiate OAuth flow for linking. DELETE /api/auth/link/{platform}: Disconnect a linked account. GET /api/apikeys: Fetch list of user's API keys. POST /api/apikeys: Request generation of a new API key. DELETE /api/apikeys/{keyId}: Revoke an existing API key. Logic: Fetch all relevant account data on page load. Handle form submissions for profile updates, including password validation. Manage subscription actions by interacting with the backend API, which in turn interacts with the payment gateway. Handle OAuth flows for linking/unlinking accounts, updating connection status display. Manage API key generation and revocation, displaying keys securely (e.g., show full key only once upon generation). Ensure actions are protected (e.g., require password confirmation for sensitive changes).