生成 AI を使用した JIRA ユーザーストーリーの実装

1. 概要

このラボでは、生成 AI を使用して JIRA のユースケースの実装を自動化するソリューションを構築します。

5351e028356cd3ac.png

学習内容

このラボは主に次の部分で構成されています。

  • Cloud Run アプリケーションをデプロイして Gemini API と統合する
  • JIRA 用 Atlassian Forge アプリを作成してデプロイする
  • GitLab タスクの自動化のための LangChain ReAct エージェント

前提条件

  • このラボは、Cloud コンソールと Cloud Shell 環境に精通していることを前提としています。

2. 設定と要件

Cloud プロジェクトの設定

  1. Google Cloud Console にログインして、プロジェクトを新規作成するか、既存のプロジェクトを再利用します。Gmail アカウントも Google Workspace アカウントもまだお持ちでない場合は、アカウントを作成してください。

fbef9caa1602edd0.png

a99b7ace416376c4.png

5e3ff691252acf41.png

  • プロジェクト名は、このプロジェクトの参加者に表示される名称です。Google API では使用されない文字列です。いつでも更新できます。
  • プロジェクト ID は、すべての Google Cloud プロジェクトにおいて一意でなければならず、不変です(設定後は変更できません)。Cloud コンソールでは一意の文字列が自動生成されます。通常は、この内容を意識する必要はありません。ほとんどの Codelab では、プロジェクト ID(通常は PROJECT_ID と識別されます)を参照する必要があります。生成された ID が好みではない場合は、ランダムに別の ID を生成できます。または、ご自身で試して、利用可能かどうかを確認することもできます。このステップ以降は変更できず、プロジェクトを通して同じ ID になります。
  • なお、3 つ目の値として、一部の API が使用するプロジェクト番号があります。これら 3 つの値について詳しくは、こちらのドキュメントをご覧ください。
  1. 次に、Cloud のリソースや API を使用するために、Cloud コンソールで課金を有効にする必要があります。この Codelab の操作をすべて行って、費用が生じたとしても、少額です。このチュートリアルの終了後に請求が発生しないようにリソースをシャットダウンするには、作成したリソースを削除するか、プロジェクトを削除します。Google Cloud の新規ユーザーは、300 米ドル分の無料トライアル プログラムをご利用いただけます。

環境のセットアップ

Gemini チャットを開きます。

bc3c899ac8bcf488.png

または、検索バーに「Gemini に質問」と入力します。

e1e9ad314691368a.png

Cloud AI Companion API を有効にします。

66cb6e561e384bbf.png

[Start chatting] をクリックして、サンプルの質問のいずれかを使用するか、独自のプロンプトを入力して試します。

5482c153eef23126.png

プロンプトの例:

  • Cloud Run の 5 つの主なポイントについて説明します。
  • Google Cloud Run プロダクト マネージャーとして、Cloud Run を 5 つの重要なポイントにまとめ、学生に説明します。
  • Google Cloud Run プロダクト マネージャーとして、認定 Kubernetes デベロッパーに Cloud Run を 5 つの重要なポイントで説明します。
  • Google Cloud Run プロダクト マネージャーとして、Cloud Run と GKE のどちらを使用するかを、シニア デベロッパーに 5 つの重要なポイントで説明します。

より良いプロンプトの作成方法については、プロンプト ガイドをご覧ください。

Gemini for Google Cloud がデータを使用する方法

Google のプライバシーに関する取り組み

Google は、AI/ML プライバシー コミットメントを業界で最初に発表した企業の 1 つです。これは、お客様がクラウドに保存されている自社のデータについて最高レベルのセキュリティとコントロールを得るべきだという、Google の信念を概説したものです。

送信および受信するデータ

Gemini に尋ねる質問(Gemini に送信して分析または完成される入力情報やコードなど)は、プロンプトと呼ばれます。Gemini から受け取る回答やコード補完は、レスポンスと呼ばれます。Gemini がプロンプトやそのレスポンスをデータとして使用してモデルをトレーニングすることはありせん

プロンプトの暗号化

Gemini にプロンプトを送信すると、Gemini の基盤モデルへの入力としてデータが転送中に暗号化されます。

Gemini によって生成されたプログラム データ

Gemini は、ファーストパーティの Google Cloud コードと、選択したサードパーティ コードでトレーニングされます。コードのセキュリティ、テスト、有効性(Gemini によるコード補完、生成、分析など)については、ユーザーが責任を負います

Google がメッセージを取り扱う方法について詳しくは、こちらをご覧ください。

3. プロンプトをテストするオプション

プロンプトをテストする方法はいくつかあります。

Vertex AI Studio は Google Cloud の Vertex AI プラットフォームの一部であり、生成 AI モデルの開発と使用を簡素化、高速化するために特別に設計されています。

Google AI Studio は、プロンプト エンジニアリングと Gemini API のプロトタイピングとテストを行うためのウェブベースのツールです。

Google Gemini ウェブアプリ(gemini.google.com)は、Google の Gemini AI モデルの機能を探索して活用できるように設計されたウェブベースのツールです。

4. (省略可のセクション)サービス アカウントを作成する

これらの手順はラボのセットアップ時に実行されているため、実行する必要はありません。

