ONLYOFFICEのAIプラグインにカスタムプロバイダを追加する方法

ONLYOFFICEのAIプラグインのリリースにより、エディターの基本機能が大幅に強化されました。ONLYOFFICE では、お客様の特定のニーズに適応する強力かつ柔軟なソリューションの提供に努めています。その一環として、AI プラグインに任意のカスタムプロバイダーを追加するオプションをご用意しました。このブログ記事では、Tongyi Qianwen と Kimi サービスを AI プラグインに統合する方法を、ステップバイステップでご紹介します。

<img class="aligncenter wp-image-243301" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25124032/How-to-add-custom-AI-provider.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="372" />

<!--more-->
<h2><strong>Tongyi Qianwen と Kimi について</strong></h2>
<a href="https://tongyi.aliyun.com/qianwen/" target="_blank" rel="noopener"><u>Alibaba Cloud Tongyi Qianwen</u></a> と <a href="https://platform.moonshot.cn/" target="_blank" rel="noopener"><u>Kimi</u></a> は、自然言語処理およびテキスト生成のために設計された先進的な AI 言語モデルです。
<ul>
 	<li><strong>Tongyi Qianwen</strong> は、Alibaba Cloud により開発された強力な大規模言語モデルで、コンテンツ作成、チャットボット、企業向けソリューションなど、さまざまな AI 主導のアプリケーションをサポートします。</li>
 	<li><strong>Kimi</strong> は、Moonshot AI によって開発された大規模言語モデルで、複雑な問い合わせへの対応、人間らしいテキスト生成、各種タスクの支援に優れた効率を発揮します。</li>
</ul>
両モデルは堅牢な AI 機能を提供しており、ONLYOFFICE AI プラグインに統合することで、ドキュメント編集や自動化をより一層強化できます。
<h2><strong>事前準備</strong></h2>
カスタムプロバイダーを追加する前に、以下のステップを完了してください:
<ol>
 	<li><strong>必要な認証情報を取得する</strong>: 選択したプロバイダーから、<em>base URL</em>、<em>model version</em>、および <em>API key</em> を取得します。</li>
 	<li><strong>専用の JavaScript ファイルを作成する</strong>: base URL、model version、および API key を別の JavaScript ファイルに保存します。</li>
</ol>
カスタムプロバイダーを統合する前に、必要となる主要な認証情報を以下に示します:
<ul>
 	<li><strong>Base URL</strong>: API リクエストを送信するウェブアドレスです。場合によっては、使用するモデルを指定するエンドポイントが含まれることもあります:</li>
</ul>
<pre class="lang:default decode:true "> https://dashscope.aliyuncs.com/compatible-mode/
</pre>
<ul>
 	<li><strong>Model Version</strong>: アクセスしているモデルのバージョンを識別します。場合によっては、モデルバージョンが base URL に含まれることもあります:</li>
</ul>
<pre class="lang:default decode:true ">https://api.moonshot.cn/v1
</pre>
この例では、モデルバージョンは <strong>v1</strong> です。
<ul>
 	<li><strong>API Key</strong>: サービスプロバイダーから提供される固有のキーで、認証に使用されます。</li>
</ul>
<h2><strong>外部 JavaScript ファイルの作成</strong></h2>
カスタムプロバイダーを追加し、AI プラグイン内の利用可能なプロバイダー一覧に表示するためには、外部 JS ファイルを作成してアップロードする必要があります。

このファイルから解析されたカスタムプロバイダーは、<em>AI.Provider</em> を拡張した <em>Provider</em> クラスのインスタンスです。このクラスは、プラグイン内のすべての利用可能なプロバイダーを管理します。

以下は、<em>Provider</em> クラスのパラメーターです:
<pre class="theme:github font:monospace lang:js decode:true ">class Provider {
        /**
         * Provider base class.
         * @param {string} name  Provider name.
         * @param {string} url   Url to service.
         * @param {string} key   Key for service. This is an optional field. Some providers may require a key for access.
         * @param {string} addon Addon for url. For example: v1 for many providers. 
         */
        constructor(name, url, key, addon) {
            this.name  = name  || "";
            this.url   = url   || "";
            this.key   = key   || "";
            this.addon = addon || "";
    
            this.models = [];
            this.modelsUI = [];
        }
}
</pre>
それでは、Tongyi Qianwen サービスの実装例を見てみましょう:
<pre class="theme:github font:monospace lang:js decode:true">"use strict";


class Provider extends AI.Provider {


    constructor() {
        super("Alibab Cloud", "https://dashscope.aliyuncs.com/compatible-mode", "yourAPIKey", "v1");
    }


}
</pre>
各項目の説明:
<ul>
 	<li><em><strong>Alibaba Cloud</strong></em>: プラグインに表示されるプロバイダーの名前です.</li>
 	<li><strong><em>https://dashscope.aliyuncs.com/compatible-mode</em></strong>: API リクエストを送信するウェブアドレスです.</li>
 	<li><em><strong>yourAPIKey</strong></em>: プロバイダーから発行された API キーです.</li>
 	<li><em><strong>v1</strong></em>: API リクエストを送信するモデルのバージョンです.</li>
