訂正とお詫び（2025/11/09追記） 記事公開後、Playwright MCPコントリビューターのogadra様より、技術的な誤りをご指摘いただきました。深くお詫び申し上げます。 誤った記述 「Playwright MCPはAIがセレクターを自動生成する」 正しい動作 Playwright MCPもChrome DevTools MCPと同様に、スナップショットに含まれる識別子（ref）を使用して要素を特定します。 LLMはセレクターを生成していません mcp__playwright__browser_fill_formなどの関数呼び出し時、引数としてref（Chrome DevTools MCPのuidに相当）が渡されます 両MCPの要素識別方法に本質的な違いはありません 実際の違い 主な違いは以下の2点です： 操作の実行方法 Chrome DevTools MCP: CDP（Chr
https://ryoppippi.com を MCP サーバーとしてClaudeから参照している様子 ウェブサイトの内容をまるごとAIに参照させたい、そんな願いを叶えるツールがあります。 その名も sitemcp です。 このツールを使うと、任意のサイトのページをfetchして、MCPサーバーとして立ち上げることができます。 MCP サーバーとは MCPは「Model Context Protocol」の略で、AIアシスタントが外部データにアクセスするための仕組みです。要するに、AIに「このウェブサイト読んでね」とか「このファイル見てね」と渡せるようにするプロトコルです。 使い方 詳しいインストールの仕方は GitHub の README を見てください。 ここではClaude Desktopから使う方法を紹介します。 ...と言ってもそんなに難しいことはありません。 例えば、Daisy
はじめに 本記事の位置づけ 今回ご紹介する方法は、吉川聡史さんの記事の基本フローを踏襲しています。 吉川さんの記事では Claude を使ってデザインをHTML化し、プラグインでFigmaに戻すフローが紹介されています。 本記事も基本の流れは同じですが、AIツールを Cursor に置き換えて実装しています。 経緯・背景 私はエンジニアですが、UIデザインにも興味があり、新規プロジェクトのMVPデザインを担当することになりました。最初は、自分が想定している画面に合うUI kitを参考にしながらFigmaで作っていました。けれど、プロジェクトはスピード感を持って進める必要がある一方で、UIデザイン初心者の私にとっては効率が悪く、時間がかかっていました。 そこで選んだのが shadcn/ui Figma kit です。 よく使うコンポーネントが一通り揃っている デザインの統一感が保てる 実装コ
はじめに 個人開発をしていると、こんな悩みはありませんか？ 毎回 AI に同じ前提をコピペしている 仕様メモやテスト設計を残しても活用できていない ローカルに蓄積した知識と AI ツールをつなげたい そこでおすすめなのが、「Obsidian × Supermemory MCP」 のハイブリッド運用です。 この記事では、個人開発における実際の使い方とメリットを紹介します。 Obsidian とは？ Markdown ベースのノートアプリ 完全ローカル保存（安心して使える） プラグインで LLM 連携やベクトル検索も可能 個人開発においては、「知識の資産化」 として最適です。 Supermemory MCP とは？ Claude / Cursor / Gemini CLI など 100+ AI クライアント対応の MCP サーバ URLを登録するだけで即利用可能（ホスト版あり） Notion
はじめに こんにちは！令和トラベル Frontendエンジニアのふくだです。 「Figma MCPを使っているけれど、生成されるコードの精度がイマイチ...」 そんな悩みを抱えていませんか？ 本記事では、実際にFigma MCPを使ったコード生成を体験し、そこから段階的に改善していく過程を詳しく解説します。セットアップから始まり、失敗例の分析、具体的な改善手法、そして最終的なベストプラクティスまで、実践的なアプローチでFigma MCPのポテンシャルを最大限引き出す方法をお伝えします。 事前準備 検証環境 Figmaデスクトップアプリ（Web版では利用できないので注意） MCP対応エディタ（VS Code, Cursor, Windsurf, Claude Code等） Next.js 14+ (App Router) TypeScript、Tailwind CSS
はじめに Verylとは現在開発中の新しいハードウェア記述言語です。 最近Model Context Protocol(MCP)なるものが流行っているようで「Verylでも対応すると面白いかな」などと思っていたところ、lsmcpというツールが登場しました。これはMCP経由でLanguage Serverに対してリクエストを投げられるもので、LSPに対応した任意の言語で利用することができます。（原理的には。実際にはLSP実装毎の挙動差などで苦労されているようです…） 今回VerylのLSP実装であるveryl-lsをlsmcpから呼ぶことができたので、Claude CodeにVerylのコードを書かせてみました。 準備 現在のリリースされているveryl-lsのv0.16.3にはバグがあってlsmcpと連携させることができません。手元でビルドするか、（2025/08/16以降の）最新のnig
※この記事は、AIで生成したフィクションのキャラクター「ダウナー系お姉さん」の視点で書かれています。登場する人物・事例もAIで生成した100%架空のものですが、技術的な内容は実際に使用可能です。 はぁ...また夜更かししちゃった。タバコとコーヒーだけで生きてる気がする今日この頃。 でもね、今日は珍しく良いもの見つけたから記事書いてあげる。Claude Code使ってn8nのワークフローを自然言語で作れるっていう、まあまあ使える話。 なんでこんなことしようと思ったか Claude Code推進してる会社多いでしょ？「Webアプリのデモ作ってすごいね〜」で終わってない？正直、それじゃあんまり楽になんないよね。 実際の業務に使えないと、ただの高級なおもちゃ。というわけで、業務自動化の定番n8nと組み合わせてみたら、意外と良かったって話。 ちなみにこれ使うやつ： ...真面目に読んでる？まあいいや
使ってみた テストとして 3 つお題を用意しました。 状況としてはメールでお客様から連絡いただいた一次情報をイメージしています。 それぞれお題とClaude Codeによって出力された結果、またそれに対する評価を記載していきます。 またClaude Codeとのやり取りは一回のみとし、初回の回答内容を評価していきます。 お題 1. 3 層 Web アプリケーションの本番環境構築 お題 EC サイトを立ち上げたいんです。フロントエンド、API、データベースの 3 層構成で 商品画像とかもあるので、CDN も使いたいです 同時接続ユーザーは 1000 人くらいを想定してます 月間 PV は 1000 万くらいかな？でも季節変動があるので、12 月とかは 5 倍くらいになるかも データベースは 500GB くらいから始めて、年 20% くらい増えていく予定 セキュリティは重要なので、WAF とか
前回は TS に特化した MCP サーバーを作ったが、今回 LSP (Language Server Protocol) を使って任意の言語に対応できるように一般化するのに成功した。 https://github.com/mizchi/lsmcp TL;DR typescript-mcp の TypeScript 特化機能を LSP ベースに一般化 Rust、Python、Go、Moonbit など任意の LSP と連携可能 npx -y @mizchi/lsmcp --bin="rust-analyzer" のように LSP プロセスを握って起動するので、任意の言語に対応可能 (実際にリネームや Auto Import のような各コマンドに対応する操作ができるかは、LSP 側の実装に依存) 実際に Rust プロジェクトで動いている例： # Rust でのシンボルリネーム ● lsmcp
Visual Studio Code、厳選したMCPサーバーの一覧ページを公開 ——一覧ページ上からのワンクリックインストールにも対応 Visual studio Code（以下VS Code）は6月19日、MCPサーバーをVS Codeにワンクリックでインストールできる、厳選したMCPサーバーの一覧ページを公開した。 MCP Servers for agent mode - Visual Studio Code We've launched a new page with a list of MCP servers that work great in @code with one-click install:https://t.co/ONVay2aEGj https://t.co/24pZ2H1AGh — Pierce Boggan (@pierceboggan) June 19
背景 MCP(Model Context Protocol)を使う上で、ローカルMCPサーバやリモートMCPサーバ、更にはそれらを集中管理するゲートウェイ的なサービスもあったりと複雑だと感じたので、それぞれのパターンを一度洗い出してみました。 事前知識 MCP(Model Context Protocol)とは MCPとは AI <-> 外部データソース連携 の為の標準規格で、Claude Codeを出しているAnthropicが標準化しました。 MCP Clientの例 よくある例は次のようなAIエディターです。 Cline(VS Code) Cursor Claude Code Windsurf もちろん自前でMCP Clientを作ることも可能です。 生成AIを組み込んだチャットボットなどが外部リソースにアクセスしたいときなどですね。 MCP Serverの例 開発でよく使われる例と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