これらの手順は、サービス アカウントと IAM ロールを設定する方法を示しています。

Google Cloud コンソールに移動し、検索バーの右側にあるアイコンをクリックして Cloud Shell を有効にします。

3e0c761ca41f315e.png

開いたターミナルで、次のコマンドを実行して新しいサービス アカウントとキーを作成します。

このサービス アカウントを使用して、Cloud Run アプリケーションから Vertex AI Gemini API への API 呼び出しを行います。

Qwiklabs のプロジェクトの詳細を使用して、プロジェクトの詳細を構成します。

例: qwiklabs-gcp-00-2c10937585bb

gcloud config set project YOUR_QWIKLABS_PROJECT_ID

サービス アカウントを作成し、ロールを付与します。

PROJECT_ID=$(gcloud config get-value project)
SERVICE_ACCOUNT_NAME='vertex-client'
DISPLAY_NAME='Vertex Client'
KEY_FILE_NAME='vertex-client-key'

gcloud iam service-accounts create $SERVICE_ACCOUNT_NAME --project $PROJECT_ID --display-name "$DISPLAY_NAME"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/aiplatform.admin"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/aiplatform.user"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/cloudbuild.builds.editor"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/artifactregistry.admin"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/storage.admin"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/run.admin"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/secretmanager.secretAccessor"


gcloud iam service-accounts keys create $KEY_FILE_NAME.json --iam-account=$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com

承認を求められたら、[承認] をクリックして続行します。

6356559df3eccdda.png

Vertex AI API と Gemini チャットを使用するのに必要なサービスを有効にします。

gcloud services enable \
    generativelanguage.googleapis.com \
    aiplatform.googleapis.com \
    cloudaicompanion.googleapis.com \
    run.googleapis.com \
    cloudresourcemanager.googleapis.com
 

Vertex AI API と Gemini チャットを使用するのに必要なサービスを有効にします。

gcloud services enable \
    artifactregistry.googleapis.com \
    cloudbuild.googleapis.com \
    runapps.googleapis.com \
    workstations.googleapis.com \
    servicemanagement.googleapis.com \
    secretmanager.googleapis.com \
    containerscanning.googleapis.com

(省略可能なセクションの終わり)

5. Cloud Workstations へのアクセス権を付与する

Cloud コンソールで Cloud ワークステーションを開きます。

プロビジョニングされた Qwiklabs の学生に Cloud Workstation へのアクセス権を付与します。

このプロジェクト用に作成された Qwiklabs のユーザー名/メールアドレスをコピーし、プリンシパルを追加します。ワークステーションを選択し、[PERMISSIONS] をクリックします。

詳しくは後の説明をご覧ください。

5cbb861e4f272f7.png

[ADD PRINCIPAL] ボタンをクリックします。

Qwiklabs の受講者のメールアドレスを貼り付け、ロールとして [Cloud Workstations User] を選択します。

dfe53b74453d80b1.png

[Start]、[Launch] の順にクリックしてワークステーションを開き、組み込みターミナルを使用して次の手順に進みます。

62dccf5c78880ed9.png

GitHub リポジトリのクローンを作成する

フォルダを作成し、GitHub リポジトリのクローンを作成します。

mkdir github
cd github
git clone https://github.com/GoogleCloudPlatform/genai-for-developers.git

[File / Open Folder] メニュー項目を使用して [github/genai-for-developers] を開きます。

6. Gemini Code Assist を有効にする

[Gemini] アイコンをクリックし、右下の [Login to Google Cloud] をクリックします。

4a7f4640f66037f.png

8d31b61e23ebeea2.png

ターミナルでリンクをクリックして、承認フローを開始します。

d8575b4066f67745.png

[開く] をクリックしてリンク先に移動します。

3a7272fcb985ff5.png

Qwiklabs の受講生アカウントを選択し、次の画面で [ログイン] をクリックします。

79dc63009ce0ed49.png

確認コードをコピーします。

403845a5abc53635.png

ターミナルに戻り、コードを貼り付けます。

5931f639fe69f5cb.png

認証が完了するのを待ってから、[Google プロジェクトを選択] をクリックします。

614beb055f7aa5e8.png

ポップアップ ウィンドウで、Qwiklabs プロジェクトを選択します。

例:

70ae6837db397e2a.png

