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

1. 概要

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

学習内容

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

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

前提条件

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

2. 設定と要件

Cloud プロジェクトのセットアップ

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

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

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

環境のセットアップ

Gemini とのチャットを開きます。

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

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

[Start chatting] をクリックし、サンプル質問のいずれかに沿って操作するか、独自のプロンプトを入力して試してみてください。

プロンプトの例:

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 によるコード補完、生成、分析など）。

詳しくは、こちらをご覧ください。

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

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

Vertex AI Studio

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

Google AI Studio

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

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

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

Androidと 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 Issues - リポジトリから問題を取得します。
Get Issue - 特定の問題に関する詳細を取得します。
Comment on Issue - 特定の問題にコメントを投稿します。
Delete File - リポジトリからファイルを削除します。

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 アカウントを作成し、[Settings] セクションで 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 Console の [API とサービス] / [認証情報] セクションで新しい API キーを作成します。

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

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

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

export DEVAI_API_KEY=your-api-key

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

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

必要なシークレットを作成して 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 に依存してコンテナイメージを自動的に検出してビルドするのではなく、Dockerfile を使用してコンテナイメージをビルドします。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] - [Try it now] を選択します。表示される手順に沿ってプロジェクト/サイトの作成を完了します。

[JIRA Software] を選択します。

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

Atlassian API トークンを作成する

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

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

https://id.atlassian.com/manage/api-tokens にアクセスします。
[Create API Token] をクリックします。
API トークンを説明するラベルを入力します。例: forge-api-token。
[作成] をクリックします。
[クリップボードにコピー] をクリックして、ダイアログを閉じます。

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 (johngreen@email.com)
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 Console に戻り、ターミナルで 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 ~/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

10. 完了

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

学習した内容

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

次のステップ:

今後もハンズオンセッションが開催される予定です。

クリーンアップ

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

プロジェクトの削除

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

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

1. 概要

学習内容

前提条件

2. 設定と要件

Cloud プロジェクトのセットアップ

環境のセットアップ

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

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

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

プロンプトの暗号化

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

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

4. 申請の審査

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

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

Cloud Shell エディタを開く

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

LangChain ツールキットの概要

GitLab Toolkit の概要

GitLab プロジェクトの設定

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

LangSmith LLM トレース構成

JIRA の構成

API キーを作成

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

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

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

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

Forge CLI をインストールする

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

Atlassian API トークンを作成する

Forge 環境の設定を構成する

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

Atlassian Developer Console

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

DevAI API Cloud Run エンドポイントで Forge アプリを更新する

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

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

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

Jira のコメントを確認する

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

LangSmith LLM トレース

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

（省略可能なセクション）

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

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

10. 完了

学習した内容

次のステップ:

クリーンアップ

プロジェクトの削除

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

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

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