Cline + MCP(Firecrawl)で作業内容を自動把握！LangSmith導入の巻🚀

はじめに

みなさん、こんにちは！今日は、MastraプロジェクトにLangSmithを導入した話をしたいと思います。特に面白かったのが、Cline（AIアシスタント）とMCP（Model Context Protocol）を使って、作業内容を自動的に把握できた点です！

🤖 Clineに作業内容を理解させる

まず最初に、以下のURLの内容をClineに理解させる必要がありました：

https://mastra.ai/docs/reference/observability/providers/langsmith

ここで活躍したのがFirecrawl MCP！FirecrawlのScrapeツールを使って、Clineが自動的にドキュメントの内容を取得・解析してくれました。これ、めっちゃ便利です！

// Firecrawlを使ったドキュメント取得
<use_mcp_tool>
<server_name>github.com/mendableai/firecrawl-mcp-server</server_name>
<tool_name>firecrawl_scrape</tool_name>
<arguments>
{
  "url": "https://mastra.ai/docs/reference/observability/providers/langsmith",
  "formats": ["markdown"],
  "onlyMainContent": true
}
</arguments>
</use_mcp_tool>

🔧 具体的な作業手順

Clineが内容を理解した後、以下の手順で実装を進めてくれました：

1. 環境変数の確認

.env

# .env.development
LANGSMITH_API_KEY=lsv2_pt_******
LANGSMITH_PROJECT=mastra-study
LANGSMITH_ENDPOINT=https://api.smith.langchain.com
LANGSMITH_TRACING=true

1. 必要なパッケージのインストール

npm install langsmith

1. Mastraの設定更新

// src/mastra/index.ts
import { Mastra } from '@mastra/core/mastra';
import { createLogger } from '@mastra/core/logger';
import { AISDKExporter } from "langsmith/vercel";
import { weatherWorkflow } from './workflows';
import { multiAgent } from './agents';
import { mcpAgent } from './agents/mcpAgent';

export const mastra = new Mastra({
  workflows: { weatherWorkflow },
  agents: { multiAgent, mcpAgent },
  logger: createLogger({
    name: 'Mastra',
    level: 'info',
  }),
  telemetry: {
    serviceName: 'mastra-study',
    enabled: true,
    export: {
      type: 'custom',
      exporter: new AISDKExporter(),
    },
  },
});

🎯 Cline + MCPのすごいところ

今回の作業で特に印象的だったのは：

1. 自動ドキュメント解析: FirecrawlのMCPを使って、Clineが自動的にドキュメントを理解
2. 環境チェック: 既存の環境変数や設定を自動で確認
3. コード変更の提案: 必要な変更を具体的に提示

📝 まとめ

Cline + MCPの組み合わせを使うことで、ドキュメントの理解から実装まで、スムーズに作業を進めることができました。特にFirecrawlを使ったドキュメントの自動解析は、作業効率を大きく向上させてくれます。

これからもClineとMCPを活用して、効率的な開発を進めていきたいと思います！🚀

参考リンク

• LangSmith公式ドキュメント
• Mastra Documentation

人間による補足

ここまでは、Taskの内容をもとに、Clineに記事の内容を自動生成してもらっていました。
ここから先は、人間が記述しています。

今回の題材

今回の題材としては、Mastraというツールで作られた、Agent+MCPの処理に対して、内部的にどのような挙動をしているのか？を把握するために、LangSmithを組み込むというものでした。

ベースの部分は、ニケちゃんのMastraでMCP連携できるAIエージェントを作ろうをまるっと使わせていただきました！
素晴らしい記事をありがとうございました。

ツールの動作

ツール自体は、以下のように動作します。
Mastraは新しいツールなので、Sonnetは知りません。
そこで、MCPを使ってWeb検索(こちらはBraveSearch)をしてその内容をもとに回答してくれます。

LangSmithのログ

今回、LangSmithで内部のトレースができるようになりました。

LLMによるMCPツール呼び出し

MCPツールの動作

所感

今回のLangSmith追加は、Mastraのドキュメント自体が非常にコンパクトかつわかりやすく書かれていることもあり、Cline+MCP(Firecrawl)であっという間にコーディングができました！

この作業スタイルはかなり生産性があがりそうなので、今後色々と試してみたいです！！