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

# Open WebUI で ClickHouse MCPサーバーを使う

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

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

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

<Steps>
  <Step>
    ## uv をインストールする

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

  <Step>
    ## Open WebUI を起動する

    Open WebUI を起動するには、次のコマンドを実行します。

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

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

  <Step>
    ## ClickHouse MCPサーバーを設定する

    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-mintlify-8c05c8a2/elHO3NI0U6chx0rg/images/use-cases/AI_ML/MCP/0_endpoints.png?fit=max&auto=format&n=elHO3NI0U6chx0rg&q=85&s=520c8e34c3744bb0d29e5b47bede3dfb" alt="Open API エンドポイント" size="md" width="1455" height="759" data-path="images/use-cases/AI_ML/MCP/0_endpoints.png" />

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

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/elHO3NI0U6chx0rg/images/use-cases/AI_ML/MCP/1_settings.png?fit=max&auto=format&n=elHO3NI0U6chx0rg&q=85&s=876d558076241cf272a5f967bdc253a7" alt="Open WebUI の設定" size="md" width="518" height="575" data-path="images/use-cases/AI_ML/MCP/1_settings.png" />

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

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

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

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

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

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/elHO3NI0U6chx0rg/images/use-cases/AI_ML/MCP/4_tools_available.png?fit=max&auto=format&n=elHO3NI0U6chx0rg&q=85&s=45743e1c03beb63098f5f5c613c77913" alt="Open WebUI で利用可能なツール" size="md" width="1495" height="229" data-path="images/use-cases/AI_ML/MCP/4_tools_available.png" />

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

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

  <Step>
    ## OpenAI を設定する

    デフォルトでは Open WebUI は Ollama のモデルを使用しますが、OpenAI 互換のエンドポイントも追加できます。
    これらは設定メニューから構成しますが、今回は `Connections` タブをクリックします。

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/elHO3NI0U6chx0rg/images/use-cases/AI_ML/MCP/6_connections.png?fit=max&auto=format&n=elHO3NI0U6chx0rg&q=85&s=3865397e0c83dc068051a760c94ce1da" alt="Open WebUI の接続" size="md" width="1824" height="1184" data-path="images/use-cases/AI_ML/MCP/6_connections.png" />

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

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

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

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

  <Step>
    ## Open WebUI で ClickHouse MCPサーバーとチャットする

    これで会話を始められ、必要に応じて Open WebUI が MCPサーバーを呼び出します。

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/elHO3NI0U6chx0rg/images/use-cases/AI_ML/MCP/9_conversation.png?fit=max&auto=format&n=elHO3NI0U6chx0rg&q=85&s=5e342290a1f1fdf0764247a3a6f446e5" alt="Open WebUI - ClickHouse MCPサーバーとチャットする" size="md" width="2449" height="1839" data-path="images/use-cases/AI_ML/MCP/9_conversation.png" />
  </Step>
</Steps>
