MCP Grareco: URL & Text to Dynamic Visuals

MCP Grareco: Seamlessly transforms any URL or text into dynamic Grareco visuals—effortless, powerful, and built for modern workflows.

Visit Repository

✨ Research And Data

4.9(170 reviews)

255 saves

118 comments

Ranked in the top 4% of all AI tools in its category

About MCP Grareco

What is MCP Grareco: URL & Text to Dynamic Visuals?

MCP Grareco is an advanced server solution designed to transform content from URLs or raw text into dynamic graphic recording visuals via the MCP protocol. This tool leverages AI-driven processing to convert textual information into structured HTML outputs with visual storytelling elements, offering a unique approach to content visualization for diverse use cases.

How to Use MCP Grareco: URL & Text to Dynamic Visuals?

Local Execution


# Installation & Setup
npm install
npm run build

# Start in STDIO mode
npm run start

# Start in SSE mode (recommended for real-time updates)
npm run start:sse

Claude Desktop Integration

Configure cline_mcp_settings.json with one of these methods:

Local Server Invocation

{
  "mcpServers": {
    "grareco": {
      "command": "npx",
      "args": ["-y", "mcp_grareco"]
    }
  }
}

HTTP/SSE Endpoint

{
  "mcpServers": {
    "grareco": {
      "url": "http://localhost:3000/sse",
      "timeout": 900
    }
  }
}

MCP Grareco Features

Key Features of MCP Grareco: URL & Text to Dynamic Visuals?

Context-Aware Conversion: Processes URLs/text into HTML-based graphic recordings with adaptive visual layouts
Multi-Purpose Prompts: Supports standard, elementary, and timeline presentation modes
Real-Time Progress: Sends incremental status updates via MCP protocol notifications
Environment Debugging: Built-in printEnv tool for server configuration diagnostics
Stability Monitoring: Randomized logging every 15s to ensure operational integrity

Use Cases for MCP Grareco: URL & Text to Dynamic Visuals

Meeting Documentation

Automatically generate visual summaries from meeting transcripts or shared URLs

Educational Materials

Create interactive lesson plans from raw course content or research papers

Project Reporting

Convert project documentation into visually organized status reports

MCP Grareco FAQ

FAQ: MCP Grareco Common Questions

How are processing times determined?

Execution duration depends on content complexity, with real-time progress updates provided via MCP notifications

What input formats are supported?

Accepts standard HTML, markdown, and plain text inputs from URLs or direct text fields

Can outputs be customized?

Visual structure is determined by selected prompt mode, but base HTML can be further modified post-generation

Content

MCP Grareco

グラフィックレコーディングを生成するためのMCPサーバーです。 MCPプロトコルの機能を活用して、任意URLや任意文字列の内容をグラレコ化します。

Components

Tools

echo

* 入力メッセージをエコーバックするシンプルなツール
* 入力: 
  * `message` (string): エコーバックするメッセージ
* 戻り値: エコーメッセージを含むテキスト

printEnv

* すべての環境変数を表示
* MCPサーバー設定のデバッグに役立つ
* 入力: なし
* 戻り値: すべての環境変数のJSON文字列

webToGrareco

* URLからWebサイトを取得し、グラフィックレコーディング形式のHTMLに変換
* 入力: 
  * `url` (string): 変換対象のWebサイトURL
  * `promptType` (enum: "standard" | "elementary" | "timeline", デフォルト: "standard"): 使用するプロンプトタイプ（標準、小学生向け、タイムライン）
* 戻り値: 生成されたHTMLファイルの保存パス
* 処理中は進捗通知を送信

textToGrareco

* テキストをグラフィックレコーディング形式のHTMLに変換
* 入力: 
  * `text` (string): 変換対象のテキスト
  * `promptType` (enum: "standard" | "elementary" | "timeline", デフォルト: "standard"): 使用するプロンプトタイプ（標準、小学生向け、タイムライン）
* 戻り値: 生成されたHTMLファイルの保存パス
* 処理中は進捗通知を送信

Logging

The server sends random-leveled log messages every 15 seconds, e.g.:

{
  "method": "notifications/message",
  "params": {
	"level": "info",
	"data": "Info-level message"
  }
}

使用方法

ローカルでの実行

# インストール
npm install

# ビルド
npm run build

# 実行(STDIOモード)
npm run start

# 実行(SSEモード)
npm run start:sse

Claude Desktopでの使用

cline_mcp_settings.jsonに以下を追加してください：

例1:

{
  "mcpServers": {
    "grareco": {
      "command": "npx",
      "args": [
        "-y",
        "mcp_grareco"
      ]
    }
  }
}

例2:

{
  "mcpServers": {
    "grareco": {
      "url": "http://localhost:3000/sse",
      "headers": {},
      "timeout": 900
    }
  }
}