Aspicio

Aspicio Drawing understanding for people, applications, and AI agents — DXF and vector PDF. Aspicio (Latin: "I look at")

▶ Live demo

Aspicio is an open-source (MIT), TypeScript-first drawing engine: one framework-free parse → tessellate pipeline that runs in the browser, in Node, and in serverless runtimes. It reads DXF and the vector content of PDF — the kind of PDF that carries artwork and dielines rather than a scan. A person gets an interactive WebGL viewer of a CAD drawing; an AI agent gets structured JSON facts and a rendered PNG of the same file. Every surface — the browser viewer, the web components and their React, Vue, and Svelte bindings, the headless renderer, the HTTP API, and the MCP server — is a thin adapter over the same engine, so a drawing is equally readable everywhere.

DXF / PDF bytes ─parse─▶ DrawingDocument ─tessellate─▶ Tessellation ──┬─▶ WebGL renderer (viewer)

(normalized model) (batched geometry) ├─▶ SVG string (export / API / MCP) └─▶ DrawingSummary (describe)

How it's built: docs/architecture.md · behavior specs: docs/product-specs/

Embed it

One embed, every flavor — and every path below renders the same web components, so the result is pixel-identical no matter which you pick.

Web components — plain HTML, any framework

One tag gives you the layer panel plus an interactive preview; no bindings needed:

<script type="module">

import "@aspicio/elements"; import "@aspicio/elements/formats/dxf";

Formats are opted into by import: the package brings the components, the formats/* entry brings the parser. That is what keeps a DXF app from shipping every other format's code — and every flavor below does the same.

React

The same embed with idiomatic props and a ref exposing the full viewer, via @aspicio/react:

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

import "@aspicio/react/formats/dxf";

;

Vue

Typed props and emits with unwrapped payloads, via @aspicio/vue:

<script setup>

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

Svelte

The same components as raw Svelte 5 source with typed callback props, via @aspicio/svelte:

<script>

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

Vanilla TypeScript

Skip the ready-made UI and drive the viewer directly from @aspicio/core — bring your own chrome:

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)

Headless — Node and serverless

Parse, describe, and render with no browser at all (server-side previews, thumbnails, pipelines):

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"));

What you get: WebGL rendering batched to one draw call per layer (large drawings stay interactive), broad entity coverage (lines, arcs, circles, ellipses, polylines with bulges, splines, TEXT/MTEXT, DIMENSION, SOLID/HATCH fills, nested INSERT blocks — anything unsupported is counted and reported, never fatal), a layer list with the colors that are _actually drawn_ (per-entity overrides included, not just the layer table), measure with object snap, entity picking, paper-space layouts, SVG/PNG export, and first-class touch. Out of scope: editing and 3D.

Hand it to an agent

The same engine speaks MCP and HTTP, so an agent can _read_ a drawing instead of guessing at it:

• `describe_dxf` — units, bounds, size, layers with effective colors, entity counts, and the drawing's text content. An agent reads a title block or a dimension value directly — no OCR, no vision round-trip.
• `render_dxf` — a PNG of the drawing the model can look at.
• `view_dxf` (hosted server) — an interactive in-chat viewer for the _person_ in the conversation, via the open MCP Apps extension: pan, zoom, layer toggles, fullscreen, host light/dark theming. The widget is locked to the drawing the tool call delivered and makes no network requests; hosts without MCP Apps still get the structured facts.

Connect:

• Claude Code — one step installs the MCP server plus the bundled skills (aspicio-inspect-dxf, aspicio-embed): /plugin marketplace add frontsail-ai/aspicio then /plugin install aspicio@aspicio
• Codex — the same repo doubles as a Codex marketplace: codex plugin marketplace add https://github.com/frontsail-ai/aspicio, codex plugin add aspicio@aspicio, then codex mcp add aspicio -- npx -y @aspicio/mcp
• Any client that launches stdio MCP servers — register npx -y @aspicio/mcp
• Any client that supports remote MCP (Streamable HTTP) — point it at https://aspicio-api.frontsail.app/mcp (no install; speaks MCP, not a browser page)
• Plain HTTP — GET /describe?src= , GET /render?src= &format=png|svg; the API self-describes at /openapi.json

URL fetches are guarded (private-network blocking, size caps, redirect validation, timeouts). The stdio server reads local files in-process and never uploads the DXF to any Aspicio service — though, as with any tool result, your MCP client passes the returned summary or image to its model provider. Full details: privacy policy · terms.

Available today · direction

Everything above is shipped and live: viewer + demo, core, web components, React, Vue, and Svelte packages, headless describe/render, stdio and hosted MCP, the in-chat MCP Apps viewer, the HTTP API with OpenAPI, and plugin packaging for Claude Code and Codex.

Direction (intent, not commitments — see issues): MCP registry listings, structured entity queries and focused rendering, and an upload flow so remote surfaces can handle local files.

Packages

How the viewer packages fit together: every framework path funnels into the same Lit web components — one implementation of the embed UI — which sit on the framework-free core. React, Vue, and Svelte get thin veneers with idiomatic props; plain HTML consumes the elements directly.

flowchart TD

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