MCP SuperAssistant

The Gemini Adapter provides specialized support for the Google Gemini website (https://gemini.google.com/). It enables the MCP SuperAssistant extension to interact with Gemini's interface and detect MCP tool commands within chat responses.

Key capabilities include:

• DOM Observation: Detecting tool commands in chat responses by observing DOM changes.
• Markdown Processing: Extracting MCP tool commands from Gemini's markdown-formatted responses.
• Chat Interaction: Programmatically inserting text, submitting messages, and handling file uploads.
• Sidebar Integration: Converting detected tools into a format compatible with the extension's sidebar for displaying outputs.

MCP SuperAssistant is a Chrome extension that integrates the Model Context Protocol (MCP) tools with web-based AI platforms. It allows you to execute MCP tools directly within interfaces like ChatGPT, Perplexity, Google Gemini, and more, seamlessly inserting tool results back into the conversation.

Supported Platforms include:

• ChatGPT
• Google Gemini & Google AI Studio
• Perplexity
• Grok
• OpenRouter Chat
• DeepSeek
• GitHub Copilot
• Mistral AI
• Kimi
• Qwen Chat
• Z Chat
• and others.

The Instructions component provides two primary utilities for managing MCP tool instructions:

1. instructionGenerator.ts: Responsible for generating markdown-formatted instructions for using MCP tools based on the available toolset.
2. schema_converter.ts: Provides utilities to convert between standard JSON Schema and the compact Compressed Schema Notation (CSN).

The @extension/shared package serves as a central repository for TypeScript types, utilities, and constants. Its primary goal is to ensure type safety and prevent code duplication across the different parts of the MCP SuperAssistant extension, including:

• Content script components
• Background script/service worker
• Popup and options pages
• Development utilities

Specifically, it contains critical definitions like toolCall.ts which defines the structures for MCP tool calls and execution results used throughout the system.

The application state is partitioned into several specialized stores, each managing a distinct domain. These are composed and exported via stores/index.ts.

Store Directory Structure

• app.store.ts: Manages general application state.
• adapter.store.ts: Manages plugin adapter state.
• connection.store.ts: Manages MCP (Model Context Protocol) connection state.
• tool.store.ts: Manages tool management state.
• ui.store.ts: Manages UI-specific state management.

You can customize the appearance of the @extension/ui package in two ways:

• Global Tailwind Styles: Modify the tailwind.config.ts file in the UI package to change theme settings, colors, or spacing.
• CSS Variables: Modify the CSS variables defined in ui/lib/global.css to change the core color palette (e.g., --primary, --background, --border).

The Events Module provides a decoupled, type-safe communication system for the MCP-SuperAssistant content script. It uses a central TypedEventBus to manage communication between different application parts.

Key Components

• event-bus.ts: The central hub (TypedEventBus) that supports typed events, wildcard listeners, event history, and error handling.
• event-types.ts: Defines the EventMap interface, which maps event names to their specific payload types, ensuring type safety.
• event-handlers.ts: Manages global listeners for application-wide events like errors or site changes.
• event-system.ts: Orchestrates the lifecycle (setup and teardown) of the entire system.

Components can communicate with other parts of the extension using the useEventBus hook. This is useful for decoupling UI interactions from core logic.

Use the emit function to broadcast events with a payload. Common event patterns include notifying the system when a tool is requested by a user interaction.

import { useEventBus } from '../../hooks/useEventBus';

export function ToolButton({ toolId }: { toolId: string }) {
  const { emit } = useEventBus();
  
  const handleClick = () => {
    emit('tool:requested', { toolId, source: 'button' });
  };
  
  return <button onClick={handleClick}>Execute Tool</button>;
}

The plugin system is a modular architecture designed to adapt the assistant's capabilities based on the active website.

• PluginRegistry: The central hub that manages registration, lifecycle (initialize, activate, deactivate, cleanup), and hostname-based adapter selection.
• BaseAdapterPlugin: An abstract class that provides a standardized implementation for lifecycle management, status tracking, and error handling.
• PluginContext: A factory that provides plugins with access to runtime resources, including Zustand stores, a type-safe event bus, DOM utilities, Chrome APIs, and a structured logger.
• Adapters: Site-specific implementations (like ExampleForumAdapter) that fulfill the AdapterPlugin contract to perform actions like text insertion or form submission on specific domains.