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

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

この Codelab について

最終更新: 3月 24, 2025

作成者: Andrey Shakirov

1. 概要

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

学習内容

このラボには主に次の部分があります。

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

前提条件

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

2. 設定と要件

Cloud プロジェクトの設定

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

• プロジェクト名は、このプロジェクトの参加者に表示される名称です。Google API では使用されない文字列です。いつでも更新できます。
• プロジェクト ID は、すべての Google Cloud プロジェクトにおいて一意でなければならず、不変です（設定後は変更できません）。Cloud コンソールでは一意の文字列が自動生成されます。通常は、この内容を意識する必要はありません。ほとんどの Codelab では、プロジェクト ID（通常は PROJECT_ID と識別されます）を参照する必要があります。生成された ID が好みではない場合は、ランダムに別の ID を生成できます。または、ご自身で試して、利用可能かどうかを確認することもできます。このステップ以降は変更できず、プロジェクトを通して同じ ID になります。
• なお、3 つ目の値として、一部の API が使用するプロジェクト番号があります。これら 3 つの値について詳しくは、こちらのドキュメントをご覧ください。

注意: プロジェクト ID はグローバルに一意である必要があります。選択されたプロジェクト ID を他のユーザーが使用することはできません。その ID を使用するのはご自身のみです。プロジェクトを削除しても、その ID を再使用することはできません。

注: Gmail アカウントを使用している場合は、デフォルトの場所の設定を「組織なし」のままにしてかまいません。Google Workspace アカウントを使用している場合は、ご自身の組織に応じて場所を選択してください。

2. 次に、Cloud のリソースや API を使用するために、Cloud コンソールで課金を有効にする必要があります。この Codelab の操作をすべて行って、費用が生じたとしても、少額です。このチュートリアルの終了後に請求が発生しないようにリソースをシャットダウンするには、作成したリソースを削除するか、プロジェクトを削除します。Google Cloud の新規ユーザーは、300 米ドル分の無料トライアル プログラムをご利用いただけます。

環境のセットアップ

Gemini チャットを開きます。

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

Gemini for Google Cloud API を有効にします。

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

プロンプトの例:

• Cloud Run の 5 つの主なポイントについて説明します。
• Google Cloud Run プロダクト マネージャーとして、5 つの重要なポイントで Cloud Run を学生に説明します。
• 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

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

• Google AI Studio

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

• Gemini ウェブアプリ（gemini.google.com）

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

• Android 版 Google Gemini モバイルアプリと iOS 版 Google アプリ

4. 申請を確認する

サービス アカウントを作成する

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

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

このサービス アカウントを使用して、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'

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"

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

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

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

GitHub リポジトリのクローンを作成します。

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

Cloud Shell エディタを開く

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

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

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

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

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

LangChain ツールキットの概要

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

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

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

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

GitLab Toolkit の概要

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

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

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

GitLab プロジェクトの設定

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

次の情報を使用します。

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

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

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

Cloud Shell エディタに戻り、既存のターミナルを使用するか、新しいターミナルを開きます。

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 GITLAB_PERSONAL_ACCESS_TOKEN を使用することをおすすめします。これは、コンソールのコマンド履歴に値が表示されることなく環境変数を設定できる安全な方法です。実行したら、値を貼り付けて Enter キーを押す必要があります。環境変数 export GITLAB_PERSONAL_ACCESS_TOKEN もエクスポートする必要があります。

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

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

export GITLAB_REPOSITORY="USERID/REPOSITORY"

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

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

LangSmith LLM トレース構成

LangSmith でエージェント トレース情報を表示する場合はアカウントを設定します。それ以外の場合は、コマンドをそのまま実行します。

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

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

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

export LANGCHAIN_API_KEY=langchain-service-api-key

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

API キーを作成

Cloud コンソールの [API とサービス] / [認証情報] セクションで新しい API キーを作成します。

このキーは、Cloud Run アプリケーションへの JIRA API 呼び出しの認証に使用されます。

本番環境の場合は、作成した API キーにアプリケーションと API の制限を構成します。アプリケーションの制限は、API キーの使用を特定のウェブサイト（JIRA インスタンスなど）に制限します。

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

export DEVAI_API_KEY=your-api-key

Secret Manager でシークレットを作成する

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

必要なシークレットを作成して Secret Manager に保存します。

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

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

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

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

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

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

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

アプリケーションを 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" \
  --update-secrets="DEVAI_API_KEY=DEVAI_API_KEY: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=. フローをご確認ください。詳細

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

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

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

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

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

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

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

コマンドを実行する前に、Cloud Run サービス URL に更新します。

例:

curl -H "X-devai-api-key: $DEVAI_API_KEY" https://devai-api-1110000001.us-central1.run.app/test

8. ストーリーの実装を自動化する

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

Forge CLI をインストールする

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

npm install -g @forge/cli

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

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

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

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

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

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

[JIRA Software] を選択します。

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

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. [クリップボードにコピー] をクリックしてダイアログを閉じます。

Forge 環境の設定を構成する

Cloud コンソールに戻り、ターミナルで次のコマンドを実行します。

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 ([e-mail])
Account ID: 123090:aaabbcc-076a-455c-99d0-d1aavvccdd

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

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

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

forge create

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

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

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

cd devai-jira-ui-qwiklabs/

コマンドを実行して依存関係をインストールします。

npm install

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

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 で変更内容を確認します。

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

forge logs

Atlassian Developer Console

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

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

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

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

説明を確認します。

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

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

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

DEVAI API キーを設定します。

export DEVAI_API_KEY=api-key-that-you-created

forge variables set --encrypt DEVAI_API_KEY $DEVAI_API_KEY

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

forge variables list

出力例

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/create-gitlab-mr # replace with YOUR CLOUD RUN URL

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

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

resolver.define('getApiKey', (req) => {
  return process.env.DEVAI_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 devAIApiKey = 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 bodyGenerateData = `{"prompt": ${JSON.stringify(data.fields.description)}}`;

    const generateRes = await api.fetch(devAIApiUrl+'/create-gitlab-mr,
      {
        body: bodyGenerateData,
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
          'x-devai-api-key': devAIApiKey,
         },
      }
    )

    const resData = await generateRes.text();

    // 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

出力例:

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 タスクを作成します。

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

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

Jira のコメントを確認する

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

• GitLab マージ リクエストのリンク

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

GitLab のマージ リクエストを確認する

GitLab を開き、プロジェクトに新しいマージ リクエストがないかどうかを確認します。

LangSmith LLM トレース

LLM トレースを設定した場合は、LangSmith ポータルを開き、GitLab マージ リクエスト作成呼び出しの LLM トレースを調べます。

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

9. 変更を GitHub リポジトリに push する

（省略可のセクション）

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

Cloud コンソールに戻り、ターミナルで Git ユーザー名とメールを設定します。

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

git config --global user.name "Your Name"
git config --global user.email "[e-mail]"

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 ~/genai-for-developers

git remote rm origin

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

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

git remote add origin [e-mail]:YOUR-GITHUB-USERID/YOUR-GITHUB-REPO.git

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

git add .

git commit -m "lab changes"

git push -u origin main

10. お疲れさまでした

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

学習した内容

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

次のステップ:

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

クリーンアップ

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

プロジェクトの削除

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

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