はじめに

コーディング Agent で最初の Office アプリを作成し、組み込みとデプロイの手順を確認します。

このガイドでは、表計算との連動、文書の共同編集、Agent 用 CLI の3つの例で Office SDK の使い方を紹介します。例を1つ選び、プロンプトをコーディング Agent に渡してから、アプリへの組み込みとデプロイを進めます。

最初に作るものを決める

Office SDK は Sheets、Docs、Slides、Relational Tables、Canvases、PDF に対応します。アプリの目的に合う導入方法を選んでください。

目的開始するガイド最初の完了条件
Office エディターを組み込むWeb SDK のインストールコンテンツを作成、編集、保存し、再度開ける。
コンテンツと業務画面を連動させるFacade API入力欄とセルが双方向に連動し、実際の計算結果を表示できる。
共同編集を追加するServer SDK 共同編集クイックスタート独立した2つのセッションで同じ内容を編集し、互いの変更が同期される。
Office ファイルを取り込み、処理し、書き出すファイル変換実際のファイルを取り込み、編集、書き出し、結果を確認できる。
Agent や CLI からコンテンツを操作するAI SDK コンテンツ操作読み込み、構造確認、変更を実行し、確定結果や出力を検証できる。
人と Agent の共通ワークスペースを作るWorktree とレビューAgent の変更を独立した下書きに保持し、人が比較・レビューしてマージできる。

これらの機能は組み合わせられます。機能一覧で製品ごとの対応範囲を確認し、以下の3つの例でまず1つの流れを体験してください。

Agent と開発を始める

要件と llms.txt のドキュメント索引リンクをコーディング Agent に渡します。SDK ドキュメント全体をコピーする必要はありません。以下のテンプレートか、完成した3つの例をそのまま使えます。

要件テンプレート

<…> を自分の要件に置き換えます。Office システム全体を設計する前に、結果が見える機能を1つ決めましょう。

text
Univer Office SDK で、ローカルで動作する<アプリ名>を作ってください。最初に https://docs.univer.ai/ja-JP/llms.txt と関連する完全な例を読み、SDK パッケージのバージョンを揃えてください。初期コンテンツ:<すぐ操作できる少量のデータや文章>。中心となる体験:<ユーザーの操作1つと、直後に見える変化>。受け入れ条件:<操作して確認できる具体的な結果を2〜3個>。ネイティブの Univer エディターと実際の SDK 機能で、この流れだけを実装してください。実際に起動し、ブラウザーで検証してプレビューリンクを提示してください。必要な設定が不足している場合は、具体的に説明してください。

例1:表計算との連動

数量の入力欄とセルを双方向に連動させ、数式で計算した見積総額をページに表示します。

text
Univer Office SDK で、ローカルで動作する単一ページの見積アプリを作ってください。https://docs.univer.ai/ja-JP/llms.txt と関連する完全な例を読み、SDK パッケージのバージョンを揃えてください。基本の Sheets プリセットで編集可能なネイティブシートを組み込みます。モニター2台×1200、キーボード5個×300、ヘッドセット3個×200を用意し、各行の金額と合計はシートの数式で計算してください。横に「モニター数量」の入力欄と「見積合計」のカードを置きます。入力欄とセルを双方向に連動させ、カードは実際の数式結果を読み取ります。画面側で金額を再計算せず、ブラウザーへの保存と再読み込みでの復元に対応します。初期合計4500、数量を3にすると5700になることを確認してください。セルを直接編集しても入力欄と合計が更新され、保存後の再読み込みで復元されること。この機能だけを実装し、実際に動作確認してプレビューリンクを提示してください。

試し方: モニターの数量を2から3に変え、合計が4500から5700になることを確認します。シートを直接編集し、画面が追従することも確認します。保存して再読み込みし、復元を確かめてください。Web SDK のインストールと Facade APIも参照できます。

例2:文書の共同編集

独立した2つのセッションで同じ文書を編集し、双方の変更がリアルタイムに同期されることを確認します。

text
Univer Office SDK で、ローカルで動作する2人の文書共同編集デモを作ってください。https://docs.univer.ai/ja-JP/llms.txt と、次のリポジトリの現行例を参照し、https://github.com/dream-num/univer-collaboration-examplesフロントエンドとサーバーの SDK バージョンを揃えてください。Alice と Bob 用のネイティブなモダン文書エディターを左右に置きます。独立した実行環境とオンラインセッションで実際の Server SDK 共同編集サービスに接続し、公式例に従ってサーバーが作成した同じ文書を明示的に読み込みます。短い文章を用意します。左で入力すると右に表示され、右で続けて入力すると左も更新されるようにします。SDK の共同編集プロトコルを使い、固定のデモユーザー2人とメモリー内ストレージだけを使います。前後端を1つのローカルサービスで提供し、ログイン、ファイル管理、AI チャットは追加しません。Pro License は環境変数から読み込み、未設定なら SDK の既定の動作と表示を維持します。双方向の入力後に内容が一致し、サーバーで更新が確定することを確認してください。再読み込み後も内容が復元されること、サービスの再起動でメモリー内データが消えることも説明します。この機能だけを実装し、実際に動作確認してプレビューリンクを提示してください。

試し方: 左の本文に入力し、次に右で編集を続けます。双方向の同期と再読み込み後の復元を確認してください。デモのメモリー内データはサービス再起動時にリセットされます。デプロイ時は永続化データベースを接続してください。Server SDK 共同編集クイックスタートで導入方法を確認できます。

例3:自分の you-cli を作る

現在の Agent が使える独自の Office ツールを作ります。Sheet、Doc、Slide、Relational Table、Canvases に対応し、まず Doc で「生成 → プレビュー → 会話による修正」を体験します。

