MCP Chat

repository·main·Indexed 41 days ago

https://github.com/pipedreamhq/mcp-chat

An open-source chat application (v0.1.0) that integrates the AI SDK with Pipedream's Model Context Protocol (MCP) server, enabling interaction with thousands of APIs and tools. It features a system of artifacts for handling code (with Pyodide Python execution and Matplotlib support), images, spreadsheets (CSV export), and text, all supporting streaming updates and version control.

Tokens
15.1K
Snippets
46
Records
57
Agent score
51%

What's inside MCP Chat

  1. Run MCP Chat locally

    main

    To run the application on your local machine, follow these steps:

    1. Setup Environment Variables: Copy the example environment file and populate it with your credentials:

      cp .env.example .env

      Note: By default, DISABLE_AUTH=true and DISABLE_PERSISTENCE=true are set in the example file to simplify local development.

    2. Install Dependencies: Use asdf to manage core dependencies and pnpm to install project packages:

      asdf install
      pnpm install
    3. Start the Development Server:

      pnpm dev

    The app will be available at http://localhost:3000.

    cp .env.example .env
    asdf install
    pnpm install
    pnpm dev
  2. Deploy MCP Chat to Vercel

    main

    You can one-click deploy this application to Vercel. When deploying, you must provide the following environment variables:

    • PIPEDREAM_CLIENT_ID
    • PIPEDREAM_CLIENT_SECRET
    • PIPEDREAM_PROJECT_ID
    • PIPEDREAM_PROJECT_ENVIRONMENT
    • AUTH_SECRET
    • GOOGLE_CLIENT_ID
    • GOOGLE_CLIENT_SECRET
    • OPENAI_API_KEY
    • EXA_API_KEY
    • POSTGRES_URL
  3. Enable chat persistence locally

    main

    To enable saving chat history and user data during local development, you must run a local database using Docker and execute the database migrations.

    1. Start local services:

      docker compose up -d
    2. Run migrations: Provide your local POSTGRES_URL when running the migration command:

      POSTGRES_URL=postgresql://postgres@localhost:5432/postgres pnpm db:migrate
    docker compose up -d
    POSTGRES_URL=postgresql://postgres@localhost:5432/postgres pnpm db:migrate
  4. How Artifacts work in Pipedream Chat

    main

    Artifacts is a specialized UI mode for content creation (writing, editing, and coding). When an artifact is active, it appears on the right side of the screen while the conversation remains on the left. Changes to documents are reflected in real-time.

    When to use createDocument

    • For substantial content (>10 lines) or code.
    • For content likely to be saved or reused (emails, essays, etc.).
    • When a single code snippet is requested.
    • When explicitly asked to create a document.

    When NOT to use createDocument

    • For informational, explanatory, or conversational responses.
    • When the user explicitly asks to keep content in the chat.

    Updating Artifacts

    • Use updateDocument for changes.
    • Default to full document rewrites for major changes.
    • Use targeted updates for specific, isolated changes.
    • Crucial: Do not call updateDocument immediately after createDocument. Wait for user feedback or a specific request to update.
    // Conceptual usage of artifact tools
    // createDocument(content, type)
    // updateDocument(content, type)
  5. How Pipedream tools and web search are used

    main

    Pipedream Chat uses three distinct modes of task handling:

    1. Direct Knowledge: Used for general information, simple calculations, creative writing, or explaining technical concepts that don't require real-time data.
    2. web_search tool: Used for current events, weather, up-to-date prices/statistics, fact-checking, or recent product details.
    3. Pipedream tools: Used for any task requiring integration with external apps, checking/updating data in connected platforms, or performing actions that require authentication (e.g., sending a Slack message).

    Multi-step Task Pattern

    For tasks requiring both real-time info and API integration (e.g., "Get current weather and send to Slack"), you must always gather real-time information first using web_search before proceeding to use Pipedream tools.

  6. Guidelines for Python code generation

    main

    When generating Python code snippets, follow these constraints to ensure they are safe and executable:

    • Self-contained: Snippets must be complete and runnable on their own.
    • Standard Library Only: Avoid external dependencies; use only the Python standard library.
    • Output: Use print() statements to display results.
    • Conciseness: Keep snippets generally under 15 lines.
    • Safety:
      • Do not use input() or interactive functions.
      • Do not access files or network resources.
      • Do not use infinite loops.
    • Error Handling: Handle potential errors gracefully.
    # Example of a good snippet
    # Calculate factorial iteratively
    def factorial(n):
        result = 1
        for i in range(1, n + 1):
            result *= i
        return result
    
    print(f"Factorial of 5 is: {factorial(5)}")
  7. Configure Matplotlib output handling in Python

    main

    When executing Python code that uses matplotlib, the codeArtifact injects a specific handler to ensure plots are captured and displayed. The handler performs the following steps:

    1. Clears existing plots: Calls plt.clf() and plt.close('all').
    2. Switches to 'agg' backend: Uses plt.switch_backend('agg') for non-interactive rendering.
    3. Customizes plt.show: Overrides the default plt.show() with a custom_show() function that:
      • Checks if the plot size is excessively large and reduces DPI if necessary.
      • Saves the plot to a BytesIO buffer as a PNG.
      • Prints the result as a base64 data URI: data:image/png;base64,<data>.

    This allows the client-side console to detect the data:image/png;base64 prefix and render the output as an image rather than text.

  8. Tool discovery workflow

    main

    To find and use the correct integration tools, follow this sequence:

    1. Call the WHAT_ARE_YOU_TRYING_TO_DO tool to find relevant tools.
    2. Call the SELECT_APPS tool (which becomes available after the first step) to identify the specific integration to use.
    3. Use the list of tools provided by SELECT_APPS to complete the request.
  9. The Pipedream tool configuration workflow

    main

    When using Pipedream tools, certain tools initiate a configuration session (indicated by names starting with begin_configuration_). Follow this workflow:

    1. Start Session: Call the begin_configuration_* tool.
    2. Fetch Options: The tool list will update. Use configure_component to fetch available options for required properties. If a tool provides ASYNC_OPTIONS_*, you must use it to fetch options to avoid invalid data.
    3. Execute: Once all required properties are configured, call the run_* tool to execute the action.

    Note: If a tool has an empty inputSchema (no required properties), call the run_* tool immediately after the configuration tool.

  10. Configure Drizzle ORM for mcp-chat

    main

    The project uses Drizzle ORM with PostgreSQL. The configuration is defined in drizzle.config.ts and relies on environment variables loaded from .env.local.

    Key configuration settings:

    • schema: Points to the database schema definition at ./lib/db/schema.ts.
    • out: Specifies the directory for migrations at ./lib/db/migrations.
    • dialect: Set to postgresql.
    • dbCredentials.url: The connection string is provided via the POSTGRES_URL environment variable.
    import { config } from 'dotenv';
    import { defineConfig } from 'drizzle-kit';
    
    config({
      path: '.env.local',
    });
    
    export default defineConfig({
      schema: './lib/db/schema.ts',
      out: './lib/db/migrations',
      dialect: 'postgresql',
      dbCredentials: {
        url: process.env.POSTGRES_URL!,
      },
    });
  11. Configure the PostgreSQL database service

    main

    The postgres service uses the postgres:latest image. It is configured with POSTGRES_HOST_AUTH_METHOD: trust for authentication and exposes port 5432 on the host.

    postgres:
      image: postgres:latest
      container_name: postgres_db
      environment:
        POSTGRES_HOST_AUTH_METHOD: trust
      ports:
        - "5432:5432"