Aspicio

Aspicio はオープンソース（MIT）の TypeScript ファーストな図面エンジンです。ブラウザー、Node、サーバーレスランタイムで動作する、フレームワークに依存しない単一の parse → tessellate パイプラインを備えています。DXF と PDF のベクターコンテンツを読み込みます。ここでいう PDF は、スキャン画像ではなく、アートワークや抜き型線を含むものです。人は CAD 図面をインタラクティブな WebGL ビューアーで表示でき、AI エージェントは同じファイルから構造化 JSON の情報とレンダリング済み PNG を取得できます。ブラウザービューアー、Web コンポーネントとその React、Vue、Svelte バインディング、ヘッドレスレンダラー、HTTP API、MCP サーバーなど、すべてのインターフェイスは同じエンジンを基盤とする薄いアダプターです。そのため、どこでも同じように図面を読み取れます。

DXF / PDF bytes ─parse─▶ DrawingDocument ─tessellate─▶ Tessellation ──┬─▶ WebGL renderer (viewer)
                        (normalized model)   (batched geometry)       ├─▶ SVG string (export / API / MCP)
                                                                      └─▶ DrawingSummary (describe)

構築方法：docs/architecture.md · 動作仕様：docs/product-specs/

埋め込む

どの方法を選んでも、1 回の埋め込みですべての形式に対応します。以下のどの方法でも同じ Web コンポーネントをレンダリングするため、選択した方法にかかわらず、結果はピクセル単位で同一です。

Web コンポーネント — プレーン HTML、あらゆるフレームワーク

タグを 1 つ追加するだけで、レイヤーパネルとインタラクティブなプレビューを利用できます。バインディングは不要です。

<script type="module">
  import "@aspicio/elements";
  import "@aspicio/elements/formats/dxf";
</script>

<aspicio-embed src-url="/drawing.dxf" style="height: 480px"></aspicio-embed>

