> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-vortex-format.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Open WebUIでClickHouse MCPサーバーを使用する

> このガイドでは、Dockerを使用してClickHouse MCPサーバーとOpen WebUIを設定する方法を説明します。

export const Image = ({img, alt, size = "lg"}) => {
  const normalizedSize = ["sm", "md", "lg"].includes(size) ? size : "lg";
  return <div className={`ch-image-${normalizedSize}`}>
      <Frame>
        <img src={img} alt={alt} />
      </Frame>
    </div>;
};

> このガイドでは、[Open WebUI](https://github.com/open-webui/open-webui) を ClickHouse MCPサーバーと連携させて設定し、
> ClickHouse のサンプルデータセットに接続する方法を説明します。

<Steps>
  <Step title="uv をインストール" id="install-uv">
    このガイドの手順に従うには、[uv](https://docs.astral.sh/uv/) をインストールする必要があります。
    uv を使わない場合は、別のパッケージマネージャーを使用するように MCPサーバーの設定を更新する必要があります。
  </Step>

  <Step title="Open WebUI を起動" id="launch-open-webui">
    Open WebUI を起動するには、次のコマンドを実行します。

    ```bash theme={null}
    uv run --with open-webui open-webui serve
    ```

    UI を表示するには、[http://localhost:8080/](http://localhost:8080/) にアクセスします。
  </Step>

  <Step title="ClickHouse MCPサーバーを設定" id="configure-clickhouse-mcp-server">
    ClickHouse MCPサーバーを設定するには、MCPサーバーを Open API エンドポイントに変換する必要があります。
    まず、ClickHouse SQL Playground に接続できるように環境変数を設定します。

    ```bash theme={null}
    export CLICKHOUSE_HOST="sql-clickhouse.clickhouse.com"
    export CLICKHOUSE_USER="demo"
    export CLICKHOUSE_PASSWORD=""
    ```

    次に、`mcpo` を実行して Open API エンドポイントを作成します。

    ```bash theme={null}
    uvx mcpo --port 8000 -- uv run --with mcp-clickhouse --python 3.10 mcp-clickhouse
    ```

    [http://localhost:8000/docs](http://localhost:8000/docs) にアクセスすると、作成されたエンドポイントの一覧を確認できます。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/0_endpoints.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=e08cb52990ea84f3739005932686f2f6" alt="Open API エンドポイント" size="md" width="1455" height="759" data-path="images/use-cases/AI_ML/MCP/0_endpoints.webp" />

    これらのエンドポイントを Open WebUI で使用するには、設定画面に移動します。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/1_settings.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=5140bc7444bf2890cfa7d05b968a13fe" alt="Open WebUI の設定" size="md" width="518" height="575" data-path="images/use-cases/AI_ML/MCP/1_settings.webp" />

    `Tools` をクリックします。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/2_tools_page.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=e63a420bdaf31537a3f6744c041642d5" alt="Open WebUI のツール" size="md" width="1829" height="1190" data-path="images/use-cases/AI_ML/MCP/2_tools_page.webp" />

    ツール URL として [http://localhost:8000](http://localhost:8000) を追加します。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/3_add_tool.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=3de5b7f95709fa59909a47f3f24cfe8d" alt="Open WebUI のツール" size="md" width="1838" height="1201" data-path="images/use-cases/AI_ML/MCP/3_add_tool.webp" />

    これが完了すると、チャットバーのツールアイコンの横に `1` が表示されます。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/4_tools_available.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=66a911187a8151bf7282570b74e46a71" alt="利用可能な Open WebUI のツール" size="md" width="1495" height="229" data-path="images/use-cases/AI_ML/MCP/4_tools_available.webp" />

    ツールアイコンをクリックすると、利用可能なツールの一覧を表示できます。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/5_list_of_tools.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=bc669ff4d482a808e4e54a1236e35962" alt="Open WebUI のツール一覧" size="md" width="1373" height="711" data-path="images/use-cases/AI_ML/MCP/5_list_of_tools.webp" />
  </Step>

  <Step title="OpenAI を設定" id="configure-openai">
    Open WebUI はデフォルトで Ollama モデルに対応していますが、OpenAI 互換のエンドポイントも追加できます。
    これらは設定メニューから構成しますが、今回は `Connections` タブをクリックする必要があります。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/6_connections.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=306fcbe4dffd227370be6ca20158925e" alt="Open WebUI の接続" size="md" width="1824" height="1184" data-path="images/use-cases/AI_ML/MCP/6_connections.webp" />

    エンドポイントと OpenAI キーを追加します。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/7_add_connection.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=aa1dca3f6404b413c592aa1b84345487" alt="Open WebUI - 接続として OpenAI を追加" size="md" width="1821" height="1192" data-path="images/use-cases/AI_ML/MCP/7_add_connection.webp" />

    すると、OpenAI モデルが上部メニューから利用できるようになります。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/8_openai_models_more.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=50866552c34d4a309df93b37d7f838f6" alt="Open WebUI - モデル" size="md" width="1574" height="1248" data-path="images/use-cases/AI_ML/MCP/8_openai_models_more.webp" />
  </Step>

  <Step title="Open WebUI で ClickHouse MCPサーバーとチャット" id="chat-to-clickhouse-mcp-server">
    その後、会話を開始すると、必要に応じて Open WebUI が MCPサーバーを呼び出します。

    <Image img="https://mintcdn.com/private-7c7dfe99-vortex-format/mc_CXbtYxT_GqYxL/images/use-cases/AI_ML/MCP/9_conversation.webp?fit=max&auto=format&n=mc_CXbtYxT_GqYxL&q=85&s=811df4b7acf2ede51f59a178efed4881" alt="Open WebUI - ClickHouse MCPサーバーとチャット" size="md" width="2449" height="1839" data-path="images/use-cases/AI_ML/MCP/9_conversation.webp" />
  </Step>
</Steps>
