mcpField
O
Opendraft

Opendraft

リモート
github.com/kllyjsnAI・エージェント029 週間前に更新
リポジトリ

Opendraft について

OpendraftのREADMEは、製品説明ではなく一般的なLovableプロジェクトのテンプレートです。ウェブ技術スタックと編集・公開方法を示していますが、Opendraftの目的や機能は記載されていません。

主な機能

  1. 01Lovableで編集
  2. 02IDEを使ったローカル開発
  3. 03GitHubでファイルを編集
  4. 04GitHub Codespacesの利用
  5. 05Lovableから公開

活用シーン

  1. 01Lovableでプロジェクトを変更
  2. 02Node.jsとnpmでローカル開発
  3. 03GitHubでリポジトリのファイルを編集
  4. 04Lovableプロジェクトを公開

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttps://api.opendraft.co/mcp
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、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」をクリックします。

詳しくはこちらをご覧ください:カスタムドメインの設定

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。