add with-ai.md

Author: bea4dev

docs/docs/with-ai-0.png

@@ -0,0 +1,69 @@
+---
+title: Creating Videos with AI
+sidebar_position: 5
+---
+
+FrameScript is a text-based video editor, so it pairs extremely well with LLM-based coding agents.
+This guide shows how to create a video using a coding agent.
+
+## 1. Prepare a coding agent
+
+First, pick a coding agent.
+Good options include [`Codex CLI`](https://developers.openai.com/codex/cli/), [`Claude Code`](https://code.claude.com/docs/en/overview), and [`Gemini CLI`](https://geminicli.com/).
+Personally, I recommend `Codex CLI`.
+
+## 2. Create a project
+
+Run the following command in any directory:
+
+```bash
+npm init @frame-script/latest
+```
+
+This will create a project via an interactive prompt.
+
+Move into the created directory:
+
+```bash
+cd <project-path>
+```
+
+Then run:
+
+```bash
+npm run start
+```
+
+## 3. Open your editor
+
+Launch your preferred editor in the created project directory.
+
+## 4. Start the coding agent
+
+Open a new terminal and start the agent in the project directory.
+
+## 5. Give clear instructions
+
+This is the most important part.
+FrameScript bundles the editor inside the project directory, which is a bit unusual.
+The AI needs to understand that setup.
+We recommend instructions like:
+
+> First, read `AGENTS.md` to understand the project overview.
+
+Then follow with something concrete, for example:
+
+> I want to create a video here.
+> First, please do ~~~.
+
+## When AI works best
+
+AI is often good at adding motion to images or text.
+However, cutting videos or fine-tuning positions can be tricky, because LLMs cannot view the preview.
+For detailed positioning, ask the agent to expose values as variables and adjust them yourself.
+For video cuts, it is usually faster to do a rough pass manually.
+
+## Gallery
+
+In this example, the outlined text, character placement, and radial lines were created with AI instructions.
+![](./with-ai-0.png)

docs/docs/with-ai.md

@@ -0,0 +1,66 @@
+---
+title: AIとの動画作成
+sidebar_position: 5
+---
+
+FrameScriptはテキストベースの動画編集ソフトなので、LLMベースのコーディングエージェントとの相性が抜群に良いです。
+ここではコーディングエージェントを用いて実際に動画を作成する手順を紹介します。
+
+## 1. コーディングエージェントを用意する
+
+まずはコーディングエージェントを用意してください。
+コーディングエージェントは [`Codex CLI`](https://developers.openai.com/codex/cli/), [`Claude Code`](https://code.claude.com/docs/ja/overview), [`Gemini CLI`](https://geminicli.com/) 等があります。
+個人的には`Codex CLI`を推奨します。
+
+## 2. プロジェクトを作成する
+
+任意のディレクトリで以下のコマンドを実行します。
+
+```bash
+npm init @frame-script/latest
+```
+
+このコマンドを実行すると対話形式でプロジェクトを作成できます。
+
+作成されたディレクトリに移動して、
+
+```bash
+cd <project-path>
+```
+
+以下を実行します。
+
+```bash
+npm run start
+```
+
+## 3. エディタを起動する
+作成したディレクトリでお好きなエディタを立ち上げてください。
+
+## 4. コーディングエージェントを呼び出す
+新しくターミナルを起動し、作成したディレクトリでコーディングエージェントを起動します。
+
+## 5. 実際に指示をする
+ここが最も重要です。
+FrameScriptは動画編集ソフト自体がプロジェクトのディレクトリにバンドルされている、少し特殊な構成です。
+それをAIに使える必要があります。
+そこで以下のような指示を出すことをオススメします。
+
+> まずはAGENTS.mdを読んでプロジェクトの概観を把握してください。
+
+そして次に
+
+> ここでは動画を作成したいです。
+> まずは〜〜〜してください
+
+のように具体的な指示をします。
+
+## AIとの共存がうまく行くシーン
+AIに指示してうまく動作するのは、画像やテキストにモーションをつけたりするシーンが多いです。
+しかし、動画をカットしたり画像の位置を細かく指定するのはやや難があります。
+これはLLMが実際の動画プレビューを見られないためです。
+画像やテキストの細かな位置調整は変数に出してもらって自分で編集するのが良く、動画のカット編集は自分で大まかにやってしまったほうが良いです。
+
+## ギャラリー
+この動画は縁取り付きのテキスト、立ち絵画像の配置、集中線の描画はAIに指示してやってもらいました。
+![](./with-ai-0.png)