Page: 17 / 106

SupabaseのAuth UIをNext.js ( App Router )で使ってみた

最近のIDP系サービスは認証系のUIライブラリも提供しており、今回はSupabaseのReact向けライブラリをNext.jsで利用してログインページを実装しました。SupabaseのAuth UI Reactパッケージを使うことで、SNSログインにも対応した簡単なUIが実装できました。テーマやCSSのカスタマイズも可能で、試してみた結果を今後の記事にする予定です。ただし、RSCでは使えないようです。また、use clientを外すとエラーが発生し、クライアント側での設計が必要です。参考記事はこちら：https://supabase.com/docs/guides/auth/auth-helpers/auth-ui

公開日: 2023/12/27

最終更新日: 2023/12/28

AWS JavaScript Next.js React

Amazon DynamoDBとCognito User Pools + Next.jsで、簡単なブックマークシステムを実装する

このテキストは、特定のユーザーによって利用される有料のブックマーク機能についての説明です。DynamoDBとCognitoを使用して構築されており、APIの作成やデータの管理方法などが簡単にまとめられています。ブックマークの追加、削除、取得のための関数も提供されています。また、UIの作成にはReactとAmplify UIが使用されています。

公開日: 2023/12/27

最終更新日: 2023/12/27

Hono / Sonik JavaScript

Honoでサブディレクトリごとにリソースを分割したAPIを作る

Honoを使用してAPIを作り込む際に、ファイルの分割をサブディレクトリ・パス単位で行うことが多いです。ルートのAPIを作成し、app.routeを使用してサブディレクトリ内の追加したいAPIを登録することで、パスの指定やリソースの分割がシンプルになります。例として、/supabase/contentというパスを指定したAPIを追加する方法が説明されています。

公開日: 2023/12/27

最終更新日: 2023/12/27

JavaScript WordPress

View Script機能を利用して、任意のJavaScriptを実行するWordPressカスタムブロックを作る

Stripe ElementsやGoogle Analyticsなど、Webサイト上でJavaScriptを実行する必要がある場合、WordPressのカスタムブロックを使用してJavaScriptを実行する方法を紹介しています。viewScriptを追加し、JavaScriptファイルを指定してカスタムブロックに追加します。ビルドを行い、ブロックをサイトに追加すると、JavaScriptが実行されます。さらに、DOMの操作やデータの受け渡しも行うことができます。このカスタムブロックは、エディターや保存時に加えて、表示する際の処理にも設定できる便利な機能です。

公開日: 2023/12/27

最終更新日: 2023/12/27

momento SaaS / FaaS

momentoでサーバーレスなキャッシュ / VectorDBを作ってみた

Momentoというキャッシュ専門のSaaSについて触ってみました。アカウント作成はGoogle/Email/GitHubで可能で、ホーム画面ではナビゲーションが表示されます。キャッシュの作成もGUIから簡単に行えますし、データの書き込みや取得もGUIで試せます。キャッシュの一覧は表示されないため、必要な場合はWebhookで外部DBに連携する必要があります。さらにFine-Grained Access Keyを使用することで、細かい制御も可能です。他の機能も触っていきたいと思います。

公開日: 2023/12/26

最終更新日: 2023/12/26

JavaScript LangChain.js Node.js

LangChain.jsのRecursiveUrlLoaderを使って、EmbeddingのためにWebページをスクレイピングする

RAG（Red, Amber, Green）を作る際には、通常はSQLやREST/GraphQLのAPI、またはAmazon S3などのファイルを読み込む方法でデータを取得すると思われますが、場合によってはスクレイピングが必要になることもあります。RecursiveUrlLoaderを使用してデータをスクレイピングする方法についてまとめました。ライブラリの追加や実装方法なども詳しく説明されています。また、スクレイピングするページを制御したり、除外したりする方法も紹介されています。REST API等が利用可能な場合はそちらの方が簡単ですが、スクレイピングが必要な場合にはこの方法を検討する価値があるかもしれません。

公開日: 2023/12/26

最終更新日: 2023/12/26

Cloudflare JavaScript LangChain.js Node.js SaaS / FaaS

Cloudflare VectorizeとLangChain＆OpenAIを組み合わせてRAGを作ってみた

Cloudflareのベクターストアを利用するためには、Workersを有料プランに変更する必要があります。月5ドルの基本料金で、リクエストが発生すればすぐにマネタイズできるため、気軽に利用できます。Vectorizeを使用してインデックスを作成し、Wranglerで設定値を追加します。また、VectorizeとOpenAIのAPIキーをHonoのBindingsに設定し、LangChainを使用して処理を書きます。最後に、Vectorizeのインデックスを削除する際にはWranglerコマンドを使用します。

公開日: 2023/12/25

最終更新日: 2023/12/25

JavaScript LangChain.js Node.js

Langchain JSONToolkitでpackage-lock.jsonやtsconfig.jsonを読ませてみた

LangChainのToolkitやAgentを使って、JSONのデータを読んで回答を生成する方法を研究しています。JSONToolkitを試した結果、期待した結果を得られなかったが、結果を記事として残すことにしました。具体的には、package-lock.jsonのデータを読んでプロジェクトの依存関係を調べることを試しましたが、トークン数のエラーが発生しました。tsconfig.jsonを使用する場合も同様の問題があります。JSONToolkitは、JSONの中の情報を取り出して回答を生成するために使用することがおすすめです。JSONLoaderとRAG系のChainを使用すると、JSONの内容に対するコメントのリクエストに適していると思われます。

公開日: 2023/12/25

最終更新日: 2023/12/25

AI / ML JavaScript LangChain.js LLM Node.js

LangChain.js + OpenAI API(GPT-4)で、ベクターストアを使わずに擬似RAGを作ってみた

この記事は「LangChain Advent Calendar 2023」25日目の記事です。ベクターストア無しでRAG（retrieval augmented generation）を作成する方法について紹介しています。具体的には、Embeddingを使わずにベクトルデータを生成し、WordPressのAPIを用いて投稿を検索する方法を解説しています。また、RemoteLangChainRetrieverをカスタマイ

公開日: 2023/12/25

最終更新日: 2023/12/25

Hono / Sonik JavaScript

HonoをVercelで動かしてみた（API / SSR HTML編）

HonoはVercelで動作すると聞いていたが、実際に試したことはなかった。Vercel向けにHonoをセットアップする方法と、Vercelでホストするためのファイルの生成方法が説明されている。Vercelにデプロイすると、Honoからのレスポンスが返ってくることが確認できた。さらに、静的HTMLの配信やHonoでSSRした結果の配信も試した。ただし、ワイルドカード（’*’）を利用する場合は注意が必要で、設定の順番によって動作が変わることがある。

公開日: 2023/12/25

最終更新日: 2023/12/25