はてなブックマーク

こんにちは。AI ShiftでWebフロントエンジニアをしている安井です。今回はMastraのメモリに焦点を当てて解説をしていきます。 はじめに MastraはTypeScriptでAIエージェントを構築するためのフレームワークです。エージェント、ワークフロー、RAG、評価といった主要機能だけでなく、直感的にデバッグ可能なplayground uiや運用を見据えたOpsの機能なども豊富に備わっています。 また本記事は2025/05時点での内容に基づいています。 コンテキストウィンドウ メモリは、エージェントが会話の文脈を把握するために重要な情報を整理・保持する仕組みです。これは、すべてのチャットメッセージを圧縮し、言語モデルが任意の時点で見ることができる情報の総量（コンテキストウィンドウ）を効率的に管理します。 Mastraではこのコンテキストは大きく3つに分類されます。 1. メッセージ

はじめに こんにちは。AI Shift バックエンドエンジニアの木村です。 私たちのプロダクトでは開発チーム（フロント、バック、インフラ）とAIチーム（自然言語処理、音声対話など）が共同して開発しています。 開発プロセスの中で開発チームのバックエンドエンジニアとAIチームが連携することが多く、その中で感じた課題や改善案、実際に現在行なっていることをまとめてみました。 背景と目的 私たちのプロダクトは音声対話に関わるプロダクトで、AIチームの専門性とバックエンドエンジニアの専門性をどう効率よく連携させるかという課題がありました。 それまで2パターンの連携方法を試していました。 Pythonでプロトタイプ → Goでプロダクトに組み込み AIチームがPython（Jupiter NotebookやGradio）でプロトタイプとして実現方法を検証し、バックエンドエンジニアがプロダクトにGoで組み

こんにちは。AI ShiftでWebフロントエンドエンジニアをしている安井です。今回はAIエージェントを実現するにあたって試行錯誤した設計と実装に関する筆者の考えを整理したいと思います。 はじめに AIエージェントは現在大きな注目を集めており、新しいサービスも次々と登場しています。しかしながら、実際にAIエージェントを開発するための具体的な方法論については情報が十分に共有されておらず、依然として不明瞭な部分が多いように感じています。 そこで今回はAIエージェントを開発する上で重要になるであろうポイントを3つ整理して解説したいと思います。 不確実なエージェントの振る舞いを可能な限り分解する 自律性とガードレールによる制約のバランスを調整する 非同期を前提にして、ユーザへ細かくフィードバックする 使用する技術 今回はAIエージェントを構築するフレームワークであるMastraを前提に解説をします

こんにちは。株式会社AI Shiftの安井です。今回は約1年前に行った技術選定の振り返りと1年間運用したことで得られた知見をもとに新しく立ち上がったプロジェクトではどのような技術選定と設計をしたのかまとめたいと思います。 前提 私たちはLLMを活用した業務効率化プラットフォームをtoB向けに開発しています。現在はブラウザで利用されることが前提にありますが、立ち上げ当初はMicrosoft Teamsアプリ上で利用されるケースも想定していました。 所属する開発チームはBackend（2人）、Frontend（私含め2人）、Designer（1人）の構成です。このメンバーで現在2つのサービスを運用しています。そして今回立ち上がったプロジェクトを含めると合計3つになります。 またtoBのプロダクトのためLighthouseなどパフォーマンスの指標を追求する必要はありませんが、ユーザ（利用する従業

はじめに こんにちは。株式会社AI Shiftの安井です。 本記事はAI Shift Advent Calendar2024の13日目の記事となります。 今回はReactのトランジションがどのような仕組みで実装されているのかを深掘りし、その過程でReactがisInputPendingというAPIに期待したことを考察していけたらと思います。 構成は以下のとおりです。 startTransitionのおさらい トランジション時のレンダリング処理の違い トランジション時の処理を深ぼる（図解） isInputPendingで解決しようとしたこと 前提 今回はReact18を前提にして解説をします。そのためRaect19からstartTransition関数に非同期関数も受け付けるようになりますが、本記事ではstartTransitionに渡す関数は同期的であるとします。 startTransit

SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。 これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。 この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。 コンポーネント設計について シンプルな例でも新規作成画面と編集画面には違いがありました。 これらを1つの共通コンポーネントで実装するとコンポーネント内でIF分岐が発生し可読性が下がったり、再利用性が低くなったりします。 では両者を完全に別コンポーネントで実装したら良いのかというとそれも微妙です。新規作成、編集の入力項目は仕様的に同じであり、バリデーションも同じであることが多いです。 ここを別に実装してしまうと仕様が変わったときに変更する箇所が多くなってしまいます。 なのでフォーム部分(入力とバリデーション)は共通化

今回は認証・認可サービスであるClerkのSDKについて解説をします。Clerkといえば基本的な認証・認可機能はもちろんのこと提供されているReact Componentを配置するだけで認証フローが完結する特徴があります。 https://clerk.com/ しかし、React Componentを配置するだけで認証が完結するというのはあまりにも簡単でブラックボックス化しているため、内部の実装を確認してその詳細を見ていきたいと思います。 はじめに 本記事ではClerkの提供するSDKに着目して解説をするため、具体的なClerkの使用方法や個別の認証方法については触れません。 また、Next.jsやRemix、TanStack StartなどさまざまなFrameworkに対応していますが、今回はReact + Viteの構成を前提とします。 SDKのGithub Repositoryは下記

こんにちは、sugar-catです。 AIShiftでは、昨年11月から「AI Worker」[1]（以下、AI Worker）という新しいサービスの開発を開始しました。 約10ヶ月が経過し様々なことがありましたが、今回は私が行ったインフラ移行や諸々の改善活動について、外部公開が可能な取り組みをざっくりとまとめます。まだまだ開発途上の部分も多く、至らない点が多いですが、なんらか役立つと嬉しいです。 3ヶ月時点については、以下の記事をご覧ください。どのような技術を使い、何を作っているかについて説明しています。 Google Cloudへのサービス展開 弊チームでは、もともとMicrosoft Azureのスタックをベースにアプリケーションを構築・運用していました。しかし、ビジネス要件の変更に伴い、Google Cloudと併用してサービスを展開することになりました。 既存のAzure構成 も

今回はReactが初回マウントされるまでの実装を私自身が学習した流れに沿って解説したいと思います。「React Internals Deep Dive」というブログ記事がReactの内部実装を知るのに大変参考になります。 また、「React Internals Explorer」を使うとReactが実行するプロセスを視覚的に理解することができるため、大変おすすめです。 はじめに 本記事では以下の構成に従って解説をしていきます。 前提として理解するべき要素 FiberNodeの種類 4つの実行フェーズ currentとworkInProgress Trigger フェーズの実装 Render フェーズの実装 Commit フェーズの実装 初回マウントに関する内容は主にこちらのブログを参照しています。 なぜ初回マウントに限定するのか 今回はReactの実行の中でも初回マウントに限定して解説をし

はじめに こんにちは、AI Shiftフロントエンドエンジニアの栗崎 (@KK_sep_TT) です。 AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。 React Internal Deep Dive jserさんがReactの内部の仕組みをまとめてくれています。 今現在32のセクションがあり、デモや解説動画を使いながら分かりやすく深い内容についてまとめてくれています。Reactの内部を読み解く上でとても参考になりそうです。 Javascript Set の 集合演算がブラウザで実行できるように Javascript の Set オブジェクトの集合演算のメソッドが主要ブラウザでサポートされました。 toB SaaS のインフラアーキテクチャ 10社の toB Sa

TanStack Form は TanStack Query, TanStack Router で有名なTanStack系列のフォームライブラリです。まだv0系ですが活発に開発がされていて、v1リリースもそう遠くないと思われます。 トップページにはTanStackの公式推しポイント3点が挙げられています。 強力な型サポート Headless で多くのライブラリをサポート きめ細かな reactive で高パフォーマンス それぞれの特徴について詳しく見ていく前に TanStack Form の基本的な書き方から見てみます。 基本的な使い方 useForm フックから form インスタンスを取り出し、form.Field でフォームの各 Field を定義していきます。そして form.Field の children props に フォームの input 要素を入れてUIを構築していきま

