VS Code 拡張機能を活用した AI 駆動フロントエンド開発 - 実践編

VS Code 拡張機能を 活⽤した AI 駆動フロント エンド開発 - 実践編 鈴⽊ 章太郎 プリンシパルエンタープライズアーキテクト ソリューションアーキテクト本部 ヴイエムウェア株式会社 2024/04/20 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

鈴⽊ 章太郎 X (Twitter) : @shosuz ヴイエムウェア株式会社 プリンシパルエンタープライズアーキテクト Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、 Microsoft Azure 等の開発者向け技術啓発活動を 実施。その後 Dell、Accenture、Elastic での開発者 向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキ テクチャ策定等を中⼼に、開発者向け最新技術啓発 活動中。 https://www.docswell.com/user/shosuz Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://www.docswell.com/user/shosuz

プラットフォームの認知度を⾼め、開発者の準備態勢を整える さまざまな接点とそれらを増やす機会を探りつなげていく マルチクラウド対応の 訴求 AI プラットフォームとしての 認知向上 Spring の最新技術 啓発 デベロッパーアドボカシー Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 3

Agenda l 総合エンターテインメントアプリの開発 l ベクターデータベース RAG アプリの開発 l 資格試験対策アプリの開発 l まとめ Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 4

どのようにフロントエンドの開発を⼀⼈で進め、 プロトタイプを素早く作るかにフォーカス ©2023 VMware, Inc. 5

総合エンターテインメント アプリの開発 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 6

統合エンターテインメントアプリのコンセプトを作る App Store、Google Play 等で iPad、iPhone、Android ⽤のアプリを研究する ファンとの絆を深めるデジタル体験 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 7

フロントエンド開発 (1) – Uizard/Figma/Locofy.ai Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 8

Uizard https://uizard.io/ Uizard は2018年に設⽴された デンマークの企業 • AI を使ったアプリデザインツール • プロのデザイナーでなくてもプログラ ミングができなくても、簡単に UI が作れる • • • • • • • • • • • 基本機能 Magic (AI を使った機能) Scan Wireframe Sketch Wireframe Mode Scan Screenshot Smart Themes Attention Heatmap Text Assistant 保存ファイル形式は、SVG, PNG, JPEG, PDF の4種類 無料トライアル、有料プラン Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 9

• https://uizard.io/

Uizard でプロトタイピングしイメージをエクスポートする https://uizard.io/ • Magic（テキストプロンプトによる ⾃動⽣成） • 実画⾯イメージの取り込み • ⼿書き画⾯イメージの取り込み • その他の⽅法により画⾯遷移等 設定可能（ムービーなど） • SVG 等で画⾯毎にエクスポート Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 10

• https://uizard.io/

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 11

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 12

統合エンターテインメントアプリのモックを実装する Uizard で Magic のプロンプトを⼯夫して試⾏錯誤し SVG の画像をエクスポートする Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 13

統合エンターテインメント アプリ画⾯を確定させる • • • • メイン画⾯ コミュニティ イベント 賭け事 • • 検索画⾯ AI アシスト ファンとの絆を深めるデジタル体験 ファンとの絆を深める ファンのコミュニティ 選⼿とファンはチャットルームなどでつながることができる 好きな競⾺場（競⾺場、競艇場、競輪場、オートレース場） • • • • トップページ • • • 登録画⾯ • ベッティング結果 推奨コンテンツ • ビデオ再⽣ パーソナライズ Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 14

Figma for VSCode https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension エディタを離れることなく、デザインファイルの確認、 デザイナーとの共同作業、変更の追跡、実装のスピードアップ可能 • Figma ファイルを VSCode 内で 開いて編集をすることができる拡張 機能 • この拡張機能を使⽤して、Figma ファイルからコードを⽣成することは できない • ただし、Figma ファイルから CSS スタイルをエクスポートして、React コンポーネントに適⽤できる • また、Figma ファイルからデザインの アイデアを得て、⼿動で React の コンポーネントを作成できる Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 15

• https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

Locofy.ai https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 16