text
Univer Office SDK で、このプロジェクト専用の you-cli と Web プレビューを作ってください。https://docs.univer.ai/ja-JP/llms.txt と、以下の完全な内容操作例を読んでください。https://github.com/dream-num/univer-cli-examples前後端と AI SDK のバージョンを揃え、インストール済みの型で API を確認してください。Sheet、Doc、Slide、Relational Table、Canvases に対応し、まず Doc で実装します。./you-cli create <type> --name <name>、inspect --unit <id>、execute --unit <id> --file <path>、open --unit <id>、--help を用意してください。ツールをこのプロジェクトに置き、現在の Agent が読む説明または Skill を作成してください。unitId、種類、確定結果、プレビュー URL などを対応する JSON 結果に含めてください。CLI と Web は同じ実際の共同編集コンテンツを扱い、開いているネイティブエディターを更新します。書き込みの確定を待って読み戻し、コンテンツと一覧を永続化してください。open は URL を返し、Agent が宿主のプレビュー機能で開きます。利用可能なら右側に表示します。自然言語理解は現在の Agent を使い、ライセンスは環境から読み込んで必要な表示を保ってください。会話で週次レポートを生成して開き、続く会話でリスクと担当者を追加してください。同じ unitId と開いているプレビューを使い、再読み込み・サービス再起動後も復元してください。実際に検証し、プレビューと使い方を提示してください。この例のサービスだけを起動してください。

会話で使う

上のプロンプトをコーディング Agent に渡します。構築とプロジェクト説明の読み込みが済んだら、同じ会話で次のように依頼します。

text
you-cli で進捗、リスク、来週の計画を含む週次レポートを作り、Web プレビューを開いてください。

結果を見てから、続けて依頼します。

text
同じレポートに「納期が遅れる可能性がある」というリスクを追加し、担当者を林さんにしてください。すでに開いているプレビューを更新してください。

Agent は元の文書の unitId を再利用します。宿主が対応していれば会話の横にプレビューを表示し、それ以外では返されたブラウザーリンクを使います。

you-cli コマンド一覧

上のプロンプトで作るプロジェクト専用インターフェースです。UNIT_ID を create が返す unitId に置き換えます。edit.js は Agent が Facade API で作成する変更スクリプトです。

操作コマンド結果
作成./you-cli create doc --name "週次レポート"文書を作り unitId を返します。sheet、slide、base、board も選べます。
確認./you-cli inspect --unit UNIT_ID実際の内容と現在のリビジョンを読みます。
変更./you-cli execute --unit UNIT_ID --file edit.js変更を実行し、確定を待って結果を返します。
表示./you-cli open --unit UNIT_ID同じ文書の Web URL を返し、Agent が開きます。

./you-cli --help でも確認できます。AI SDK コンテンツ操作と完全な CLI SDK Examplesを参照してください。

アプリに最初の流れを組み込む

Web SDK が共通のコンテンツランタイムを提供します。共有編集や Agent 操作が必要になったら Server SDK と AI SDK を追加します。役割は Office SDK 概要を参照してください。

手順アプリで接続するもの関連ガイド
エディターの組み込みプリセットを画面に配置し、Facade API で業務操作を接続。スナップショット保存とインスタンス破棄を実装します。Web SDK 導入
バックエンドの接続既存の認証・権限を使い、共有文書のデータベースを設定。必要に応じてインポート・エクスポートを追加します。共同編集、ファイル変換
既存 Agent の接続読み書き、計算、検証をツールや CLI として公開。レビューが必要なら Worktree を追加します。AI SDK コンテンツ操作、Worktree

アプリケーション構成

既存アプリと Agent は Office コンテンツを共有できます。画面が操作を受け持ち、Agent がツールを呼び出し、業務サービスが認証・権限・ストレージを管理します。

青いノードは利用者側で用意・管理するシステムです: アプリ画面、既存 Agent、認証と権限を含む業務 API、データベース、ファイルストレージ。SDK と記したほかのノードは組み込む Univer の機能です。

100%

エディターの組み込みだけならローカルのスナップショットから始め、共有編集でバックエンドを接続します。Agent のモデルと処理の流れは既存のものを使い、AI SDK でコンテンツを操作します。変更の分離、比較、レビューには Worktree を組み合わせます。

Workspace を使ったビルドとデプロイ

Univer Workspaceは、3つの SDK を組み合わせた Office アプリの参考です。以下のコマンドはリポジトリのルートで実行します。前提条件は READMEを確認してください。

  1. ローカル開発。 依存関係をインストールし、別々のターミナルで pnpm workspace:dev:server と pnpm workspace:dev:web を実行します。http://127.0.0.1:5173 を開きます。Web 開発サーバーが API と WebSocket をバックエンドへ転送します。
  2. ビルドと実行。 Workspace アプリだけをビルドし、本番用エントリーを起動します。
Bash
pnpm --filter @univerjs/univer-workspace buildpnpm workspace:start

Web は dist/public、Server は dist/server に出力され、1つの Node.js プロセスが静的ページと API を提供します。

  1. デプロイの準備。 ライセンス、認証、データディレクトリを設定し、業務データ、共同編集データ、アップロードを永続化します。再起動後の復元も確認します。Docker デプロイと構成の説明を参照してください。

規模の拡大に応じて Server SDK デプロイガイドを参考にサービスを分離します。

ほかのオープンソースプロジェクト

  • Univer CLI:ローカルで Agent やターミナルから Office コンテンツを作成・編集・検証し、Viewer で変更をレビューします。
  • DeepSeek Harness:既存の Agent の会話に Office ツール、ライブプレビュー、下書きレビューを追加します。

すべての例でデモとリポジトリのリンクを確認できます。

このガイドはいかがですか?

© 2026 DreamNum Co., Ltd.