🫠

自作のAIにソースコード投げるやつをnpmに公開した

2025/01/10に公開

https://zenn.dev/yamadashy/articles/ai-tool-repomix-5000-star#cli実装
たまたまTwitterで流れてきたこの投稿を見て、自分も似たようなもの作ってんだよな、やっぱり同じ考えの人って多いんだな~と思いつつ、「えっファイルの指定できないん!?!?」という驚きが。

そして上記リンクの方がまとめてくださっている類似のプロジェクトと比較しても、自作したものはカスタム性こそショボいもののClaudeから利用した際の利便性は負けてないなと感じたので、いろいろ調べつつnpmに公開してみました。

githubもほとんどprivate、ろくにプルリクを送った経験もない素人なのでいろいろ見苦しい点があるとは思いますがご容赦ください。

概要

リンク先の方のrepomixと同じく、Web版のClaudeなどに開発中のファイルをポチポチアップロードする手間を省くためのモノです。
特徴としては、nodeによってサーバーを内部で立たせURLからクエリ付きでアクセスすることで、中身を表示するファイルを絞ることができる点です。これにより、AIがファイル一覧から必要なファイルを考え、ユーザーにクエリ付きのURLを渡すことで簡単にコピペができます。

ここら辺も素人で説明があやふやですし眠い(現在3:50)ので、もう見てもらったほうが早いでしょうか。


適切なシステム指示を入れておくことでURLをリクエストさせ、ユーザーはそのURLを開き、表示されている項目をコピーしてチャット画面に戻りペーストする、という2ステップで完結するのが魅力です。

多分やっていることはclineとかと似ているんでしょうけど……。

ほとんどの項目をAIに作らせたので、CLIモードも実装しています。自分ではほとんど使っていませんが。

リンク

https://github.com/chiepu3/mds-bridge
https://www.npmjs.com/package/@chiepu3/mds-bridge

使いかた

npm install -g @chiepu3/mds-bridge

詳しくはこれも7割作らせたreadmeを参照してほしいですが、プロジェクトのルートで「mds-server」を打ち込みサーバーを起動させれば終わり。
--portでポート番号も指定できるので、任意のプロジェクトのフロントエンドとバックエンドのソースコードをそれぞれ同時に参照できるようにすることも可能です。

自分はClaudeのカスタム指示にこんな感じで書いています。

ソースコードを出力する際は、先頭にsrc以下のファイルパスを書いてください。

また、このプロジェクトはこれまで、フロントエンドあるいはバックエンドのすべてのソースコードを常にAIに渡していましたが、開発が進むにつれてトークン量が莫大になったため、あなたが会話開始時点や必要な際にファイルの内容を要求するシステムに変更されました。
会話開始時点で、どのようなファイルが必要そうかを考え、Directory Structureから適切なファイルの中身を要求させることができます。もちろん、会話の展開によって新たに必要になったファイルの中身をあとから要求することもできます。

それぞれで参照したいファイルがある場合、ユーザーに以下のURLへアクセスさせてください。
例: 
src/main.tsxおよびsrc/components/以下のすべてのファイルを取得したい場合、
http://localhost:3000/view/summarize?patterns=src/main.tsx,src/components/**/

利用できる組み合わせ
ファイル単体の指定: src/main.tsx
それ以下のフォルダ・ファイルすべて: src/components/**
不必要なミスを避けるため、少しでも必要そうだと思ったファイルはすべて取得するようにしてください。
/**/*という方法で指定しないでください。
ファイル構造の取得方法
http://localhost:3000/view/structure

バックエンドプロジェクトを取得する場合はポート 5120に、フロントエンドにアクセスするにはポート 3000を指定してください。

一つのURLで、ユーザーがクリックして開ける形式にしてください。
存在しないファイルの指定を行わないでください。
※必ず、必要なソースコードをユーザーから提供されたことを確認してから、コーディングを始めてください。コーディングを始める前に、必要なファイルを参照したか自問自答してください。

あとは、directory structureをproject knowledgesに入れておけばOK。ファイル構造がコロコロ変わるときは入れなくてもいいけど、それだと毎回ファイル構造の取得を要求されるのが面倒だったりする

今後

今はこれで十分満足しているしほかにやらねばならないことが山積み(本題を効率よくやるために作ったシステムでもあるわけだし)なので、とりあえず公開しただけにとどめておきます。
アイデア勝負みたいな感じではありますが、使ってもらえたら嬉しいです。バグがあっても怒らないで、ょわょわなので…

Discussion