【ITニュース解説】Building a Portfolio while you Chat: My TamboHack Project

ChatPortfolioは、チャットを通じて自分のポートフォリオを作成し、内容を編集できる画期的なプロジェクトである。このシステムは、ユーザーが自然な言葉で指示を出すだけで、ポートフォリオの情報を瞬時に更新できる。システムエンジニアを目指す初心者にとっても、AIとウェブ開発がどのように組み合わされているかを理解する良い事例となるだろう。このプロジェクトは、Tambo AIというAIオーケストレーションツールを核に、Next.jsとTypeScriptといった最新のウェブ技術を用いて構築されている。

ChatPortfolioの最も魅力的な機能は、ユーザーがチャットボックスに英語で指示を入力するだけで、ポートフォリオの内容を自由に変更できる点だ。「名前をスティーブ・ジョブズに変更してほしい」「ダークモードを有効にしてほしい」「スキルをフルスタック開発者のものに変更し、フォントをTimes New Romanに更新してほしい」といった具体的な指示を出すと、AIがその意図を理解し、ポートフォリオの該当部分を自動的に更新する。これは、複数のUIコンポーネントから必要な要素を動的に選択し、その内容をリアルタイムで変更することで実現されている。従来のポートフォリオ作成では、コードを直接編集したり、管理画面で複雑な操作を行ったりする必要があったが、ChatPortfolioはその手間を大幅に削減し、より直感的で手軽な編集体験を提供する。

このプロジェクトの根幹をなすのがTambo AIである。Tambo AIは「AIオーケストレーションツール」と呼ばれ、AIの機能を様々なアプリケーションと連携させ、全体の処理を効率的に調整する役割を担っている。具体的には、ユーザーがチャットで入力した指示をAIが解釈し、その解釈結果に基づいてポートフォリオのどの部分（例えば名前、スキル、テーマ設定など）をどのように変更すべきか、という指令をウェブアプリケーションに伝える橋渡しをする。これにより、開発者はAIの複雑な処理を直接制御することなく、アプリケーション側のデータ更新やUI操作に集中できる。

ウェブアプリケーションの構築にはNext.jsが採用されている。Next.jsは、ReactというJavaScriptライブラリを基盤としたフレームワークで、ウェブサイトやウェブアプリケーションを効率的かつ高速に開発するために広く利用されている。特に、サーバーサイドレンダリングや静的サイト生成といった機能により、読み込みが速く、検索エンジンにも強いウェブサイトを構築できる利点がある。ChatPortfolioのような動的なアプリケーションでは、ユーザーの操作に素早く反応し、コンテンツを効率的に表示するためにNext.jsの能力が活かされている。

また、開発言語としてTypeScriptが使われている。TypeScriptはJavaScriptに「型（Type）」という概念を加えたもので、変数や関数の引数、戻り値などにどのような種類のデータが入るかを明示的に定義できる。これにより、開発の初期段階でエラーを発見しやすくなり、特に大規模なプロジェクトやチームでの開発において、コードの品質と保守性を高める効果がある。ChatPortfolioでは、ポートフォリオのデータ構造（名前は文字列、スキルは文字列の配列など）をTypeScriptで厳密に定義することで、AIからのデータ更新が正しく行われることを保証し、予期せぬバグの発生を防いでいる。

さらに、見た目を美しく整えるためにMagic UIコンポーネントとshadcn/uiが利用されている。これらは、ウェブサイトでよく使われるボタン、カード、ナビゲーションバーなどの部品（コンポーネント）を簡単に組み込むためのツール集だ。shadcn/uiは、再利用可能なUIコンポーネントを開発者が自分のプロジェクトに取り込み、カスタマイズできるため、デザインの一貫性を保ちつつ、開発効率を向上させることができる。ChatPortfolioでは、「Blur Fade」や「Dock」といったコンポーネントを用いることで、洗練されたユーザーインターフェースを実現している。

このプロジェクトの開発は、いくつかの明確なステップに分かれている。

まず、Tambo Appの作成から始まる。npx tambo create-appコマンドを実行することで、Tambo AIと連携するための基本的なプロジェクト構造が生成される。これは、AIがアプリケーションと通信するための土台を築く重要なステップである。

次に、初期設定後に不要なファイルを削除し、初期データとUIコンポーネントを追加する。ここでportfolio-interactable.tsxというファイルが登場するが、これはポートフォリオの具体的な表示ロジックや、AIからの指示を受けてデータを更新する処理が含まれる部分であり、アプリケーションの核心的なUIコンポーネントの一つとなる。ポートフォリオの表示に必要なデータ構造をzodというライブラリを使って定義することで、データの整合性を保つ工夫もされている。

その後、Magic UIコンポーネントの追加が行われる。npx shadcn@latest addコマンドを使って、先に述べたような視覚的に魅力的なUI要素をプロジェクトに導入する。これにより、デザイン性の高いポートフォリオを効率的に構築できる。

そして、メインのポートフォリオコンポーネントが作成される。このコンポーネントは、ポートフォリオ全体のレイアウトや、名前、スキル、プロジェクトなどの具体的な内容を表示する役割を担う。ダークモードの切り替え機能や、AIから指示されたフォントや色のスタイルを適用するロジックもここに組み込まれている。useEffectフックを使って、AIから渡されるテーマ情報に基づいて、ポートフォリオ全体のテーマを同期させる処理も行われる。

最後のステップは、これらのコンポーネントをTamboに統合することである。withInteractableというTambo AIの提供する機能を使って、ポートフォリオコンポーネントをAIが操作できるように「インタラクタブル」として登録する。これにより、AIはチャットで受け取った指示を解析し、onPropsUpdateというハンドラーを通じてポートフォリオのデータを更新できるようになる。ユーザーがチャットで「名前を変更して」と指示すると、AIがこのonPropsUpdateを呼び出し、新しい名前のデータがポートフォリオに反映されるという仕組みである。

ChatPortfolioプロジェクトは、AIと現代のウェブ技術を組み合わせることで、従来のアプリケーションが持つ操作性を大きく変革できる可能性を示している。システムエンジニアを目指す初心者にとっては、Tambo AIのような新しいAI連携ツール、Next.jsやTypeScriptといった実践的なウェブ開発技術、そしてUI/UXを向上させるためのコンポーネントライブラリの活用方法を、具体的なプロジェクトを通して学ぶ絶好の機会となるだろう。このプロジェクトは、コードを直接操作することなく、自然言語でアプリケーションを制御するという、より直感的でユーザーフレンドリーな未来のインターフェースの姿を示している。