サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ChatGPT
zenn.dev/laiso
ターミナルでclaudeを実行し、/configコマンドで設定 /ideコマンドでIDE連携が可能 原文 ClineはVSCode拡張なので、IntelliJやWebStormなどのJetBrains製品のエディタには対応していません。 JetBrains版のエージェントとも言えるJunieの登場も控えていますが、他のユーザーのレビューによると他ツールと同じ開発体験を実現するのは難しそうでしたClaude 3.7 Sonnetをモデルに指定して使うことは出来なさそうでした。コーディングタスク能力にかなり差があるのでClaudeを使いたいところです。[1] そこでCLI(TUI)ベースのコーディングエージェントのClaude Codeの出番です。 MCPで2つを接続することによりエージェントからIDEで開いているファイルや選択範囲などを取得できるようにします。 JetBrains IDEはタ
llOllamaモデルをClineで動作させるにあたり、2つの課題があります。 1つ目は入力コンテキストの制限です。多くのデフォルトのOllamaモデル設定ではClineのシステムプロンプトが途切れてしまうため、num_ctxパラメータの増加が必要です。Cline側でOllama APIのパラメータを動的に付与するという計画もあるのですが、それまではモデルを自分でビルドする方法があります。 2つ目はプロンプト形式の不一致です。Clineは入出力で独自のXML形式を要求しており、システムプロンプトでToolsを定義し、モデルの応答で呼び出すToolsと引数を受け取る必要があります。これに対しては、ollamaのTEMPLATE定義を上書きしてClineの仕様に準拠するように変更することで対応できます。 例としてllama3.1:8bの調整をしました。 ここでは以下の変更をしました PARAM
前提 Roo CodeがClineのフォークという程度には知られている。Roo Codeを好んで使っているユーザーがいるがどんな違いがあるのかというのが気になっていたので調べた。 結論としては「Rooは個人が趣味で実験的な機能モリモリ入れた改造版で、Clineが事業としてやっていこうとしているオリジナルな製品」 機能面は両方インストールしてもらえばすぐ分かるので背景的な情報とか内部設計とかをピックアップした。 画面 Roo Code Cline ユーザー数:Cline>Roo Code これはマーケットプレイスとGitHub、Discordを見るとわかる。 ざっくりと4:1 開発者数:Cline>Roo Code Clineは会社化して採用してる GitHub上でいろんな人が活動してる エンタープライズでマネタイズするらしい MetaからClineに転職した人とかいる Rooはメインの二人
はじめに VSCode拡張のClineがシンプルなアーキテクチャで実現されていることを説明するために、VSCode拡張のAPIだけを使った「ワークスペース内のエラーが発生している箇所をLLMで自動修正する」タスクのみを実行する最小のClineを作りました。筆者はこれら知見を元に自作のコーディングエージェントのPoCをしています。 この記事のソースコード全文は以下のリンクにあります。 同じ拡張を最初から作る場合はまずプロジェクトを新規に始めてください。 min-cline概要 このVSCode拡張はMainコマンド「Run: mini-cline」が1つ定義されています。 min-clineの基本的な流れ Cmd+Shift+Pで"Run mini-cline"を実行する エディタのワークスペースで検出されているPROBLEMSを取得しプレーンテキストに整形 これをソースコードと共にプロンプ
> npm pack @anthropic-ai/claude-code > tar zxfv anthropic-ai-claude-code-0.2.9.tgz > cd package > ls LICENSE.md README.md cli.mjs package.json vendor yoga.wasm ❯ ls vendor/ ripgrep sdk
はじめに 大量のファイルがあるコードベースの中から関数やクラスの定義を抽出できるとそれをLLMのコンテキストに埋め込んでコード生成や読解、ドキュメント生成などに利用できます。 この記事では、Tree-sitterを使用してPHPコードから関数定義を抽出する方法を紹介します。 Tree-sitterとは Tree-sitterは高速な構文解析ライブラリで、多くのプログラミング言語に対応しています。Zedなどの多くのモダンエディタでも採用されている技術です。 実装例 Tree-sitterは各言語から呼び出せるバインディングが用意されています。 以下のNode.jsスクリプトは、指定されたディレクトリ内のPHPファイルから関数とクラスの定義を抽出します: 使い方 必要なパッケージのインストール:
Tauri入門にありがちな状況として「Rustの学習目的ではじめたのにフロントエンドのJavaScriptばかり書いている」というものがあります(GUIアプリなので……) そこでフロントエンドもRustで書くようにしたいと思い、Tauriに再入門することにしました TauriとLeptosの概要 Tauriでは以前からYewでフロントエンドを書く選択肢があったのですが、 v2.0でさらにLeptos(やSycam)がcreate-tauri-appのテンプレートに追加されているので使ってみます システムにtrunkがインストールされている必要があります。trunkはJavaScriptでいうviteのレイヤーです ❯ cargo create-tauri-app --beta -m cargo -t leptos -y tauri-app ❯ cd tauri-app ❯ cargo in
TypeScriptでMCPサーバーのtool呼び出しをする MCPサーバーのtool呼び出しをLLMにトリガーしてもらう を経てMCPを使い指示に従った操作をスクリプトで行えるようになりました。 次はFilesystem MCP Serverを利用して、特定のプロジェクトのソースコードを編集してもらいます。 指示に従って特定のディレクトリのコードを変更するので、これができると次は 指示の入力をSlackやGitHub Issue経由で実行する 結果をGitHub MCP ServerでGitHubのプルリクエストを自動で作る 状況をSlack MCP Serverで通知してもらう 以上をサーバー上でヘッドレスに動かす というコーディングエージェントの構築につながります。 mini-coder.ts ##テスト create-honoで作ったプロジェクトを変更していきます。 npm cre
Model Context Protocol (MCP) を使用してTypeScriptで特定のMCPサーバーのツールを呼び出す方法を説明します。 MCPサーバーの呼び出しは本来MCPホストとして機能するClaude DesktopアプリやZedの内部で透過的に実行されていますが、エディタのプラグインなどにMCPサーバー連携機能をつける時には複数のMCPサーバーへの接続管理と呼び出しを作る必要があります。 以下の例ではTypeScript SDKでMCPクライアントを使って、@modelcontextprotocol/server-memory パッケージで提供されるサーバーを呼び出します。 Client: MCPクライアントを作成するために使用されます。 StdioClientTransport: 標準入出力(stdio)を使用してMCPサーバーと通信するためのトランスポート層を提供しま
browser-useについて調査する どういうものか ブラウザのデバッグプロトコルを使ってLLMで操作するpythonライブラリ Playwright API → Chrome DevTools Protocol (CDP) ClaudeのComputer useのスコープを狭めたものと理解できる 似たツールとしてMCPのPuppeteerサーバーがある→mcp/puppeteer モデル(LLM)の呼び出しにLangChain Modelのインターフェイスに依存することでマルチプロバイダ対応してる なのでLangChainで動くモデルに対応してる 結果的にLangChain風のAgentフレームワークのミニマムな実装になってる 何ができるの? ブラウザ操作を自動化してできることはできる Hugging Faceで特定のライセンスを持つモデルを検索し、その情報をファイルに保存する 求人情
C# Dev Kit for Visual Studio Codeはdotnet newで作成したプロジェクトの初回Debug実行時に自動でlanuch.json, tasks.jsonを'.NET: Generate Assets for Build and Debug'で生成してくれるが、F#のプロジェクトはサポートしていません(検知に失敗する)。 Visual Studio 2022やRiderユーザーは気にしなくても自動で設定してくれるので、VS Code+F#の組み合わせで使っている人だけがビルド設定を手動で追加する作業が必要になります。 ❯ dotnet new create console -lang 'F#' -o MyConsoleApp ❯ cd MyConsoleApp ❯ dotnet run Hello from F# ❯ code . { "version":
趣味開発でマネージドデータベースに課金したくない勢に安DBソリューションとして好評だったlitestreamについての近況をまとめてみました。安DBという謎の用語は「運用コストが安いデータベース」の意味で今作りました。 軽くおさらいするとlitestreamはSQLiteのレプリケーションを実現するミドルウェアで[1]、LiteFSはそれを分散環境に拡張してスケールをしようとしたもの[2]。 LiteFS Cloudはサ終した litestreamの技術をマネージドサービスにしようとたくらんだLiteFS Cloudは[3]、有料版が始まったかと思ったらいきなり提供終了した。 全然利用されなかったことが理由のようだ。確かにLiteFS自体が実験的な段階のソフトウェアな上にConsulサーバーと連携したり使いこなすのは難しい印象があった。 LiteFS は開発停止してる LiteFS自体は放
TanStackのリポジトリを読んでいたらTanStack Startのドキュメントの最初のバージョンがpushされたようなのでチェックします。 TanStack Startとは TanStack Startは、TanStack Routerをベースにしたメタフレームワークとかフルスッタックフレームワークとか分類されるものです。 サーバーレンダリングされたReactアプリケーションを構築できて、TanStack Router、Nitro(サーバー用)、Vite(開発用)の上に構築されています。 Solid Startと同じくVinxiを基盤に開発されています。 ニーズとしてはクライアントサイドにRouterを使っているアプリケーションでサーバーサイドレンダリング(SSR)も必要になったタイミングで導入します。 サンプルアプリケーションはRouterとFormのリポジトリにあります。以下をブ
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
React Notes: MarkdownエディタのUIを作る 「React Notes」というReact Server Components(RSC)が発表された時期にReactチーム[1]やVercel[2]が公開していたブログ投稿デモサイトがあって、それをHotwireとHono/JSXで作ってみることでRSCなしに似たようなUXが作れるっていうのを示せるのではと思って、今クローンを作ってみています 現在はテキストエリアにMarkdownを入力するとプレビューをしてくれて、保存→更新の画面遷移がひととうりできるという部分のUIだけ先に試しに書いてみて以下にデプロイしました ソースコードがここにあります SSRな部分をHono/JSXのテンプレート処理系に寄せて クライアントサーバー通信と画面更新のコードはHotwire/Turboで簡略化 イベントハンドラな部分はHotwire/St
TL;DR Astro DBはDrizzle LibSQL(SQLite)互換 内部でAPIにSQLを送信している 仕組み上、Astroなしで無理矢理使うことができるがアンドキュメンテッドなのでお勧めしない Astro DBとは Astro DBはAstroが提供するフルマネージドなSQLデータベースです。Astro Studioというプラットフォームの一部で、Astroで構築するウェブサイトのバックエンドのDBとして利用できます。 ユースケースとしてはウェブサイトの問い合わせの保存先やコンテンツのマスターデータの管理などを想定していそうです 使い方は以下のドキュメントに載っています 静的なSSGでも動的なSSRでも使えます 以下のstudio-templatesリポジトリにサンプルプロジェクトがあります Astro DBのアーキテクチャ Astro DBはDrizzle ORMを拡張して
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
LLRT (Low Latency Runtime)はAWS Labsの人たちによって公開されたOSSで、 「v8やJSCよりミニマムなJavaScriptエンジン付けてLambdaにデプロイしたらめっちゃ速くなるんじゃない?」というようなコンセプトを持つ新しいJavaScriptコードのランタイムです QuickJS[1]というES2023準拠のJavaScriptエンジンとそのRustバインディングのrquickjsを使って全体的に構築されています(LLRTはES2020と明記されていますが) ECMAScript(ES)にはないNode.jsの標準API群が一部Rustを使って書かれています JavaScriptから呼び出せるモジュールを「LLRTからロードできるネイティブなESMモジュールを追加する」で示したとうり自作できるので、Web Standard APIs互換なウェブフレー
Cloudflare VectorizeはCloudflareがホストするVector database PineconeのようにHTTP経由で呼び出して使う Workers AIと組合せてllama-2とかでRAGを作ってくれという想定らしいけどホストされているText Embeddingsのモデルが英語用しかない 埋め込み表現に変換してVector databaseのAPIに投げるだけなので保存するデータはどのモデルを使っても問題はないのだけど、検索をする時にCloudflare Workersから使いたかったのでHTTP呼び出し可能なものにする 今回はOpenAIのtext-embedding-3の新モデルを試すことにした サンプルデータを登録してクエリで牽くという段階までは以下のドキュメントどうりに実行すると実現できるので省略する 今回は日本語検索をしたくてOpenAIのtext-
以下を満すようなツール (自分は)書き捨てHTMLを見やすく(pretty)する用途で使う ビルドツール不要 スタイル用にHTMLを修正しなくていい(class-less)
htmxの実装は4000行弱のJavaScriptファイルで、そんなに特殊なこともしていなかったので読みやすかった なんか懐しい感じがすると思ったけどjQuery世代の設計っぽい。変数がvarで定義されているし 全体 以下のようなDOMで考えてみる <body> <button hx-get="/clicked" hx-swap="outerHTML">Click Me</button> </body> ❯ curl http://127.0.0.1:8080/clicked <button hx-get="/clicked" hx-swap="outerHTML">Clicked!</button> querySelectorAll()でbody以下を探索してhx-*attributesが定義されたelementsにCustomEventhtmx:*のリスナーを追加 aタグやformタグ
$ git clone https://github.com/github/copilot.vim $ echo "console.lo" > sample.ts $ node getCompletionsCycling.mjs ./sample.ts Completions: { completions: [ { uuid: '3dcce22b-5656-46a3-bbe8-d204ad1c5259', text: 'console.log("Hello World");\n', range: [Object], displayText: 'g("Hello World");\n', position: [Object], docVersion: 0 }, { uuid: '94015891-20a7-4e84-a3b7-6ce0a44b5285', text: 'console.log
A global install cache. bun installを実行すると ~/.bun/install/cache/ 以下にnpmレジストリからダウンロードされたファイルの実体が展開されキャッシュされる(--cache-dirでパスを変更できる)。 キャッシュにはパッケージのバージョンごとのディレクトリとlatestのシンボリックリンクがある。これらのファイルを使ってbun install時に該当するバージョンのダウンロードを省く(--forceで再ダウンロードする)。 このため一度bun installしてlockfileが作成されると次はオフラインでinstallを実行しても成功する。 node_modules/を削除しても~/.bun/install/cache/からファイルを取ってくるのでネットワークアクセスをしない。
LiteFS+SQLiteでフルスタックNext.jsアプリケーションを作るから1年弱経過して、現在も1.0未満ですがいくつかの重要なアップデートがあったので共有します。 LiteFS Cloudの提供 2022年時点ではデプロイのタイミングなどでデータベースが吹き飛ばないようVolumeをアタッチして開発者が管理する必要がありましたが、Fly.ioによってLiteFS Cloudが提供されるようになり、バックアップ/リストアが自動化されました。 環境変数にLITEFS_CLOUD_TOKENをセットするだけで、LiteFSはFly.ioの外でセルフホストしつつバックアップにLiteFS Cloudを使うということも可能なようです。 内蔵HTTPプロキシ LiteFSは単一のプライマリノードのファイルシステムですべての更新操作を行うので、通常は複数ノードで動作する分散構成の場合はロードバラ
Function callingについて Chat Completions APIにFunction callingという機能が追加されて、入力テキストから実行する関数とパラメーターを生成できるようになった。 これによって開発者は Completions API(1回目)から返された関数とパラメーターを使って独自の処理を実行する 処理結果をCompletions API(2回目)にrole=functionにJSONでシリアライズして送信する APIからの応答テキストをユーザーに返す というフローが可能になる。 なので、ヘッドレスなChatGPT pluginsのように機能する(LangChainなどで連携方法を試行錯誤していた部分が一部取り込まれたともいえる)。 他の用途としては、「関数とパラメーターを生成」の部分のパラメーターをJSON Schemaとして指定できるので、プロンプトから
OpenAIのChat Completion APIでstream: trueに指定した時にSSEのレスポンスからコンテンツを逐次読み込みしてUIに反映させようとすると、意外に途中のパース処理に手間取ることが知られています。 JavaScript版openai-nodeモジュールのリポジトリにもissueがあるのですが、ユーザー間で試行錯誤しておりまだインターフェイスとして こなれていない印象です。 Cloudflare WorkersやVercel Edge FunctionのEdge Runtimeだとさらにややこしくて、openai-nodeはaxiosで作られたクライアントなのでそのまま動きません。 いろいろな回避策はあるのですが、今回は任意のモジュールを利用せずにAPIに直接リクエストを送信しつつストリーム形式のレスポンスに対応します。 Cloudflare Workers版 C
TLTR 実行時にNeon serverless driver(@neondatabase/serverlessモジュール)がnode-postgres(pgモジュール)内のSocketクラスをWebSocket実装に置き換える WebSocket接続を受けたneon.techサーバーがTCP接続に変換してPgBouncerに接続し応答する Neon serverless driverの解説記事が以下にあります。 Edge RuntimeでNode.jsのSocket APIがサポートされていない問題 Node.jsのORMライブラリはPostgreSQLへの接続にnode-postgresからSocket APIを呼び出しますが、Edge Runtimeは互換性の問題からそのままでは動作しません。 これに対して、各マネージドDBのプロバイダーは専用ライブラリを提供してHTTP経由でDBに
LangChainにContextual Compressionという抽象化が追加されました。概要は以下にあります。 Contextual Compressionは「インデックスするドキュメントのテキスト」と「プロンプトに含めるコンテキストとしてのテキスト」の性質が異る点に注目して、ドキュメント検索の後処理としてプロンプトに含めるテキストの内容に変換処理をかけて改善します。 前提知識 「LLMに質問の答えを生成してもらうためにコンテキストとして事前に検索したテキストをプロンプトに挿入する」という大枠の仕組みさえ知っていればokです。 最近読んだ以下のスライドが分かりやすかったです。 使うRetriever ドキュメント取得のRetrieverにはChatGPT Retriever PluginsをLangChainでデバッグするで作ったRetriverを利用します。 「最近話題になった英語
開発中にChat completion APIやEmbeddings APIを過渡に呼び出して課金されてしまうことを回避します。 また自動テスト内でOpenAI APIを呼び出す時も有効です。 OpenAI公式リポジトリにOpenAPI仕様書が公開されているのでStoplight Prismでモックサーバーを実行します。 > npm install -g @stoplight/prism-cli > prism mock https://raw.githubusercontent.com/openai/openai-openapi/master/openapi.yaml ❯ curl -X "POST" "http://127.0.0.1:4010/chat/completions" \ -H 'Content-Type: application/json; charset=utf-8'
次のページ
このページを最初にブックマークしてみませんか?
『laisoさんの記事一覧』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く