Social Monitor Dashboard

import { Tool, SchemaConstraint, Optional } from '@leanmcp/core';
import { GPTApp } from '@leanmcp/ui/server';

class DashboardInput {
  @Optional()
  @SchemaConstraint({
    description: 'Initial tab to display',
    enum: ['discovery', 'my-posts', 'mentions'],
    default: 'discovery'
  })
  initialTab?: 'discovery' | 'my-posts' | 'mentions';
}

export class DashboardService {
  @Tool({
    description: 'Open Social Monitor Dashboard with three tabs: MCP Discovery, My Posts, and Mentions',
    inputClass: DashboardInput
  })
  @GPTApp({
    component: './SocialMonitorDashboard',
    title: 'Social Monitor'
  })
  async openDashboard(input: DashboardInput) {
    return {
      status: 'ready',
      initialTab: input.initialTab ?? 'discovery',
      config: {
        hnUsername: process.env.HN_USERNAME,
        openaiConfigured: !!process.env.OPENAI_API_KEY
      }
    };
  }
}

import { Tool } from '@leanmcp/core';

export class DiscoveryService {
  @Tool({
    description: 'Find HackerNews discussions about MCP for outreach opportunities'
  })
  async discoverMCPOpportunities() {
    const keywords = ['MCP', 'Model Context Protocol', 'Claude', 'AI agents'];
    const mentions: Mention[] = [];

    for (const keyword of keywords) {
      const response = await fetch(
        `https://hn.algolia.com/api/v1/search?query=${encodeURIComponent(keyword)}&tags=story&hitsPerPage=10`
      );
      const data = await response.json();

      for (const hit of data.hits) {
        mentions.push({
          id: `hn-${hit.objectID}`,
          platform: 'hackernews',
          mode: 'discovery',
          type: 'post',
          content: hit.title,
          url: `https://news.ycombinator.com/item?id=${hit.objectID}`,
          authorName: hit.author,
          createdAt: hit.created_at,
          status: 'pending',
          platformId: hit.objectID
        });
      }
    }

    return {
      success: true,
      mentions: mentions.slice(0, 20),
      total: mentions.length
    };
  }
}

import { Tool } from '@leanmcp/core';

export class MyPostsService {
  @Tool({
    description: 'Get replies and comments on your HackerNews posts'
  })
  async getMyPostReplies() {
    const username = process.env.HN_USERNAME;
    if (!username) {
      return {
        success: false,
        error: 'HN_USERNAME not configured',
        mentions: []
      };
    }

    // Fetch user's submissions
    const userResponse = await fetch(
      `https://hacker-news.firebaseio.com/v0/user/${username}.json`
    );
    const userData = await userResponse.json();

    const mentions: Mention[] = [];

    // Get recent submissions
    const submissions = userData.submitted?.slice(0, 10) || [];

    for (const itemId of submissions) {
      const itemResponse = await fetch(
        `https://hacker-news.firebaseio.com/v0/item/${itemId}.json`
      );
      const item = await itemResponse.json();

      if (item.type === 'story' && item.kids) {
        // Fetch top-level comments
        for (const kidId of item.kids.slice(0, 5)) {
          const commentResponse = await fetch(
            `https://hacker-news.firebaseio.com/v0/item/${kidId}.json`
          );
          const comment = await commentResponse.json();

          if (comment.text) {
            mentions.push({
              id: `hn-reply-${comment.id}`,
              platform: 'hackernews',
              mode: 'my-posts',
              type: 'comment',
              content: comment.text,
              url: `https://news.ycombinator.com/item?id=${comment.id}`,
              authorName: comment.by,
              parentTitle: item.title,
              parentUrl: `https://news.ycombinator.com/item?id=${item.id}`,
              createdAt: new Date(comment.time * 1000).toISOString(),
              status: 'pending',
              platformId: comment.id.toString()
            });
          }
        }
      }
    }

    return {
      success: true,
      mentions,
      total: mentions.length
    };
  }
}

import { Tool } from '@leanmcp/core';

export class MentionsService {
  @Tool({
    description: 'Find mentions of LeanMCP across HackerNews'
  })
  async getLeanMCPMentions() {
    const mentions: Mention[] = [];
    const keywords = ['leanmcp', 'lean-mcp'];

    for (const keyword of keywords) {
      const response = await fetch(
        `https://hn.algolia.com/api/v1/search?query=${keyword}&hitsPerPage=20`
      );
      const data = await response.json();

      for (const hit of data.hits) {
        const content = hit.comment_text || hit.story_text || hit.title;
        if (!content) continue;

        mentions.push({
          id: `hn-mention-${hit.objectID}`,
          platform: 'hackernews',
          mode: 'mentions',
          type: hit.comment_text ? 'comment' : 'post',
          content,
          url: `https://news.ycombinator.com/item?id=${hit.objectID}`,
          authorName: hit.author,
          parentTitle: hit.story_title,
          createdAt: hit.created_at,
          status: 'pending',
          platformId: hit.objectID
        });
      }
    }

    return {
      success: true,
      mentions: mentions.slice(0, 20),
      total: mentions.length
    };
  }
}

import { Tool, SchemaConstraint } from '@leanmcp/core';
import OpenAI from 'openai';

class GenerateResponseInput {
  @SchemaConstraint({ description: 'Original mention text' })
  mentionText!: string;

  @SchemaConstraint({
    description: 'Response mode',
    enum: ['discovery', 'my-posts', 'mentions']
  })
  mode!: 'discovery' | 'my-posts' | 'mentions';