• https://www.locofy.ai/

Figma & Locofy.ai プラグイン Figma プラグインを使ってソースコードを⽣成できる Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 17

統合エンターテインメントアプリのモックを実装する Uizard、Figma for VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを⽣成する Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 18

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 19

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 20

フロントエンド開発 (2) – GitHub Copilot/Copilot Chat Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 21

GitHub Copilot / Copilot Chat 2023年4⽉時点での最新版 • Visual Studio Code 1.88.1 • GitHub Copilot v1.180.0 • GitHub Copilot Chat v0.14.1 • Billing 有効、GPT-4 有効 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 22

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 23

細かい CSS の修正やリソースの重複エラーについて 共通部品を活かして修正を最⼩限に抑える • 基本は GitHub Copilot の /explain で修正 • ⼀気にエラーを減らす • 下記に注⽬︓ • • • GlobalStyles.tsx assets assets/fonts Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 24

バックエンド開発 - GitHub Copilot/Copilot Chat, Postman for VS Code Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 25

Tanzu Application Platformによる開発/運⽤⽀援の流れ セルフサービスオンボーディング、SecOps ⾃動化を標準化、あらゆる K8s に対応、拡張可能 Start Architect App accelerators Service claims 標準化による 開発チームの ⽣産性向上 e Accelerator Iterate IDE plugin Debug tooling App Dev W orkload Collaborate Spring Boot 開発者の⽣産 性を阻害しな い開発環境 API discovery App live view Choreographed Path-to-Prod 柔軟なCI/CD Cloud Native Buildpacks s デプロイ、 セキュリティ Envoy あらゆる K8s で実⾏可能 Test & Build Secure Deploy Run CI & Build service Dev conventions Scan source & image Prod conventions Service binding App deliverable Serverless & eventing API gateway & mesh Bring Your Own Opinions and Investments Inner Loop Supply Chains Outer Loop ©VMware, App Ops Broadcom Proprietary Inc. and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. CaaS++, Supply Chain Templates Platform Ops

統合エンターテインメントアプリ (React Native) と バックエンドサービス (マイクロサービス) の構成例 今回は TAP on AKS による基盤レベルでのアジャイル開発/ 運⽤の⽀援提供 コードを書いて コミットするだけ コードを書いて コミットするだけ ユーザー認証 マイクロサービス コードを書いて イベント管理 コミットするだけ マイクロサービス AI 検索 マイクロサービス 基盤レベルの開発/ 運⽤⾃動化 (アプリ基盤がCI/CDを提供) React Native Tanzu Application Platform 開発⾼速化と運⽤省⼒化及びガバナンスを提供するアプリ基盤 カスタマイズ可能な基盤組み込みのサプライチェーン (スマホ上で実⾏) アプリごとにこの仕組みを ⽤意しないでよくなる コミット 取得 テスト Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. ビルド 脆弱性検査 構成定義 コミット デプロイ AKS (Kubernetes) on Azure

ユーザー認証マイクロサービス API の構成 ユニットテストと「疎結合な設計」、外部⾮依存なモックで、コード変更のたびにテストをほぼ全パーツに⾼速実施可能に コントローラー層 サービス層: アプリの中⼼となるビジネスロジック リポジトリ層 (フレームワーク依存だが変更が容易) (ウェブフレームワーク/DBなどのミドルウェアに⾮依存) (外部依存だが変更が容易) API 定義 URL と処理のマッピング 認証系サービス (アプリの中⼼) 抽象化 モック(テスト⽤) ユーザーリポジトリ ユーザーリポジトリ ロジックをDB種別⾮依存にすること PostgreSQL (外部依存) で特定ベンダやクラウドへのロックイン ユーザーリポジトリ 排除 内部データモデルの定義 Oracle (外部依存) DI コンテナ(依存性注⼊) 疎結合なパーツをアプリ起動直後にパラメ 疎結合パーツの組み上げ ータ指定の構成で組み上げる パラメーター管理 (起動時に構成を決定) ユニットテストのコード (コード変更 -> 即テスト) Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 依存性の逆転(⽮印の向き!!) ユーザーリポジトリ いずれか1つの実装をDIで注⼊して利⽤ 抽象化 モック(テスト⽤) セッションリポジトリ セッションリポジトリ Redis (外部依存) セッションリポジトリ

