Submit

MCP Hub – Technical Product Requirements Document (PRD)

1. Vision

A unified AI and automation command center for multi-provider chat, workflow chaining, and seamless integration with services like GitHub and Google, featuring a modern, responsive, and extensible UI.

2. Tech Stack

Frontend:

  • React 18 (TypeScript), Vite, Tailwind CSS (dark mode)
  • Custom UI components, lucide-react icons
  • 3D visuals via @react-three/fiber, three.js
  • State management with custom React hooks

Backend:

  • Node.js (Express, ES modules)
  • AI Providers: OpenAI, Anthropic, Google Generative AI (Gemini)
  • Integrations: Google (OAuth), GitHub (OAuth, Octokit)
  • Session management: express-session
  • Database: SQLite (per-user integration tokens)
  • Security: CORS, dotenv, multer

3. Core Features

Frontend

  • Unified chat/workflow input (supports multi-step chaining)
  • Example commands and tips below chat input
  • Command palette and quick-insert for MCP commands
  • Per-user API key management (Google, GitHub, OpenAI, Anthropic, Gemini)
  • OAuth for Google and GitHub
  • Provider status indicators (connected/disconnected, last used, request count)
  • 3D ChromeGrid background
  • Settings modal for API key entry, provider connection, command reference
  • Request history

Backend

  • API endpoints: /api/chat, /api/workflow, /api/github, /api/google
  • Session management and per-user integration tokens
  • Secure OAuth flows for Google and GitHub
  • Modular provider/command registry for extensibility
  • Multi-step workflow execution and error handling
  • File upload and summarization

4. User Workflows

  • Multi-provider AI chat: Users can chat with OpenAI, Anthropic, or Gemini using their own API keys.
  • Command registry: Supports chat, summarize, code search, repo summary, explain, translate, and more.
  • Integrations: Google Drive, Gmail, and GitHub via OAuth and per-user credentials.
  • Smart intent parsing: Natural language commands are routed to the correct provider or integration.
  • Chained commands: Users can enter multi-step instructions in one message (e.g., "Summarize this PDF and translate to Spanish").
  • Workflow builder: (In progress) Visual builder for multi-step, multi-provider workflows.
  • File upload: Summarize or process uploaded files.
  • Session-based authentication: Secure, per-user integration tokens.

5. Security & Best Practices

  • TypeScript everywhere
  • Tailwind CSS for utility-first, responsive design
  • OAuth for secure integrations
  • Environment variables for secrets/config
  • API error handling and user feedback
  • CORS restricted to local dev ports
  • Per-user token storage in SQLite

6. Roadmap & Next Steps

  • Visual workflow builder (drag-and-drop)
  • More integrations (Notion, Slack, Jira, etc.)
  • Custom command macros and user-defined workflows
  • Scheduling and automation
  • Contextual memory and chaining across sessions
  • Harden OAuth flows, encrypt API keys, audit CORS
  • Add unit and integration tests

7. Example Use Cases

  • "Summarize this PDF and then translate it to Spanish."
  • "Fetch the latest GitHub issues, summarize them, and email the summary to my team."
  • "Extract text from an image, then run sentiment analysis."

MCP Hub

Product Requirements Document (PRD)

Core Features:

  • Multi-provider AI chat (OpenAI, Anthropic, Gemini) with per-user API keys.
  • Command registry: supports chat, summarize, code search, repo summary, explain, translate, and more.
  • Google Drive, Gmail, and GitHub integrations with OAuth and per-user credentials.
  • Real-time provider connection status in UI.
  • Command List modal for quick command discovery and insertion.
  • Smart intent parsing: routes commands to the correct provider or integration.
  • Chained command parsing: users can enter multi-step instructions in one message.
  • Workflow builder (in progress): design and run multi-step, multi-provider workflows.
  • File upload and summarization.
  • Session-based authentication for integrations.
  • Modern, responsive UI with dark/light mode.

Advanced/Upcoming:

  • Visual workflow builder (drag-and-drop).
  • More integrations (Notion, Slack, Jira, etc).
  • Custom command macros and user-defined workflows.
  • Scheduling and automation.
  • Contextual memory and chaining across sessions.

Features

  • Multi-provider AI chat: OpenAI, Anthropic, Gemini (per-user API keys)
  • Command registry: Chat, summarize, code search, repo summary, explain, translate, and more
  • Integrations: Google Drive, Gmail, GitHub (OAuth, per-user credentials)
  • Command List modal: Discover and insert commands quickly
  • Smart intent parsing: Natural language commands routed to the right provider/integration
  • Chained commands: Enter multi-step instructions in one message
  • Workflow builder: (in progress) Visual multi-step, multi-provider workflows
  • File upload: Summarize or process uploaded files
  • Session-based authentication: Secure, per-user integration tokens
  • Modern UI: Responsive, dark/light mode, real-time provider status

Chained Commands & GUI

Overview

Chained commands allow users to combine multiple actions in a single workflow, where the output of one command becomes the input for the next. This enables complex, multi-step tasks to be performed with a single prompt or through a visual builder.

User Value

  • Automates repetitive or multi-step tasks.
  • Saves time and reduces manual effort.
  • Enables advanced use cases (e.g., summarize a document, then translate the summary).

Example Use Cases

  • "Summarize this PDF and then translate it to Spanish."
  • "Fetch the latest GitHub issues, summarize them, and email the summary to my team."
  • "Extract text from an image, then run sentiment analysis."

Supported Chains

  • Summarize → Translate
  • Fetch Issues → Summarize → Email
  • Extract Text → Analyze Sentiment

Error Handling

  • If a step fails, the user is notified with a clear error message.
  • The user can view which step failed and retry or edit the chain.

Chained Command GUI

Key Features:

  • Command Builder Modal/Panel:
    • Users can visually add, remove, and reorder steps in a workflow.
    • Each step is represented as a card or block with editable parameters.
  • Inline Chaining in Chat:
    • Users can type chained commands naturally; the system parses and displays the steps visually above the input.
    • Users can click to edit the chain in the builder modal.
  • Execution Feedback:
    • Progress bar or step tracker shows which step is running, completed, or failed.
    • Users can expand/collapse to view intermediate results.

User Flow:

  1. User types a chained command or opens the builder.
  2. System parses and displays the steps.
  3. User reviews/edits the steps.
  4. User clicks "Run."
  5. UI shows progress and results for each step.

For questions, contributions, or commercial use, contact automationalien.com

MCP Server · Populars

MCP Server · New