React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理

はじめに こんにちは、AI Shiftフロントエンドエンジニアの安井(@ytaisei_)です。 AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。 📈 shadcn/uiがchartに対応予定！ shadcn/uiといえば、Radix UIとTailwind CSS を利用して作成した、再利用可能なコンポーネントを提供してくれるライブラリです。今回はそのshadcn/uiにchartのコンポーネントが追加予定であるというニュースがありました！ また、chartを構築するためのライブラリとしては内部にrechartsを採用しているとのことです。記事執筆時点（2024/06/28）ではまだ追加されていませんが、今後の開発に期待です。 🛫 React Compiler

はじめに こんにちは、AI Shift バックエンドエンジニアの@sugar235711です。 この記事では、Honoの使い方をおさらいし、API開発を通じてHonoの実際の開発で役立つTipsを紹介します。 Honoの基本的なコンセプトや網羅的な実装例については、公式ドキュメントを参照してください。 更新情報 2024/7/29更新

近年のReactのルーティングライブラリには当たり前のようにデータ取得を行うAPIが提供されています。その先駆けになったのがReact Routerでしょうか。React RouterではRemixから逆輸入される形でLoader APIが提供され、ルートごとにデータ取得を実行することができるようになりました。 それと同様にTanStack RouterにもLoader APIが存在しデータ取得を行うことができます。では、なぜルーティングに責務を持つライブラリがデータ取得のAPIを提供しているのでしょうか。 ⭐️本記事はこのLoader APIがSPAでデータ取得をする際に如何に重要な存在であるかを、2つの視点から整理することを目的とします。 はじめに ここでは以下2つの視点からLoader APIの重要性を整理します。 無駄なRequest Waterfallを防ぐ役割 ページ遷移前にP

最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ

先日RemixとReact Routerがマージされ、React Routerv7で統合されるという衝撃的なニュースがありました。 React RouterはこれまでSPA開発におけるルーティングライブラリとして広く活躍してきました。しかし今回の統合の背景にReact Router自体がすでにRemixとの差分が無くなっていたという事情があったことからも分かる通り、React Routerは直感的にルーティングの域を超えた存在です。 またFrameworkを採用せずReactでSPA開発をする際にはReact Routerの存在は大きいものでしたが、昨年の12月にTanStack Routerがversion1系になったことでVite+Reactでルーティングを実装する選択肢が新たに1つ増えました。 TanStack Routerについてご存知でない方はこちらの記事で詳しく紹介をしています

【結論】 UXの捉え方が「ユーザがサービスを道具として扱うための透明性と自己帰属感の実現」へと変化した。 突然ですが「UXとは何？」と聞かれたらなんと答えるでしょうか。以前までの私であれば”速さ・使いやすさ”といった回答をしていた気がします。しかし今回あるきっかけで融けるデザインという本を読む機会があり、そこで得た考えを言語化したいと思いこの記事を執筆しています。 ＊本記事は融けるデザインを読んだ個人の解釈をまとめたものですので、本の内容を解説するものではありません。所々解釈が異なる点がありましたらご了承ください。 「融けるデザイン」とは 本書はデザインの手法というより、インターフェイスとは何か？UXとは何か？という抽象的な概念に着目した一冊です。今回私が本書を紹介する理由としては、デザイナーだけでなくエンジニアにとっても有意義な内容が書かれていて、これまでの価値観を大きく変えてくれるもの