Web API 部分は Flask、フロントエンド側は React Native で開発 使⽤した主な VS Code 拡張機能 • GitHub Copilot / Copilot Chat • Postman for VS Code Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 29

Postman for VS Code https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode • VS Code から直接 Postman の パワーを使って API 開発とテストを 合理化 • Postman にサインイン • API リクエストを送信 • HTTP API リクエストの送信 • マルチプロトコル API リクエストを 送信 • 履歴から API リクエストを送信 • コレクションを使う • API を⽂書化 • データをインポート • クッキーを使⽤ • API のテスト • スクリプトを使った API のテスト • Postman コンソールでのトラブル シューティング Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 30

• https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

Flask で構築されたユーザー認証、イベント検索、AI リコメンド機能 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

統合エンターテインメントアプリ Demo Web API 部分は Flask、フロントエンド側は React Native で開発 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 32

ベクターデータベース RAG 検索アプリの開発 https://qiita.com/shosuz/items/cc36e9794f8946eb888a Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 33

• https://qiita.com/shosuz/items/cc36e9794f8946eb888a

使⽤した主な VS Code 拡張機能 Web API 部分は Spring Boot、フロントエンド側は React で開発 • GitHub Copilot / Copilot Chat • Postman for VS Code • Uizard • Figma for VS Code • Locofy.ai Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 34

VMware Explore US セッション⼀覧（英語）/ビデオデータ https://www.vmware.com/explore/us.html Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 35

• https://www.vmware.com/explore/us.html

VMware Explore US セッションを⽇本語で検索・サマリーアプリ Xxx について教えて もっと詳しく教えて セッションを検索 1 2 3 ボタンを押す 4 詳細情報表⽰ 関連セッションの表 ⽰ pgvector を使⽤した セマンティック検索 検索 App Deploy 該当セッションの 概要 全⽂ テーブル テーブル 2. pgvector にてクエリと概要のベクトルを ⽐較し、関連セッションを検索 全⽂を検索 6 質問＋検索結果情報から 3. UI に関連セッション⼀覧を表⽰ プロンプトをビルド 4. 詳しく知りたいセッションの 「もっと詳しく リンク」を押す 7 Session 全⽂ ⽂字起こしの要 約を⽣成 5. 該当セッションの台本を検索 6. Greenplum DB より取得された全⽂ ⽂字起こしから LLM へのプロンプトを ⽣成し、LLM へクエリ Transformer Model を使⽤したベクトル情報の付与 7. セッション台本の要約を⽣成 Hugging Face Explore US Workflow: 1. ユーザーが UI を通じて知りたいワードを React 5 セッションの 8 Explore US Broadcom and Confidential. Copyright © 2024 Broadcom. Session 全⽂ ⽂字起こし Session 概要Proprietary All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. LLAMA2 (LLM) 8. UI にセッションの詳細を表⽰ 36