</ul>
Kimi サービスの実装は以下の通りです:
<pre class="theme:github font:monospace lang:js decode:true ">"use strict";


class Provider extends AI.Provider {


    constructor() {
        super("Kimi", " https://api.moonshot.cn", "yourAPIkey", "v1");
    }


}
</pre>
<strong>カスタムプロバイダーの追加</strong>
<ul>
 	<li>任意の選択された単語を右クリックし、<strong>AI</strong> &gt; <strong>Settings</strong> に移動します.</li>
</ul>
<img class="img-popup aligncenter wp-image-243138" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25121954/Step1-1.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="465" />
<ul>
 	<li>「AI Configuration」ウィンドウで、<strong>Edit AI Models</strong> を選択します.</li>
</ul>
<img class="img-popup aligncenter wp-image-243154" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25122054/Step2.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="477" />
<ul>
 	<li>「AI Models list」ウィンドウで、モデルを編集するために<strong>鉛筆アイコン</strong>をクリックします.</li>
</ul>
<img class="img-popup aligncenter wp-image-243170" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25122258/Step3.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="478" />
<ul>
 	<li>「Edit AI Model」ウィンドウで、<strong>custom providers</strong> をクリックします.</li>
</ul>
<img class="img-popup aligncenter wp-image-243186" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25122511/Step4.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="480" />
<ul>
 	<li>プラスアイコンをクリックして、カスタムプロバイダー設定を含む JavaScript ファイルをアップロードします.</li>
</ul>
<img class="img-popup aligncenter wp-image-243202" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25122620/Step5.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="479" />
<ul>
 	<li>「Add AI Model」ウィンドウを終了するために <strong>Back</strong> をクリックします.</li>
</ul>
<img class="img-popup aligncenter wp-image-243218" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25122720/Step6.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="479" />
<ul>
 	<li>「Add AI Model」ウィンドウのリストからカスタムプロバイダーを選択し、<strong>OK</strong> をクリックします.</li>
</ul>
Tongyi Qianwen:

<img class="img-popup aligncenter wp-image-243234" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25122928/Step71.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="477" />

Kimi:

<img class="img-popup aligncenter wp-image-243250" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25123230/Step-72.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="480" />
<ul>
 	<li>「AI Models list」ウィンドウを終了するために <strong>Back</strong> をクリックします.</li>
</ul>
<img class="img-popup aligncenter wp-image-243266" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25123343/Step-8.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="477" />
<ul>
 	<li>「AI Configuration」ウィンドウで、特定のタスクに対してカスタムプロバイダーモデルを設定します.</li>
</ul>
<img class="img-popup aligncenter wp-image-243283" src="https://static-blog.onlyoffice.com/wp-content/uploads/2025/03/25123432/Step9.png" alt="How to add a custom provider to the ONLYOFFICE AI plugin" width="736" height="477" />

これらのステップを完了すると、AI プラグインは完全に構成され、幅広いタスクを支援する準備が整います！

ONLYOFFICE では、お客様の特定のニーズに応じた多機能な機能を提供することに努めています。この新機能は、私たちの革新への取り組みを反映しています。このチュートリアルがカスタムプロバイダーの設定を簡単にする一助となれば幸いです。ご質問やご提案がございましたら、<a href="https://www.onlyoffice.com/ja/contacts.aspx?utm_source=qiita&amp;utm_medium=post&amp;utm_id=custom_ai_provider_js_file" target="_blank" rel="noopener"><u>お問い合わせ</u></a>ください。皆様からのフィードバックやご協力を心よりお待ちしております！
<div class="useful-links">
<h3><strong>便利なリンク</strong></h3>
<a href="https://www.onlyoffice.com/ja/download.aspx?utm_source=qiita&amp;utm_medium=post&amp;utm_id=custom_ai_provider_js_file#docs-enterprise" target="_blank" rel="noopener"><u>ONLYOFFICE の最新バージョンを入手する</u></a>

<a href="https://www.onlyoffice.com/ja/ai-assistants.aspx?utm_source=qiita&amp;utm_medium=post&amp;utm_campaign=mistral_onlyoffice&amp;utm_id=custom_ai_provider_js_file" target="_blank" rel="noopener"><u>AI アシスタントが ONLYOFFICE を強化する方法</u></a>

<a href="https://www.onlyoffice.com/blog/ja/2025/03/faq-how-to-use-ai-in-onlyoffice?utm_source=qiita&amp;utm_medium=post&amp;utm_id=custom_ai_provider_js_file" target="_blank" rel="noopener"><u>FAQ: ONLYOFFICE での AI の使い方</u></a>

<u></u><u><a href="https://github.com/ONLYOFFICE" target="_blank" rel="noopener">ONLYOFFICEのGitHubページ</a></u>

</div>