Opendraft について
OpendraftのREADMEは、製品説明ではなく一般的なLovableプロジェクトのテンプレートです。ウェブ技術スタックと編集・公開方法を示していますが、Opendraftの目的や機能は記載されていません。
主な機能
- 01Lovableで編集
- 02IDEを使ったローカル開発
- 03GitHubでファイルを編集
- 04GitHub Codespacesの利用
- 05Lovableから公開
活用シーン
- 01Lovableでプロジェクトを変更
- 02Node.jsとnpmでローカル開発
- 03GitHubでリポジトリのファイルを編集
- 04Lovableプロジェクトを公開
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://api.opendraft.co/mcpclaude mcp add --transport http opendraft https://api.opendraft.co/mcp{"mcpServers":{"opendraft":{"type":"http","url":"https://api.opendraft.co/mcp"}}}Cursor で開く{"servers":{"opendraft":{"type":"http","url":"https://api.opendraft.co/mcp"}}}VS Code で開く{"mcpServers":{"opendraft":{"type":"http","url":"https://api.opendraft.co/mcp"}}}{"mcpServers":{"opendraft":{"serverUrl":"https://api.opendraft.co/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
詳細
Lovable プロジェクトへようこそ
プロジェクト情報
URL: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
このコードを編集するには?
アプリケーションを編集する方法はいくつかあります。
Lovable を使用する
Lovable プロジェクトにアクセスして、プロンプトを入力するだけです。
Lovable で行った変更は、このリポジトリに自動的にコミットされます。
お好みの IDE を使用する
お使いの IDE でローカル作業を行う場合は、このリポジトリをクローンして変更をプッシュできます。プッシュした変更は Lovable にも反映されます。
必要なのは、Node.js と npm がインストールされていることだけです。nvm でインストール
次の手順に従ってください。
# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>
# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>
# Step 3: Install the necessary dependencies.
npm i
# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev
GitHub でファイルを直接編集する
- 編集するファイルに移動します。
- ファイルの表示画面の右上にある「Edit」ボタン(鉛筆アイコン)をクリックします。
- 変更を加えてコミットします。
GitHub Codespaces を使用する
- リポジトリのメインページに移動します。
- 右上付近にある「Code」ボタン(緑色のボタン)をクリックします。
- 「Codespaces」タブを選択します。
- 「New codespace」をクリックして、新しい Codespace 環境を起動します。
- Codespace 内でファイルを直接編集し、完了したら変更をコミットしてプッシュします。
このプロジェクトではどのようなテクノロジーが使われていますか?
このプロジェクトは、以下を使用して構築されています。
- Vite
- TypeScript
- React
- shadcn-ui
- Tailwind CSS
このプロジェクトをデプロイするには?
Lovableを開き、「Share」→「Publish」をクリックするだけです。
Lovable プロジェクトにカスタムドメインを接続できますか?
はい、できます!
ドメインを接続するには、「Project」>「Settings」>「Domains」に移動し、「Connect Domain」をクリックします。
詳しくはこちらをご覧ください:カスタムドメインの設定
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。