形式はインポートによって選択します。パッケージにはコンポーネントが含まれ、formats/* エントリにはパーサーが含まれます。これにより、DXF アプリにほかのすべての形式のコードが同梱されるのを防げます。以下のどの方法でも同様です。

React

@aspicio/react を使えば、慣用的な props と、ビューアー全体を公開する ref を備えた同じ埋め込みを利用できます。

import { AspicioEmbed } from "@aspicio/react";
import "@aspicio/react/formats/dxf";

<AspicioEmbed src={file} style={{ height: 480 }} />;

Vue

@aspicio/vue を使えば、型付きの props と emits、およびラップ解除済みのペイロードを利用できます。

<script setup>
import { AspicioEmbed } from "@aspicio/vue";
import "@aspicio/vue/formats/dxf";
</script>

<template>
  <AspicioEmbed src-url="/drawing.dxf" style="height: 480px" />
</template>

Svelte

@aspicio/svelte を使えば、型付きコールバック props を備えた、Svelte 5 のソースそのままの同じコンポーネントを利用できます。

<script>
  import { AspicioEmbed } from "@aspicio/svelte";
  import "@aspicio/svelte/formats/dxf";
</script>

<AspicioEmbed srcUrl="/drawing.dxf" style="height: 480px" />

Vanilla TypeScript

既製の UI を使わず、@aspicio/core からビューアーを直接操作できます。独自の UI をご用意ください。

import { DrawingViewer } from "@aspicio/core";
import { dxfParser } from "@aspicio/core/dxf";

const viewer = new DrawingViewer(document.querySelector("#preview")!, {
  parsers: [dxfParser],
});
await viewer.load(file); // File | Blob | ArrayBuffer | DXF text (ASCII or binary)

ヘッドレス — Node とサーバーレス

ブラウザーを一切使わずに解析、説明、レンダリングできます（サーバーサイドのプレビュー、サムネイル、パイプライン向け）：

import {
  describeDrawing,
  parseWith,
  tessellate,
  tessellateSpace,
  tessellationToSvg,
} from "@aspicio/core";
import { dxfParser } from "@aspicio/core/dxf";

const doc = await parseWith([dxfParser], bytes); // ASCII or binary DXF
const summary = describeDrawing(doc); // units, bounds, layers, texts, spaces…
const svg = tessellationToSvg(tessellate(doc)); // model space (a PDF's page 1)

// Multi-page PDFs and multi-sheet DXFs: describe covers all of them, and
// either verb can be scoped to one.
const page3 = describeDrawing(doc, { space: "Page 3" });
const sheet = tessellationToSvg(tessellateSpace(doc, "Layout1"));

できること：WebGL レンダリングをレイヤーごとに 1 回の描画呼び出しにまとめます（大きな図面もスムーズに操作できます）。幅広いエンティティに対応します（線、円弧、円、楕円、バルジ付きポリライン、スプライン、TEXT/MTEXT、DIMENSION、SOLID/HATCH 塗りつぶし、ネストされた INSERT ブロック。非対応のものはすべて件数を集計して報告し、処理を停止させることはありません）。実際に描画される色（レイヤーテーブルだけでなく、エンティティごとの上書きも含む）を表示するレイヤー一覧、オブジェクトスナップによる計測、エンティティの選択、ペーパースペースのレイアウト、SVG/PNG エクスポート、そしてタッチ操作に標準対応しています。対象外：編集と 3D。

エージェントに渡す

同じエンジンが MCP と HTTP に対応しているため、エージェントは図面を推測するのではなく、_読み取る_ことができます。

• describe_dxf — 単位、境界、サイズ、有効色付きのレイヤー、エンティティ数、図面内のテキスト内容を取得します。エージェントはタイトルブロックや寸法値を直接読み取れるため、OCR やビジョンによる往復処理は不要です。
• render_dxf — モデルが確認できる図面の PNG を取得します。
• view_dxf（ホスト型サーバー）— オープンな MCP Apps 拡張を介して、会話中の_人_が操作できるインタラクティブなチャット内ビューアーを表示します。パン、ズーム、レイヤーの切り替え、全画面表示、ホストのライト／ダークテーマに対応しています。ウィジェットはツール呼び出しで渡された図面に固定されており、ネットワークリクエストは行いません。MCP Apps に対応していないホストでも、構造化された情報を取得できます。

接続方式	ローカルファイル	URL	インライン DXF
stdio MCP — npx -y @aspicio/mcp	✅	✅	✅
ホスト型 MCP — aspicio-api.frontsail.app/mcp	—	✅	✅
HTTP API — /describe、/render	POST 本文	✅	✅

接続方法：

• Claude Code — 1 ステップで MCP サーバーと同梱スキル（aspicio-inspect-dxf、aspicio-embed）をインストールできます。 /plugin marketplace add frontsail-ai/aspicio の後に /plugin install aspicio@aspicio
• Codex — 同じリポジトリを Codex マーケットプレイスとしても利用できます。 codex plugin marketplace add https://github.com/frontsail-ai/aspicio、 codex plugin add aspicio@aspicio、続いて codex mcp add aspicio -- npx -y @aspicio/mcp
• stdio MCP サーバーを起動できる任意のクライアント — npx -y @aspicio/mcp を登録します。
• リモート MCP（Streamable HTTP）に対応する任意のクライアント — https://aspicio-api.frontsail.app/mcp を指定します（インストール不要。ブラウザーページではなく MCP として動作します）。
• 通常の HTTP — GET /describe?src=<dxf-url>、 GET /render?src=<dxf-url>&format=png|svg。API の仕様は /openapi.json で確認できます。

URL の取得には安全対策が適用されます（プライベートネットワークへのアクセスのブロック、サイズ上限、リダイレクトの検証、タイムアウト）。stdio サーバーはローカルファイルをプロセス内で読み取り、DXF を Aspicio のサービスにアップロードすることはありません。ただし、他のツール結果と同様に、MCP クライアントは返された概要や画像をモデルプロバイダーに渡します。詳しくは、プライバシーポリシー · 利用規約をご覧ください。

現在利用可能な機能 · 今後の方向性

上記の機能はすべてリリース済みで、現在利用できます。ビューアーとデモ、コア、Web コンポーネント、React、Vue、Svelte パッケージ、ヘッドレスの説明／レンダリング、stdio およびホスト型 MCP、チャット内 MCP Apps ビューアー、OpenAPI 対応の HTTP API、Claude Code と Codex 向けのプラグインパッケージを提供しています。

今後の方向性（予定であり、確約ではありません。issueを参照）：MCP レジストリへの掲載、構造化されたエンティティクエリと対象を絞ったレンダリング、リモート環境でローカルファイルを扱うためのアップロード機能。

パッケージ

パッケージ	説明
@aspicio/core	ビューアーライブラリ：解析、テッセレーション、レンダリング、カメラ、入力
@aspicio/elements	Web コンポーネント：<aspicio-embed>、<aspicio-preview>、<aspicio-layer-panel> — プレーン HTML、Svelte、あらゆるフレームワークに対応
@aspicio/react	React バインディング：<AspicioEmbed>、<AspicioPreview>、<AspicioLayerPanel>
@aspicio/vue	Vue 3 バインディング：型付きの props と emits を備えた同じ 3 つのコンポーネント
@aspicio/svelte	Svelte 5 バインディング：同じ 3 つのコンポーネントを生の .svelte ソースとして提供
@aspicio/mcp	AI エージェント向け MCP サーバー：describe_dxf + render_dxf
@aspicio/api	DXF HTTP API サーバー（非公開）：/describe、/render、/mcp
@aspicio/widget	チャット内で使う MCP Apps ビューアーウィジェット（非公開）。api サーバーが提供します
@aspicio/demo	単独で動作するデモアプリ（非公開）— リファレンス統合でもあります

ビューアーパッケージの連携方法：どのフレームワークを使う場合も、すべて同じ Lit Web コンポーネント、つまり埋め込み UI の単一実装に集約されます。これらはフレームワークに依存しないコアの上に構築されています。React、Vue、Svelte には、それぞれの慣習に沿った props を持つ薄いラッパーを提供します。プレーン HTML では elements を直接使用できます。

flowchart TD
    REACTAPP["React app"]
    HTMLAPP["Plain HTML / vanilla JS app"]
    VUEAPP["Vue app"]
    SVELTEAPP["Svelte app"]

    REACT["<b>@aspicio/react</b><br/>&lt;AspicioEmbed&gt; · &lt;AspicioPreview&gt; · &lt;AspicioLayerPanel&gt;<br/><i>thin @lit/react veneer, API-stable</i>"]
    VUE["<b>@aspicio/vue</b><br/>&lt;AspicioEmbed&gt; · &lt;AspicioPreview&gt; · &lt;AspicioLayerPanel&gt;<br/><i>thin Vue 3 veneer, typed emits</i>"]
    SVELTE["<b>@aspicio/svelte</b><br/>&lt;AspicioEmbed&gt; · &lt;AspicioPreview&gt; · &lt;AspicioLayerPanel&gt;<br/><i>raw Svelte 5 source, compiled by your bundler</i>"]
    ELEMENTS["<b>@aspicio/elements</b><br/>&lt;aspicio-embed&gt; · &lt;aspicio-preview&gt; · &lt;aspicio-layer-panel&gt;<br/><i>Lit web components — the one embed-UI implementation</i>"]
    CORE["<b>@aspicio/core</b><br/>parse → tessellate → render<br/><i>camera · input · picking · SVG/PNG export · headless describe</i>"]

    REACTAPP -->|"idiomatic props, ref → DrawingViewer"| REACT
    REACT -->|"wraps"| ELEMENTS
    HTMLAPP -->|"attributes + DOM events"| ELEMENTS
    VUEAPP -->|"idiomatic props + emits"| VUE
    VUE -->|"wraps"| ELEMENTS
    SVELTEAPP -->|"typed callback props"| SVELTE
    SVELTE -->|"wraps"| ELEMENTS
    ELEMENTS -->|"drives"| CORE
    HTMLAPP -.->|"or hand-rolled UI on the DrawingViewer API"| CORE

    classDef pkg fill:#191c22,stroke:#4c8dff,color:#e7e3da
    classDef app fill:#1f232b,stroke:#3a3f4a,color:#9aa0ab
    class REACT,VUE,SVELTE,ELEMENTS,CORE pkg
    class REACTAPP,HTMLAPP,VUEAPP,SVELTEAPP app

開発

ツールチェーン：Vite+（vp）を bun 上で使用します。

vp install       # install dependencies
vp run dev       # start the demo app
vp run ready     # check + test + build everything (the repo gate)

テスト、CI／デプロイ、リリース、コントリビューションのガイド： CONTRIBUTING.md。

---

Aspicio は FrontSail AI が開発・保守しています。