ClaudeCodeで始めるProseMirror
リッチテキストエディタのProseMirrorは、ライブラリ知識もそうですが、カスタマイズでの動作検証等で相応に時間が掛かってきます。ClaudeCodeを通して試してみたところ、AIからのProseMirrorに関する指摘については一定の知識が必要ながらも独自の機能実装を行うことができました。
プロンプトによる指示で実装が的確に行われるために必要となった設定についてのまとめとなります。
必要な設定
実装が的確に行われるためにはライブラリの扱い方をClaudeCodeに認識してもらう必要があります。今回はContext7上からProseMirrorを参照させました。
Context7はサイト上にて「Free for personal use」と出ていますが、upstash及びcontext7のcofounderであるEnes Akar氏より9月に以下の告知が出ています。
開発者向けにContext7を無料で継続提供となり、企業向けにプライベートリポジトリの隔離とチームサポートを有料プランで追加となっています。
ここでプライベートリポジトリとされているものは、GitHubやGitLab等のリポジトリサービス内にあるプライベートリポジトリが該当します。Context7アカウントにて参照指定したリポジトリは、Context 7 MCPサーバ経由でアクセスすることが可能になりますが、有料プランを契約することでプライベートリポジトリも対象となります。
つまり、プライベートで運用しているリポジトリへのアクセスが不要である場合はビジネス目的でも無料でContext7が利用できるということです。
MCPサーバ設定
Context7のMCPサーバ設定についてはプランによる違いがありません。無料プランであればCONTEXT7_API_KEYの指定は不要です。
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"],
"env": {
"CONTEXT7_API_KEY": "YOUR_API_KEY"
}
}
}
}
リファレンスをSerenaメモリへ記録
Context7上のProseMirrorのリファレンスは都度取得するとTokenがあっさり枯渇します。とはいえClaude.mdへ追記すると圧縮頻度が著しくなるため、Serenaメモリへの記録が必須です。
Serenaメモリの参照時にも受け取れるバッファ上限があるため、取得したリファレンスによっては分割する必要があります。Claude.mdの設定にもよりますが、現在手元では4つのメモリに分割されています。
- prosemirror_editor_color_specification.md
- prosemirror_format_removal_specification.md
- prosemirror_markdown_implementation_guide.md
- prosemirror_yjs_integration_reference.md
恐らくは以下のプロンプトで問題ないでしょう。
Context7でProseMirrorを参照して、Serenaメモリに記録して
プロンプトによる実装
基本的にはClaudeCodeがプロンプトを元にいい感じの実装をいれてくれます。問題となるのは恐らくMarkdownとの変換でしょう。
いくつかのライブラリを試すことになりましたが、markdown-itにて安定した結果を得られています。
動作検証
Playwrightの併用をおすすめします。WISYWYGへの入力は元より、Chromeのコンソール出力も参照してくれるため、手動によるエラーログのClaudeCodeへの手渡しの手間も減らせます。
あとがき
ProseMirrorに関する知識は以下のガイドを参考としました。
足掛かりができるまでは大変かもしれませんが、一度設定が出来上がることでプロンプトベースでの開発が可能になるでしょう。
なお、各種SaaSとの連携を実施する最中に発生したエラーメッセージへの解決は、ClaudeCodeのみならずGeminiの併用もおすすめします。