  @SchemaConstraint({
    description: 'Platform',
    enum: ['hackernews', 'reddit']
  })
  platform!: string;

  @SchemaConstraint({
    description: 'Tone',
    enum: ['professional', 'friendly', 'witty'],
    default: 'friendly'
  })
  tone?: string;
}

export class AIResponseService {
  private openai: OpenAI;

  constructor() {
    this.openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
  }

  @Tool({
    description: 'Generate AI-powered response to social mentions',
    inputClass: GenerateResponseInput
  })
  async generateResponse(input: GenerateResponseInput) {
    const modeInstructions = {
      discovery: 'This is an organic discussion about MCP. Provide helpful, non-promotional insight.',
      'my-posts': 'Reply to a comment on your post. Be appreciative and engaging.',
      mentions: 'Someone mentioned LeanMCP. Be helpful and answer their implicit question.'
    };

    const toneGuide = {
      professional: 'Be formal and technical',
      friendly: 'Be warm and conversational',
      witty: 'Be clever and engaging'
    };

    const prompt = `Generate a ${input.tone || 'friendly'} response for ${input.platform}.

    MODE: ${modeInstructions[input.mode]}
    TONE: ${toneGuide[input.tone || 'friendly']}

    ORIGINAL POST:
    ${input.mentionText}

    Guidelines:
    - Keep it concise (2-3 sentences max)
    - No emojis
    - Sound natural and human
    - ${input.mode === 'discovery' ? 'DO NOT promote LeanMCP unless directly relevant' : 'Focus on being helpful'}
    - ${input.platform === 'hackernews' ? 'HN style: technical, thoughtful, no marketing' : 'Reddit style: casual but informative'}

    Return ONLY the response text, no JSON.`;

    const completion = await this.openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: [{ role: 'user', content: prompt }],
      temperature: 0.7,
      max_tokens: 150
    });

    return {
      success: true,
      response: completion.choices[0].message.content
    };
  }
}

import React, { useState, useEffect, useCallback } from 'react';
import { useGptApp, useGptTool, useWidgetState, useToolOutput } from '@leanmcp/ui';

type TabMode = 'discovery' | 'my-posts' | 'mentions';

const TABS: { mode: TabMode; label: string }[] = [
  { mode: 'discovery', label: 'MCP Discovery' },
  { mode: 'my-posts', label: 'My Posts' },
  { mode: 'mentions', label: 'LeanMCP Mentions' }
];

const TAB_TOOLS: Record<TabMode, string> = {
  'discovery': 'discoverMCPOpportunities',
  'my-posts': 'getMyPostReplies',
  'mentions': 'getLeanMCPMentions'
};

export function SocialMonitorDashboard() {
  const { isConnected } = useGptApp();
  const toolOutput = useToolOutput<any>();

  if (!isConnected) {
    return <LoadingScreen />;
  }

  return <DashboardContent initialTab={toolOutput?.initialTab || 'discovery'} />;
}

function DashboardContent({ initialTab }: { initialTab: TabMode }) {
  const [widgetState, setWidgetState] = useWidgetState<{ activeTab: TabMode }>({
    activeTab: initialTab
  });
  const { activeTab } = widgetState;
  const setActiveTab = (mode: TabMode) => 
    setWidgetState(prev => ({ ...prev, activeTab: mode }));

  const [mentions, setMentions] = useState<Mention[]>([]);
  const [respondingToId, setRespondingToId] = useState<string | null>(null);

  const { call: fetchMentions, loading } = useGptTool(TAB_TOOLS[activeTab]);

  const loadMentions = useCallback(() => {
    fetchMentions({}).then(result => {
      const data = parseToolResult(result);
      if (data?.mentions) {
        setMentions(data.mentions);
      }
    });
  }, [fetchMentions]);

  useEffect(() => {
    setMentions([]);
    setRespondingToId(null);
    loadMentions();
  }, [activeTab, loadMentions]);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header with Tabs */}
      <header className="bg-white border-b sticky top-0 z-10">
        <div className="max-w-3xl mx-auto px-4">
          <div className="h-14 flex items-center justify-between">
            <h1 className="font-semibold">Social Monitor</h1>
            <button
              onClick={loadMentions}
              disabled={loading}
              className="p-2 hover:bg-gray-100 rounded transition-colors"
            >
              <RefreshIcon loading={loading} />
            </button>
          </div>

          {/* Tabs */}
          <div className="flex gap-6">
            {TABS.map(tab => (
              <button
                key={tab.mode}
                onClick={() => setActiveTab(tab.mode)}
                className={`py-3 text-sm font-medium border-b-2 ${
                  activeTab === tab.mode
                    ? 'border-gray-900 text-gray-900'
                    : 'border-transparent text-gray-500'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-3xl mx-auto px-4 py-6">
        <div className="mb-6 text-xs text-gray-500">
          {mentions.length} results • HN: {mentions.filter(m => m.platform === 'hackernews').length}
        </div>

        {loading && mentions.length === 0 ? (
          <LoadingSkeleton />
        ) : mentions.length === 0 ? (
          <EmptyState onRefresh={loadMentions} />
        ) : (
          <div className="space-y-4">
            {mentions.map(mention => (
              <MentionCard
                key={mention.id}
                mention={mention}
                isResponding={respondingToId === mention.id}
                onToggleRespond={() => 
                  setRespondingToId(respondingToId === mention.id ? null : mention.id)
                }
              />
            ))}
          </div>
        )}
      </main>
    </div>
  );
}