2025年春ハッカソン5班「asQ」です。
今回私たちは、部内SNSやイベント情報、wikiなどの情報を言語モデルに渡すことで、部員しか見ることのできない情報に基づいて回答をするチャットAIを提供するウェブアプリケーションを作りました。
つくったもの
traP-jpユーザーはチャット画面から、traPに関することをAIに質問することができます。AIにはそれぞれ性格があり、好きな相手に質問できます。
チャットは同時に複数人で利用でき、質問の内容がリアルタイムに反映されるようになっています。
バックエンドからAIにプロンプトを送っていて、使えるツールとしてMCPサーバーのURLを渡しています。traPに関する質問をするとAIがいい感じにこのMCPサーバーを使って、traPの情報をコンテキストに含めてくれます。
開発について
準備期間
今回のハッカソンは、準備期間一週間＋開発期間二日間というスケジュールでした。
準備期間では、部内Wikiや部内SNSからデータを取得し、部内で散らばった情報をAIを用いて"いいかんじに"取得できるサービスにしようということが決定しました。さらに「プロンプトで性格を付けたら面白そう！」というアイデアが出て、これも組み込まれることになりました。
実際の開発を行う前に練習で何か作りたいということになり、traQの自分のtimesの最初の10件をとるというサービス(うぶごえチェッカー)を作りました。(バックエンド: y_33550336、フロントエンド: minaさん)
pirosikiさんとmumumuさんがそれぞれバックエンドとフロントエンドのサポートをしてくれて、無事に完成させることができました。
本番の前日にこのサービスを作ったのですが、初めてのタスクにとてもちょうどよく、本当に良い練習となりました。
技術選定はtraPでよく見る構成です。フロントエンドはVue、バックエンド・MCPサーバーはGo、デプロイ先はNeoShowcaseです。LLMのモデルにはgpt-4oを選びました。
当日
今回のサービスはAIに質問するチャット型の検索システムで、一つのチャットに複数人が同時に参加できるようになっています。chatGPTのように返答が少しずつ生成されている部分にはSSE(Server Sent Events)を使用しました。これにより表示が滑らかになり、会話中の待ち時間が少なくストレスなくやり取りできるチャットになりました。
また、チャットルーム内でのイベントの配信(誰かが質問を開始した、AIがレスポンスを始めた、など)にもSSEを使用しました。
MCPサーバーはtraQと部内でホストされているCodiMDから情報を取得して、その内容を公開するようにしています。具体的には、traQのAPIから取得した情報のIDを名前に変換したものや、CodiMDのタイトルから検索できるようなものなどを提供しています。ハッカソンということもありパフォーマンスに対する配慮ができていないので、トークン数の削減が今後の課題です。
感想
y_33550336
バックエンドを担当しました！自分は前日まで本当に何も分からず、正直「エンドポイント？？API？？」という感じでした…
本番の前日に練習としてうぶごえチェッカーというサービスを作ったのですが、初めてのタスクにとてもちょうどよく、本当に良い練習となりました。考案してサポートしてくれたpirosikiさんに感謝です！
さらに当日でも、pirosikiさんが分かりやすく教えてくれながらちょうど良いタスクを振ってくれたおかげで、少しずつ理解してAPIの半分を実装できました！前日にやったことがめちゃくちゃ活かされました…！
戦力になったかは微妙かもしれないけど、成長できてとても楽しかったです！しかも企業賞までいただき、すごいサービスを作った担い手となれてうれしいです！
良いチームメンバーに恵まれて充実したハッカソンとなりました！
kaomojikun
フロントエンドを担当しました。ウェブ開発してみたいなぁという漠然とした気持ちしか持っておらず、前日まで何もわからないという状態でした。ですがmumumuさんが教えながら、適度なタスク配分をしてくれたおかげで、なんとか実装することができました。
自分の実力を身につけることができたのみならず、企業賞までいただくことができ、良いチームメンバーに恵まれたことをとても嬉しく思います。ウェブ開発をする大変良い経験になりました。
mina
フロントエンドを担当しました！HTMLもCSSも触ったことのない完全初心者でしたが、事前学習の時からmumumuさんに色々教えてもらったり励まされたりして、楽しく開発することができました。
自分が関わったものが多くの人に使ってもらえて感動しました。ふと口にした案がそのままサービス名になったり、5分で作ったアイコンが実際に画面に表示されているのも嬉しかったです。
ハッカソンに参加してよかったです。関わってくれたみなさんに感謝！
takino0309
バックエンドを担当しました。MCPサーバーのことをほとんど理解していない状態で、不安が大きかったですが、comaさんに手取り足取り教えていただき、どうにか振られた仕事を処理することができました。初めてのハッカソンというイベントでとても充実した有意義な経験をできたと思います。ありがとうございました
pirosiki
バックエンドを担当しました。ハッカソンに参加するのはこれで5回目ですが、やはりチームのみんなで1つの作品を作るというのは楽しいですね。
自分が担当したチャットルーム周りは非同期処理がコアになっていて、AIからのレスポンスをうまいことチャットルーム内の全員にリアルタイムで配信するのが難しかったです(ハッカソン中には終わらなかった...)。延長戦でなんとかうまいこと実装することができて、技術的にも面白かったです。
mumumu
フロントエンド担当でした僕が一番最初に行ったWeb開発は去年の春ハッカソンだったので、このハッカソンでちょうど一年になりました。
気付けば”中級者枠”に昇格し、今回は初心者の方2人と3人でフロントエンドを担当することになりました。タスクを上手く割り振れるか、質問に上手く答えることが出来るかどうか内心ヒヤヒヤでしたが初日は比較的スムーズに進めらました。
ところが二日目は時間的に完成が怪しくなってきて、焦りから質問に十分に答えられなかった場面もあり少し申し訳なさも感じています。
(かなりぎりぎりで試遊会が始まってもまだビルド中でした......)
とはいえ初心者の二人が頼んだタスクを全ていい感じにやってくれてすごく助かりました。たとえば「optionでいいよ」と仕様mdに書いただけなのにレスポンシブ対応までしてくれたり、大雑把な指示からでもちゃんと形にしてくれたりと、思っていた以上の頼もしさに驚きと感謝の二日間でした。
今年はビビってしまいましたが来年はリーダーをやります！！！！！！！
comavius
リーダーです。MCPサーバーを担当しました。メンバーに恵まれてうまいことチームが回ったので助かりました。
MCPサーバーを作るのは今回が初めてだったということもあり、開発前はモデルがMCPをいい感じに読んでくれるか心配だったのですが、案外簡単に動いたので拍子抜けしました。また、今回はmcp-goというライブラリを使ったのですが、ハッカソン翌週の木曜日に公式からgo-sdkが出たので、今後goでMCPサーバーを作る人はこちらを使ったほうがいいと思います。
終わりに
協賛のナレッジワークさんから企業賞をいただきました。やった〜