はじめに こんにちは、AI Shiftフロントエンドエンジニアの安井(@ytaisei_)です。 AI Shiftでは先月より週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。 先月の内容はこちらです！ 🦈 TypeScript 5.4がリリース 特にNoInfer Utility Typeの追加に着目していました。 ここではdefaultColorの型をcolorsの型に限定したいケースを想定します。 下の例における期待する挙動として"blue"はcolorsの配列に存在しないため型エラーを起こして欲しいところです。しかし、TSではCの型を"blue"も含めて推論してしまします。 function createStreetLight<C extends string>(colors:

今回はLLMと相性のいいReactのChartライブラリを探すために検証を行いました。ReactのChartライブラリといえば数多く種類が存在し、どれを採用するのがいいか迷うところです。下記のサイトはReactのChartライブラリが一覧で整理されており、これだけでも数十個候補になるライブラリがあることがわかります。 はじめに 本記事では数多くあるReactのChartライブラリの中からLLMと相性がいいライブラリを様々な観点から考察することを目的とします。 前提 LLMからChartに注入するjsonデータを生成する https://platform.openai.com/docs/guides/text-generation/json-mode レンダリングはClientで行う Vercel AI SDKではRSCを採用してServerでレンダリングしています https://sdk.

こんにちは、AI-Shift フロントエンドエンジニアの栗崎(@kk_sep_tt)です。 最近、AI-Shift ではフロントエンドエンジニアが増えてきたこともあり、週1でフロントエンドの気になるトピックについて話す会を開催しています。 本記事では2月中で話したトピックについてまとめています。 トピックが多いので目次から気になる部分を読んでいただければと思います。 iOSに入るブラウザのWebKit制限の緩和 EUでiOSに入るブラウザのWebKitの制限が緩和されました。 日本での規制緩和はされていませんが、今後緩和されるかもしれません 👀 「Vue・Nuxt情報が集まる広場」というものが日本コミュニティの若手の間で密かに盛り上がっている AI-Shift では現状Vue.jsを使っているプロダクトはありませんが、Vue.jsの動向は追っていきたいと思っています 👀 TanStac

こんにちは、AIShift バックエンドエンジニアの石井(@sugar235711)です。 AIShiftでは去年の11月からAI Worker[1]という新しいサービスの開発が始まりました。（以下AI Worker） 本格的に開発が始まり3ヶ月弱経ったので、その間に試してきた技術やチームの取り組みについてまとめてみたいと思います。 はじめに この記事では、AI Workerのおおまかな概要・設計を説明し、それらのバックエンドを実現する上でどのような技術を試してきたのか、技術以外でのチームの取り組みについてまとめます。 少し分量が多いので、ライブラリについての情報を求めている方は、目次から気になる部分を読んでいただければと思います。 何を作っているのか ざっくりまとめると、Microsoft Teams/Web上で動くAIを活用した業務改善プラットフォームを作成しています。 GPTとRAG

Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS

私たちはCloudアプリケーションによって、リアルタイムでのCollaboration（共同作業）や複数デバイスからのデータアクセスを可能にしてきました。それはあらゆるデータをサーバに集中させることによって実現していますが、同時にデータのOwnership（所有権）を失っていることを意味します。 もし使用しているサービスが停止してしまったら、そのソフトウェアは機能しなくなり、それまでに作成していたデータは失われてしまいます。 またCloudアプリケーションによって私たちはどこからでもデータにアクセスできるようになりましたが、それは全てサーバを経由する必要があり、データを取得するにはサーバの許可が必要になります。 私たちがデータを他人のコンピュータに保存している以上は、そのデータに対するOwnershipをある程度奪われてしまっていると考えることができます。 Cloudアプリケーションはデー

はじめに 今回はSWRとTanStack Queryの比較によってそれぞれの特徴と違いを整理したいと思います。背景としてネット上にある両者の比較記事は2022年以前のものが多く、当時に比べSWR2.0がリリースされたことなどで比較の観点が変化したように感じました。改めて整理することで技術選定の参考になればと思います。 前提 今回は以下のバージョンを前提にします。（2023/08/26時点でLatest） SWR v2.2.0 TanStack Query v4.34.0 また、私自身はTanStack Queryを業務で1年ほど扱ったことがありSWRは全く経験がない状態です。この記事はどちらが優れているかを示すためのものではなく、あくまで客観的に比較することを目的にしています。 目次 ここでは以下の3つの観点から比較を行い考察をします。 interfaceでの比較 機能面での比較 キャッシ