ファイル「devai-api/app/routes.py」を開き、ファイル内の任意の場所を右クリックして、コンテキスト メニューから [Gemini > Explain this"] を選択します。

32b902134440b7c3.png

選択したファイルに関する Gemini の説明を確認します。

f78bfee770f6be93.png

7. LangChain ツールキット

LangChain ツールキットは、LangChain を使用したアプリケーションの開発を効率化し、強化するために設計された一連のツールです。特定のツールキットによってさまざまな機能が提供されますが、一般的には次の点に役立ちます。

  • 外部データソースへの接続: API、データベース、その他の外部ソースから情報にアクセスし、LangChain アプリケーションに組み込みます。
  • 高度なプロンプト手法: 事前構築されたプロンプトを使用するか、カスタム プロンプトを作成して、言語モデルとのやり取りを最適化します。
  • チェーンの作成と管理: 複雑なチェーンを簡単に構築し、効率的に管理できます。
  • 評価とモニタリング: LangChain アプリケーションとチェーンのパフォーマンスを分析します。

一般的な LangChain ツールキットには次のようなものがあります。

  • エージェント エグゼキュータ ツールキット: ウェブブラウジングやコード実行などのアクションを通じて現実世界とやり取りできるエージェントを開発するためのツール。
  • プロンプト エンジニアリング ツールキット: 効果的なプロンプトを作成するためのリソースのコレクション。

GitLab Toolkit

このラボでは、GitLab の ツールキットを使用して、GitLab のマージ リクエストの作成を自動化します。

Gitlab ツールキットには、LLM エージェントが gitlab リポジトリを操作できるようにするツールが含まれています。このツールは python-gitlab ライブラリのラッパーで、

GitLab ツールキットは次のタスクを実行できます。

  • Create File - リポジトリに新しいファイルを作成します。
  • Read File - リポジトリからファイルを読み取ります。
  • Update File - リポジトリ内のファイルを更新します。
  • Create Pull Request - ボットの作業ブランチからベースブランチへの pull リクエストを作成します。
  • Get Issue - リポジトリから問題を取得します。
  • Get Issue - 特定の問題の詳細を取得します。
  • 問題にコメントする - 特定の問題にコメントを投稿します。
  • ファイルを削除 - リポジトリからファイルを削除します。

8. GitLab リポジトリとツールキットの構成

GitLab を開き、新しい公開プロジェクトを作成し、[Settings / Access Tokens] でプロジェクト アクセス トークンを設定します。

次の情報を使用します。

  • トークン名: devai-api-qwiklabs
  • ロール: Maintainer
  • スコープを選択: api

112008c7894c3a19.png

アクセス トークンの値をコピーして、ラップトップの一時ファイルに貼り付けます。この値は次の手順で使用します。

9. Cloud Run にアプリケーションをデプロイする準備を行う

Cloud Workstations インスタンスに戻り、既存のターミナルを使用するか、新しいターミナルを開きます。

9f9682d2b7317e66.png

ウェブベースの認可フロー経由で、ユーザー アカウントのアクセス認証情報を取得します。

リンクをクリックし、手順に沿って確認コードを生成します。

gcloud auth login

Qwiklabs のプロジェクトの詳細を使用して、プロジェクトの詳細を構成します。

例: qwiklabs-gcp-00-2c10937585bb

gcloud config set project YOUR-QWIKLABS-PROJECT-ID

残りの環境変数を設定します。

export PROJECT_ID=$(gcloud config get-value project)
export LOCATION=us-central1
export REPO_NAME=devai-api
export SERVICE_NAME=devai-api

GitLab の統合に必要な環境変数を設定します。

export GITLAB_PERSONAL_ACCESS_TOKEN=gitlab-token

機密情報をターミナルに公開しないようにするには、read -s を使用することをおすすめします。これは、コンソールのコマンド履歴に値が表示されることなく環境変数を設定できる安全な方法です。実行したら、値を貼り付けて Enter キーを押す必要があります。

このコマンドでは、GitLab のユーザー ID とリポジトリ名を更新する必要があります。

例: export GITLAB_REPOSITORY="gitrey/qwiklabs-test"

119489def27115c8.png

export GITLAB_REPOSITORY="USERID/REPOSITORY"

残りの環境変数を設定します。

export GITLAB_URL="https://gitlab.com"
export GITLAB_BRANCH="devai"
export GITLAB_BASE_BRANCH="main"

10. LangSmith LLM トレース構成

LangSmith アカウントを作成し、[設定] セクションで Service API キーを生成します。https://docs.smith.langchain.com/

LangSmith の統合に必要な環境変数を設定します。

export LANGCHAIN_TRACING_V2=true
export LANGCHAIN_ENDPOINT="https://api.smith.langchain.com"

export LANGCHAIN_API_KEY=langchain-service-api-key

11. JIRA の構成

これらの値はラボでは使用されないため、コマンドを実行する前に、特定の JIRA プロジェクトの値に更新する必要はありません。

Cloud Run サービスのデプロイに必要な環境変数を設定します。

export JIRA_API_TOKEN=jira-token
export JIRA_USERNAME="YOUR-EMAIL"
export JIRA_INSTANCE_URL="https://YOUR-JIRA-PROJECT.atlassian.net"
export JIRA_PROJECT_KEY="YOUR-JIRA-PROJECT-KEY"
export JIRA_CLOUD=true

12. Devai-API を Cloud Run にデプロイする

正しいフォルダにいることを確認します。

cd ~/github/genai-for-developers/devai-api

このラボでは、ベスト プラクティスに沿って Secret Manager を使用して、アクセス トークンと LangChain API キーの値を Cloud Run に保存して参照します。

JIRA アクセス トークンを Secret Manager に保存します。

echo -n $JIRA_API_TOKEN | \
 gcloud secrets create JIRA_API_TOKEN \
 --data-file=-

GitLab アクセス トークンを Secret Manager に保存します。

echo -n $GITLAB_PERSONAL_ACCESS_TOKEN | \
 gcloud secrets create GITLAB_PERSONAL_ACCESS_TOKEN \
 --data-file=-

LangChain API キーを Secret Manager に保存します。

echo -n $LANGCHAIN_API_KEY | \
 gcloud secrets create LANGCHAIN_API_KEY \
 --data-file=-

アプリケーションを Cloud Run にデプロイします。

gcloud run deploy "$SERVICE_NAME" \
  --source=. \
  --region="$LOCATION" \
  --allow-unauthenticated \
  --service-account vertex-client \
  --set-env-vars PROJECT_ID="$PROJECT_ID" \
  --set-env-vars LOCATION="$LOCATION" \
  --set-env-vars GITLAB_URL="$GITLAB_URL" \
  --set-env-vars GITLAB_REPOSITORY="$GITLAB_REPOSITORY" \
  --set-env-vars GITLAB_BRANCH="$GITLAB_BRANCH" \
  --set-env-vars GITLAB_BASE_BRANCH="$GITLAB_BASE_BRANCH" \
  --set-env-vars JIRA_USERNAME="$JIRA_USERNAME" \
  --set-env-vars JIRA_INSTANCE_URL="$JIRA_INSTANCE_URL" \
  --set-env-vars JIRA_PROJECT_KEY="$JIRA_PROJECT_KEY" \
  --set-env-vars JIRA_CLOUD="$JIRA_CLOUD" \
  --set-env-vars LANGCHAIN_TRACING_V2="$LANGCHAIN_TRACING_V2" \
  --update-secrets="LANGCHAIN_API_KEY=LANGCHAIN_API_KEY:latest" \
  --update-secrets="GITLAB_PERSONAL_ACCESS_TOKEN=GITLAB_PERSONAL_ACCESS_TOKEN:latest" \
  --update-secrets="JIRA_API_TOKEN=JIRA_API_TOKEN:latest" \
  --min-instances=1 \
  --max-instances=3

Y と回答して、Artifact Registry Docker リポジトリを作成します。

Deploying from source requires an Artifact Registry Docker repository to store built containers. A repository named [cloud-run-source-deploy] in 
region [us-central1] will be created.

Do you want to continue (Y/n)?  y

以下の gcloud run deploy SERVICE_NAME --source=. フローをご確認ください。詳細

5c122a89dd11822e.png

このコマンドはバックグラウンドで Google Cloud の buildpacksCloud Build を使用して、Docker マシンへのインストール、Buildpack や Cloud Build の設定を行わずに、ソースコードからコンテナ イメージを自動的にビルドします。つまり、上記のコマンドで必要とするのは gcloud builds submit コマンドと gcloud run deploy コマンドだけです。

Dockerfile を指定した場合(このリポジトリでは指定しています)、Cloud Build はそれをコンテナ イメージのビルドに使用します。Buildpack に依存してコンテナ イメージを自動的に検出してビルドすることはありません。Buildpack の詳細については、ドキュメントをご覧ください。

コンソールで Cloud Build のログを確認します。

Artifact Registry で作成された Docker イメージを確認します。

cloud-run-source-deploy/devai-api を開き、自動的に検出された脆弱性を確認します。修正が可能な問題を確認し、説明に基づいて修正方法を確認します。

d00c9434b511be44.png

Cloud コンソールで Cloud Run インスタンスの詳細を確認します。

curl コマンドを実行してエンドポイントをテストします。

curl -X POST \
   -H "Content-Type: application/json" \
   -d '{"prompt": "Create HTML, CSS and JavaScript using React.js framework to implement Login page with username and password fields, validation and documentation. Provide complete implementation, do not omit anything."}' \
   $(gcloud run services list --filter="(devai-api)" --format="value(URL)")/generate

(省略可のセクション)Cloud Workstation を設定する

Cloud Workstations は、セキュリティ機能が組み込まれ、事前構成済みでカスタマイズ可能な開発環境がある Google Cloud 上でマネージド開発環境を提供します。デベロッパーにソフトウェアのインストールとセットアップ スクリプトの実行を要求する代わりに、再現可能な方法で環境を指定するワークステーション構成を作成できます。ワークステーション構成の更新は、ワークステーションが次回起動したときに自動的に適用されます。デベロッパーは、ブラウザベースの IDE、複数のローカルコード エディタ(VSCode など、または IntelliJ IDEA Ultimate や PyCharm Professional などの JetBrains IDE)から、または SSH を介してワークステーションにアクセスします。

Cloud Workstations は、次の Google Cloud リソースを使用して開発環境を管理します。

  • ワークステーション クラスタは、特定のリージョンにあるワークステーションのグループと、ワークステーションがアタッチされている VPC ネットワークを定義します。ワークステーション クラスタは Google Kubernetes Engine(GKE)クラスタとは関連していません。
  • ワークステーション構成は、ワークステーションのテンプレートとして機能します。ワークステーション構成では、ワークステーション仮想マシン(VM)インスタンス タイプ、永続ストレージ、コンテナ イメージ定義環境、使用する IDE またはコードエディタなどの詳細を定義します。管理者とプラットフォーム チームは、Identity and Access Management(IAM)ルールを使用して、チームまたは個々のデベロッパーにアクセス権を付与することもできます。
  • ワークステーションは、クラウド IDE、言語ツール、ライブラリなどを提供する事前構成された開発環境です。ワークステーションは、セッション間でデータを保存するためにアタッチされた永続ディスクを使用して、オンデマンドで起動または停止でき、プロジェクトの Compute Engine VM 上で実行できます。

管理者とプラットフォーム チームは、開発チームと共有するワークステーション構成を作成します。各デベロッパーは、ワークステーション構成に基づいてワークステーションを作成します。

810ae08acb671f4c.png

このラボではブラウザベースの IDE を使用しますが、Cloud Workstations は他の一般的な開発インターフェースもサポートしています。

  • JetBrains Gateway を介して、独自のローカル JetBrains IDE を使用できます。
  • ローカル VSCode を使用している場合は、SSH を介してワークステーションにアクセスしてリモート開発を行うこともできます。
  • ローカルマシンからワークステーションへの SSH トンネルや TCP トンネルを設定することもできます。

fc95816682f1e3b0.png

(省略可のセクション)ワークステーション クラスタを作成する

これらの手順はラボのセットアップ時に実行されているため、実行する必要はありません。

これらの手順は、Cloud Workstations クラスタ、構成、ワークステーションを設定する方法を示しています。

このセクションを確認して、Forge プラットフォームのセクションに進みます。

ワークステーション クラスタを作成します。

gcloud workstations clusters create ws-cluster --region=us-central1

ワークステーション構成を作成する

gcloud workstations configs create devai-config \
--cluster=ws-cluster \
--machine-type=e2-standard-8 \
--region=us-central1 \
--running-timeout=21600 \
--idle-timeout=1800 \
--container-predefined-image=codeoss \
--pd-disk-size=200 \
--pd-disk-type=pd-standard \
--service-account=$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com \
--pool-size=1

ワークステーションを作成する

gcloud workstations create devai-workstation \
--cluster=ws-cluster \
--config=devai-config \
--region=us-central1

使用可能なワークステーションは Cloud コンソールで確認できます。「devai-workstation」を起動します。

e44784811890cfc8.png

右下の [Gemini] を有効にして、新しいブラウザタブでログインフローに沿って操作し、生成されたコードをコンソールにコピーしてログインを完了します。

左側のパネルで「Gemini」チャットを開き、Gemini に次のように尋ねます。

You are a Cloud Workstations Product Manager, tell me about Cloud Workstations」のカスタム列が必要です。

You are Cloud Workstations Product Manager, Can I create my custom Cloud Workstations image with my company tools so new developers can onboard in minutes?」のカスタム列が必要です。

8c3af1ad4e612f15.png

(省略可能なセクションの終わり)

13. Forge プラットフォーム

Forge は、Jira、Confluence、Compass、Bitbucket などの Atlassian プロダクトと統合するアプリを開発できるプラットフォームです。

eda6f59ff15df25e.png

Forge CLI をインストールする

ターミナルで次のコマンドを実行します。

Node Version Manager(nvm)をダウンロードし、現在のターミナル セッションのパスで使用できるようにします。

cd ~/github/genai-for-developers

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash


export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

nvm をインストールします。

ターミナルで次のコマンドを実行して、最新の Node.js LTS リリースを選択します。

nvm install --lts
nvm use --lts

次のコマンドを実行して、Forge CLI をグローバルにインストールします。

npm install -g @forge/cli

このラボでは、環境変数を使用してログインします。

e4e4e59cf8622e3f.png

JIRA プロジェクトを設定する

個人アカウントを使用して JIRA プロジェクトを作成または表示する。

既存の JIRA プロジェクトを確認します。https://admin.atlassian.com/

個人アカウントを使用して新しい JIRA プロジェクトを作成します。

https://team.atlassian.com/your-work にアクセスし、[8654143154cb8665.png] をクリックして [47b253090a08932.png] を選択します。次に、[JIRA Software] - [今すぐ試す] を選択します。画面の指示に沿ってプロジェクト/サイトの作成を完了します。

5bab2a96e3b81383.png

[JIRA Software] を選択します。

785bc4d8bf920403.png

新しいプロジェクトを作成する。

8a6e7cdc8224ffa0.png

14. Atlassian API トークン

既存の Atlassian API トークンを作成するか、既存のトークンを使用して CLI にログインします。

CLI は、コマンドを実行するときにトークンを使用します。

  1. https://id.atlassian.com/manage/api-tokens にアクセスします。
  2. [Create API token] をクリックします。
  3. API トークンを表すラベルを入力します。たとえば、forge-api-token です。
  4. [作成] をクリックします。
  5. [クリップボードにコピー] をクリックしてダイアログを閉じます。

Cloud Workstations ターミナルで次のコマンドを実行します。

Forge CLI にログインして、Forge コマンドの使用を開始します。

JIRA/FORGE のメールアドレスを設定します。メールアドレスに置き換えます。

export FORGE_EMAIL=your-email

Forge API トークンを設定します。JIRA API トークンに置き換えます。

export FORGE_API_TOKEN=your-jira-api-token

次のコマンドを実行して、forge cli をテストします。アナリティクスの収集を求められたら、「No」と回答します。

forge settings set usage-analytics false

ログイン済みかどうかを確認します。

forge whoami

出力例。

Logged in as John Green (johngreen@email.com)
Account ID: 123090:aaabbcc-076a-455c-99d0-d1aavvccdd

Forge アプリケーションを作成する

~/github/genai-for-developers」フォルダ内にいることを確認します。

コマンドを実行して Forge アプリケーションを作成します。

forge create

プロンプトが表示されたら、次の値を使用します。

  • アプリ名: devai-jira-ui-qwiklabs
  • カテゴリを選択する: UI Kit
  • プロダクトを選択します。Jira
  • テンプレートを選択します。jira-issue-panel

bc94e2da059f15cf.png

アプリケーション フォルダに移動します。

cd devai-jira-ui-qwiklabs/

デプロイ コマンドを実行します。

forge deploy

出力例:

Deploying your app to the development environment.
Press Ctrl+C to cancel.

Running forge lint...
No issues found.

✔ Deploying devai-jira-ui-qwiklabs to development...

ℹ Packaging app files
ℹ Uploading app
ℹ Validating manifest
ℹ Snapshotting functions
ℹ Deploying to environment

✔ Deployed

Deployed devai-jira-ui-qwiklabs to the development environment.

アプリをインストールします。

forge install

プロンプトが表示されたら、次の値を使用します。

  • プロダクトを選択します。Jira
  • サイトの URL を入力します。your-domain.atlassian.net

出力例:

Select the product your app uses.

? Select a product: Jira

Enter your site. For example, your-domain.atlassian.net

? Enter the site URL: genai-for-developers.atlassian.net

Installing your app onto an Atlassian site.
Press Ctrl+C to cancel.

? Do you want to continue? Yes

✔ Install complete!

Your app in the development environment is now installed in Jira on genai-for-developers.atlassian.net

JIRA サイトを開き、次の説明を使用して新しい JIRA タスクを作成します。

Create HTML, CSS and JavaScript using React.js framework to implement Login page with username and password fields, validation and documentation. Provide complete implementation, do not omit anything.

タスクを開くと、[devai-jira-ui-qwiklabs] ボタンが表示されます。

ボタンをクリックして、UI で変更内容を確認します。

88f6dd543827543.png

Forge バックエンド ログを表示する。

forge logs

Atlassian Developer Console

デプロイされたアプリは Atlassian Developer Console で表示、管理することもできます。

6a0e6ea177054fe6.png

ログを確認します。Development 環境に切り替えます。

56a7f74de6d2a01d.png

Forge アプリケーションのマニフェストとソースコードを確認する

devai-jira-ui-qwiklabs/manifest.yml」ファイルを開き、Gemini Code Assist を使用して説明します。

4a4377922ab9a927.png

説明を確認します。

5dd53138212dc686.png

次のファイルを開き、Gemini Code Assist に説明を依頼します。

  • devai-jira-ui-qwiklabs/src/frontend/index.jsx
  • devai-jira-ui-qwiklabs/src/resolvers/index.js

c99f48a5bf624501.png

DevAI API Cloud Run エンドポイントを使用して Forge アプリを更新する

GCP プロジェクト ID が設定されているかどうかを確認します。

gcloud config get project

設定されていない場合は、Qwiklabs ラボのページのプロジェクト ID を使用して GCP プロジェクトを設定します。

例: qwiklabs-gcp-00-2c10937585bb

gcloud config set project YOUR_QWIKLABS_PROJECT_ID

Cloud Run サービスの URL を設定します。

export DEVAI_API_URL=$(gcloud run services list --filter="(devai-api)" --format="value(URL)")

forge variables set DEVAI_API_URL $DEVAI_API_URL

次のコマンドを実行して確認します。

forge variables list

出力例

fb337c19c9009ac5.png

Forge アプリケーション マニフェストとコードを更新する

これらのコード スニペットは、リポジトリの sample-devai-jira-ui フォルダにあります。

エディタでマニフェスト ファイルを開きます。devai-jira-ui-qwiklabs/manifest.yml

ファイルの末尾に次の行を追加します。Cloud Run エンドポイントは、デプロイしたエンドポイントに置き換えます。

permissions:
  scopes:
    - read:jira-work
    - write:jira-work
  external:
    fetch:
      client:
        - devai-api-gjerpi6qqq-uc.a.run.app/generate # replace with YOUR CLOUD RUN URL

エディタで resolvers/index ファイルを開きます。devai-jira-ui-qwiklabs/src/resolvers/index.js

既存の getText 関数の下に行を追加します。

resolver.define('getApiKey', (req) => {
  return process.env.LLM_API_KEY;
});

resolver.define('getDevAIApiUrl', (req) => {
  return process.env.DEVAI_API_URL;
});

エディタで frontend/index ファイルを開きます。devai-jira-ui-qwiklabs/src/frontend/index.jsx

index.jsx は以下の内容に置き換えます。GitLab のユーザー ID/リポジトリへのリンクを更新します。

YOUR-GIT-USERID と YOUR-GIT-REPO を更新する必要がある場所は 2 か所あります。

ファイル内で次の行を検索して変更します。

https://gitlab.com/YOUR-GIT-USERID/YOUR-GIT-REPO/-/merge_requests

import React from 'react';
import ForgeReconciler, { Text, Link, useProductContext } from '@forge/react';
import { requestJira } from '@forge/bridge';
import { invoke } from '@forge/bridge';
import api, { route, assumeTrustedRoute } from '@forge/api';

// const apiKey = await invoke("getApiKey")
const devAIApiUrl = await invoke("getDevAIApiUrl")


const App = () => {
  const context = useProductContext();

  const [description, setDescription] = React.useState();

  const fetchDescriptionForIssue = async () => {
    const issueId = context?.extension.issue.id;
  
    const res = await requestJira(`/rest/api/2/issue/${issueId}`);
    const data = await res.json();
    
    // const genAI = new GoogleGenerativeAI(apiKey);
    // const model = genAI.getGenerativeModel({ model: "gemini-pro"});
    // const prompt = `You are principal software engineer at Google and given requirements below to implement.\nPlease provide implementation details and documentation.\n\nREQUIREMENTS:\n\n${data.fields.description}`
    // const result = await model.generateContent(prompt);
    // const text = result.response.text();
    // const jsonText = JSON.stringify(text);

    const bodyGenerateData = `{"prompt": ${JSON.stringify(data.fields.description)}}`;

    const generateRes = await api.fetch(devAIApiUrl+'/generate',
      {
        body: bodyGenerateData,
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
      }
    )


    const resData = await generateRes.text();
    const jsonText = JSON.stringify(resData);

    const bodyData = `{
      "body": ${jsonText}
    }`;

    console.log("bodyData", bodyData)
    // Add Gemini response as a comment on the JIRA issue
    await requestJira(`/rest/api/2/issue/${issueId}/comment`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: bodyData
    });
    // Add link to the GitLab merge request page as a comment
    await requestJira(`/rest/api/2/issue/${issueId}/comment`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: `{"body": "[GitLab Merge Request|https://gitlab.com/YOUR-GIT-USERID/YOUR-GIT-REPO/-/merge_requests]"}`
    });


    return "Response will be added as a comment. Please refresh in a few moments.";
  };

  React.useEffect(() => {
    if (context) {
      fetchDescriptionForIssue().then(setDescription);
    }
  }, [context]);

  return (
    <>
      <Text>{description}</Text>
      <Link href='https://gitlab.com/YOUR-GIT-USERID/YOUR-GIT-REPO/-/merge_requests' openNewTab={true}>GitLab Merge Request</Link>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Forge アプリケーションを再デプロイする

package.json ファイルに依存関係を追加します。

"@forge/api": "4.0.0",

依存関係をインストールします。

npm install

更新したアプリケーションをデプロイします。

forge deploy

出力例:

ℹ Uploading app
ℹ Validating manifest
ℹ Snapshotting functions
ℹ Deploying to environment

✔ Deployed

Deployed devai-jira-ui-qwiklabs to the development environment.

We've detected new scopes or egress URLs in your app.
Run forge install --upgrade and restart your tunnel to put them into effect.

更新されたアプリをインストールします。

forge install --upgrade

ef17c7da9b2962d8.png

出力例:

Upgrading your app on the Atlassian site.

Your app will be upgraded with the following additional scopes:
- read:jira-work
- write:jira-work

Your app will exchange data with the following urls:
- devai-api-7su2ctuqpq-uc.a.run.app

? Do you want to continue? Yes

✔ Upgrade complete!

Your app in the development environment is now the latest in Jira on genai-for-developers.atlassian.net.

Forge アプリケーションをテストする

JIRA プロジェクトで既存の JIRA タスクを開くか、新しい JIRA タスクを作成します。

以前に追加したパネルがある場合は、そのパネルを削除する必要があります。

[...] をクリックし、メニューから削除を選択します。その後、もう一度ボタンをクリックできます。

1adca6205af0f0c6.png

Jira のコメントを確認する

DEVAI API からレスポンスが返されると、JIRA の問題に 2 つのコメントが追加されます。

  • GitLab マージ リクエスト
  • Gemini ユーザー ストーリーの実装の詳細

[History] タブと [Comments] タブを切り替えてビューを更新します。

e3f38114330d504f.png

GitLab マージ リクエストの作成を有効にする

devai-api/app/routes.py ファイルを開き、generate_handler メソッドの次の行のコメントを解除します。

print(f"{response.text}\n")

    # resp_text = response.candidates[0].content.parts[0].text

    # pr_prompt = f"""Create GitLab merge request using provided details below.
    # Create new files, commit them and push them to opened merge request.
    # When creating new files, remove the lines that start with ``` before saving the files.

    # DETAILS: 
    # {resp_text}
    # """

    # print(pr_prompt)
    # agent.invoke(pr_prompt)

Cloud Run アプリケーションを再デプロイする

正しいフォルダにいることを確認します。

cd ~/github/genai-for-developers/devai-api

同じターミナル セッションを使用している場合は、すべての環境変数が設定されている可能性があります。

ターミナルで「echo $GITLAB_REPOSITORY」を実行して確認します。

新しいターミナル セッションを開いた場合は、次の手順で設定をリセットします。

アプリケーションを再デプロイする前に、必要な環境変数をリセットしてください。

このコマンドでは、GitLab のユーザー ID とリポジトリ名を更新する必要があります。

export GITLAB_REPOSITORY="USERID/REPOSITORY"

残りの環境変数を設定します。

export GITLAB_URL="https://gitlab.com"
export GITLAB_BRANCH="devai"
export GITLAB_BASE_BRANCH="main"

export LANGCHAIN_TRACING_V2=true
export LANGCHAIN_ENDPOINT="https://api.smith.langchain.com"

export LOCATION=us-central1
export REPO_NAME=devai-api
export SERVICE_NAME=devai-api
export PROJECT_ID=$(gcloud config get-value project)

export JIRA_USERNAME="YOUR-EMAIL"
export JIRA_INSTANCE_URL="https://YOUR-JIRA-PROJECT.atlassian.net"
export JIRA_PROJECT_KEY="YOUR-JIRA-PROJECT-KEY"
export JIRA_CLOUD=true

GitLab ツールキットは、「devai」ブランチを使用して、マージ リクエストの変更を push します。

そのブランチがすでに作成されていることを確認します。

アプリケーションを Cloud Run にデプロイします。

gcloud run deploy "$SERVICE_NAME" \
  --source=. \
  --region="$LOCATION" \
  --allow-unauthenticated \
  --service-account vertex-client \
  --set-env-vars PROJECT_ID="$PROJECT_ID" \
  --set-env-vars LOCATION="$LOCATION" \
  --set-env-vars GITLAB_URL="$GITLAB_URL" \
  --set-env-vars GITLAB_REPOSITORY="$GITLAB_REPOSITORY" \
  --set-env-vars GITLAB_BRANCH="$GITLAB_BRANCH" \
  --set-env-vars GITLAB_BASE_BRANCH="$GITLAB_BASE_BRANCH" \
  --set-env-vars JIRA_USERNAME="$JIRA_USERNAME" \
  --set-env-vars JIRA_INSTANCE_URL="$JIRA_INSTANCE_URL" \
  --set-env-vars JIRA_PROJECT_KEY="$JIRA_PROJECT_KEY" \
  --set-env-vars JIRA_CLOUD="$JIRA_CLOUD" \
  --set-env-vars LANGCHAIN_TRACING_V2="$LANGCHAIN_TRACING_V2" \
  --update-secrets="LANGCHAIN_API_KEY=LANGCHAIN_API_KEY:latest" \
  --update-secrets="GITLAB_PERSONAL_ACCESS_TOKEN=GITLAB_PERSONAL_ACCESS_TOKEN:latest" \
  --update-secrets="JIRA_API_TOKEN=JIRA_API_TOKEN:latest" \
  --min-instances=1 \
  --max-instances=3

エンドツーエンドの統合を確認する

ボタンをもう一度クリックして JIRA タスクからプロセスを開始し、GitLab リポジトリの [Merge request] セクションと LangSmith で出力を確認します。

GitLab マージ リクエストの詳細。

1cd438a10b4ce2b3.png

db6dc6c9a46e8f7b.png

LangSmith LLM トレース

LangSmith ポータルを開き、JIRA 問題作成呼び出しの LLM トレースを確認します。

LangSmith LLM トレースのサンプル。

1ae0f88ab885f69.png

(省略可のセクション)変更を GitHub リポジトリに push する

GitHub ウェブサイトに移動し、新しいリポジトリを作成して、このラボの変更を個人用リポジトリに push します。

Cloud Workstations インスタンスに戻り、ターミナルで Git ユーザー名とメールアドレスを設定します。

コマンドを実行する前に値を更新します。

git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

SSH 認証鍵を生成して、GitHub リポジトリに追加します。

コマンドを実行する前にメールアドレスを更新してください。

パスフレーズを入力せず、Enter キーを複数回押して鍵の生成を完了します。

ssh-keygen -t ed25519 -C "your-email-address"
eval "$(ssh-agent -s)"

ssh-add ~/.ssh/id_ed25519

cat ~/.ssh/id_ed25519.pub

生成された公開鍵を GitHub アカウントに追加します。

https://github.com/settings/keys を開き、[New SSH key] をクリックします。

鍵名に「qwiklabs-key」を使用し、最後のコマンドの出力をコピーして貼り付けます。

ターミナルに戻り、変更を commit して push します。

cd ~/github/genai-for-developers

git remote rm origin

上記で作成したリポジトリを使用して、リモート オリジンを設定します。

リポジトリの URL に置き換えます。

git remote add origin git@github.com:YOUR-GITHUB-USERID/YOUR-GITHUB-REPO.git

変更を追加、commit、push します。

git add .

git commit -m "lab changes"

git push -u origin main

15. 完了

お疲れさまでした。ラボはこれで完了です。

学習した内容

  • Cloud Run アプリケーションをデプロイして Gemini API と統合する方法。
  • JIRA 用 Atlassian Forge アプリを作成してデプロイする方法。
  • GitLab タスクの自動化に LangChain ReAct エージェントを使用する方法。
  • LangSmith で LLM トレースを確認する方法。

次のステップ:

  • 今後もハンズオン セッションを開催する予定です。

クリーンアップ

このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、リソースを含むプロジェクトを削除するか、プロジェクトを維持して個々のリソースを削除します。

プロジェクトの削除

課金を停止する最も簡単な方法は、チュートリアル用に作成したプロジェクトを削除することです。

©2024 Google LLC All rights reserved. Google および Google のロゴは、Google LLC の商標です。その他すべての社名および製品名は、それぞれ該当する企業の商標である可能性があります。