VMware Greenplum とは ? 分析アプリケーション 課題 ソリューション 読み込み/書き込み SQL Language 組み込みアナリティクス • データサイエンティストの • 汎⽤技術 ANSI SQL 完全対応 GPtext and more 採⽤ • 分析をするにもデータが • 組み込みアナリティクス機能 マスターノード(仮想マシン) ほしいところにない スタンバイノードノード(仮想マシン) インターコネクト (⾼速ネットワークスイッチ) • データを蓄積するほど パフォーマンスが懸念 セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） • クラウドのコスト気になる • 分散 Postgres による 無限に スケールアウト 超並列処理の実現 • コア課⾦による 予想可能なコスト vSphere+ / vSAN+ • 拡張に伴い運⽤が⼤変そう • データが簡単には移⾏ ができない Platform Extension Framework (PXF) 読み込み/書き込み vSAN vSAN Disk DiskvSAN DiskvSAN Disk • vSphere 技術と連動した⾼い Elasticity (弾⼒性）の確保 S3 オブジェクト ストレージ Hadoop リレーショナル • PXFによる外部データの統合 データベース 外部データソース Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 37

Pivotaltracker による Backlog の管理 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 38

Postman for VS Code https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode • VS Code から直接 Postman の パワーを使って API 開発とテストを 合理化 • Postman にサインイン • API リクエストを送信 • HTTP API リクエストの送信 • マルチプロトコル API リクエストを 送信 • 履歴から API リクエストを送信 • コレクションを使う • API を⽂書化 • データをインポート • クッキーを使⽤ • API のテスト • スクリプトを使った API のテスト • Postman コンソールでのトラブル シューティング Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 39

• https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

Schema.sql の確定 https://github.com/mhoshi-vm/explore-api/blob/main/src/main/resources/schema.sql Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 40

• https://github.com/mhoshi-vm/explore-api/blob/main/src/main/resources/schema.sql

Swagger UI ⽣成 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 41

ブラウザーから Search API へのアクセス Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 42

Search API の実装 – SearchResults.Js
https://github.com/shosuz-evangelist/react-ai-explore
import React from "react";
import styles from
"./SearchSessionResults.module.css";
import { useLocation, Link } from "react-routerdom";
import { useEffect, useState } from "react";
import axios from "axios";
const SearchSessionResults = () => {
const location = useLocation();
const params = new
URLSearchParams(location.search);
const query = new
URLSearchParams(location.search).get("query");
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
const source = axios.CancelToken.source();
axios
.get(
`https://explore-apiexplore.tap01.cl01.lespaulstudioplus.info/api/searc
h?prompt=${encodeURIComponent(
query
)}&limit=20`,
{
---

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom.
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

headers: {
Accept: "application/json",
},
}
)
.then((response) => {
setData(response.data);
setLoading(false);
})
.catch((error) => {
console.error("Error fetching data: ", error);
setLoading(false);
});
return () => {
source.cancel();
};
}, [query]);
return (
<div className={styles.searchSessionResults}>
<Link to="/" className={styles.backButton}>
戻る
</Link>
{loading ? (
<p>
回答を⽣成中です。しばらくお待ちください…(モデルのダウンロードに時間がかかる
ことがあります)
--export default SearchSessionResults;

43

• https://github.com/shosuz-evangelist/react-ai-explore

Postman for VS Code で実⾏ - Search API https://explore-apiexplore.tap01.cl01.lespaulstudio plus.info/api/search?prompt=Aria Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 44

• https://explore-api-

出⼒を全部またずに応答を返すための SSE (Server Side Event) 実装 SSE はクライアント側での実装も必要（参考 URL） https://www.baeldung.com/spring-mvc-ssestreams#2-client-side-1 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 45

• https://www.baeldung.com/spring-mvc-sse-streams

Summarize API の実装 – SessionDetails.js
https://github.com/shosuz-evangelist/react-ai-explore
import React, { useState, useEffect } from
"react";
import { useParams, Link } from "react-routerdom";
import styles from
"./SessionDetails.module.css";
const SessionDetails = () => {
const { id: sessionId } = useParams();
const [data, setData] = useState("");
useEffect(() => {
const eventSource = new EventSource(
`https://explore-apiexplore.tap01.cl01.lespaulstudioplus.info/api/su
mmarize?sessionId=${sessionId}&sequence=1`
);
eventSource.onmessage = function (event) {
setData((oldData) => oldData + event.data);
};

return () => {
eventSource.close();
};
}, [sessionId]);
return (
<div className={`${styles.sessionDetails}
${styles.container}`}>
<Link to="/" className={styles.backButton}>
戻る
</Link>{" "}
{/* 戻るボタンを追加 */}
{/* <img className={styles.groupIcon} alt=""
src="/groupD.svg" />
<img className={styles.groupIcon1} alt="" src="/groupD1.svg"
/> */}
<h2 className={styles.scrollableText}>{data}</h2>
</div>
);
};
export default SessionDetails;

eventSource.onerror = function (error) {
console.error("Error fetching data: ", error);
};
Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom.
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

46

• https://github.com/shosuz-evangelist/react-ai-explore

Postman for VS Code で実⾏ - Summarize API https://explore-apiexplore.tap01.cl01.lespaulstudiopl us.info/api/summarize?sessionId= MAPB2503LV Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 47

• https://explore-api-explore.tap01.cl01.lespaulstudioplus.info/api/summarize?sessionId=MAPB2503LV

Tanzu Application Platform にデプロイする API 側 GitHub リポジトリ https://github.com/mhoshi-vm/explore-api Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 48

• https://github.com/mhoshi-vm/explore-api

React フロントエンド側アプリケーション GitHub リポジトリ https://github.com/shosuz-evangelist/react-ai-explore Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 49

• https://github.com/shosuz-evangelist/react-ai-explore

今回の API を Tanzu Application Platform にデプロイするコマンド Docker ファイルを書かずに Container をデプロイできる Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 50

GitHub Copilot Chat に 簡単な css の修正をさせる – Start.js
https://github.com/shosuz-evangelist/react-ai-explore
import React, { useState, useRef, useEffect } from
"react";
import { useNavigate } from "react-router-dom";
import styles from "./Start.module.css";
function Start() {
const [text, setText] = useState("");
const navigate = useNavigate();
const textAreaRef = useRef(null);
useEffect(() => {
textAreaRef.current.focus();
}, []);
return (
<div className={styles.container}>
{/* <img className={styles.groupIcon} alt=""
src="/group.svg" /> */}
<div className={styles.buttonContainer}>
<textarea
ref={textAreaRef}
className={styles.textBlock}
onChange={(e) => setText(e.target.value)}
/>
---

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom.
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

<button
className={styles.startSearching}
onClick={() =>
navigate(`/search?query=${encodeURIComponent(text)}`)
}
>
これで検索する
</button>
</div>
<div className={styles.group1}>
<div className={styles.aiSearchOn}>
AI Search on VMware Explore US
<br />
Keynote & Technical Sessions
</div>
</div>
<div className={styles.group}>
<div className={styles.tanzuGreenplumWithPgvector}>
Question Answering with
<br />
VMware’s pgVector/Greenplum
</div>
</div>
<img className={styles.groupIcon1} alt="" src="/PrivateAIBrain.svg" />
</div>
);
}
export default Start;
51

• https://github.com/shosuz-evangelist/react-ai-explore

UI を更新して Git Commit すると Live Update で React コンテナが再起動 Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 52

Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 53

VMware Tanzu Application Platform / Greenplum データベースと React による RAG サンプルアプリご紹介 https://qiita.com/shosuz/items/cc36e9794f8946eb888a Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 54

• https://qiita.com/shosuz/items/cc36e9794f8946eb888a

資格試験対策⽤アプリ LegalTrial Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. subsidiaries. 55

Cursor - VS Code を folk して作られた AI コーディングエディタ 番外編 https://cursor.sh/ Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 56

• https://cursor.sh/

使⽤した主な VS Code 拡張機能 Web API 部分は ASP.NET Core 7、フロントエンド側は React で開発 • GitHub Copilot / Copilot Chat • Uizard • Figma for VS Code • Locofy.ai Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 57

LegalTrial Demo Localhost で実⾏ • React で順番に実装 • ●✖ ボタン配置 • Next ボタン実装 • ロジック実装 • ダークテーマに変更 • ⾃分の回答表⽰ • 他のロジック実装… Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 58

Cursor にソースコードを説明させる Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 番外編 59

まとめ Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 60

Agenda 本⽇お話ししたこと l フロントエンド開発 (1) – Uizard/Figma/Locofy.ai l フロントエンド開発 (2) – GitHub Copilot/Copilot Chat l バックエンド開発 - GitHub Copilot/Copilot Chat, Postman for VS Code、 Cursor, etc. Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 61

Thank You Broadcom Proprietary and Confidential. Copyright © 2024 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.