[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_135":136},"routes/modules.$creator.$moduleId",{"_14":15,"_16":17,"_18":19,"_20":21},"routes/modules.$creator.$moduleId.endpoints",{"_11":12,"_13":-5},"error","Module not found","tools","module",{"_20":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":26,"_36":37,"_38":-5,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_57":49,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":49,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":-5,"_81":-5,"_82":49,"_83":-5,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95},"apiUrl","https://odel.app/api","creator","frontsail-ai","moduleId","aspicio","@frontsail-ai/aspicio","displayName","Aspicio","tagline","DXF and PDF/X-4 for AI agents: structured facts, PNG renders, an interactive in-chat viewer.","iconKey","https://aspicio.frontsail.app/favicon.svg","category","remote","status","published","visibility","public","metaDescription","deploymentType","external","workerName","bindingName","mcpConfig","{\"url\":\"https://aspicio-api.frontsail.app/mcp\",\"transport\":\"streamable-http\",\"authType\":\"none\"}","pricingModel","free","creatorUserId","system:external-import","createdAt",1784781222000,"updatedAt",1788329799000,"sourceRegistry","official-mcp-registry","sourceUrl","https://registry.modelcontextprotocol.io/v0/servers?search=io.github.frontsail-ai%2Faspicio","sourceVerified",true,"sourceMissingSince","importedAt","upstreamStars",4,"upstreamUpdatedAt",1788142590000,"detectedTransport","streamable-http","detectedAuthType","none","probeStatus","ok","lastProbedAt","githubRepoUrl","https://github.com/frontsail-ai/aspicio","githubRepoFullName","frontsail-ai/aspicio","releaseId","ext-frontsail-ai-aspicio","version","0.13.0","descriptionMarkdown","

\n $\"Aspicio$ \n

Aspicio

Drawing understanding for people, applications, and AI agents — DXF and vector PDF.

Aspicio (Latin: \"I look at\")

\n $\"CI\"$ \n $\"npm:$ \n $\"npm:$ \n $\"npm:$ \n $\"npm:$ \n $\"npm:$ \n $\"npm:$ \n $\"License:$ \n

▶ Live demo

\n\nAspicio is an open-source (MIT), TypeScript-first drawing engine: one\nframework-free `parse → tessellate` pipeline that runs in the browser, in\nNode, and in serverless runtimes. It reads DXF and the vector content of\nPDF — the kind of PDF that carries artwork and dielines rather than a\nscan. A person gets an interactive WebGL viewer of a CAD drawing; an AI\nagent gets structured JSON facts and a rendered PNG of the same file.\nEvery surface — the browser viewer, the web components and their React,\nVue, and Svelte bindings, the headless renderer, the HTTP API, and the MCP\nserver — is a thin adapter over the same engine, so a drawing is equally\nreadable everywhere.\n\n```\nDXF / PDF bytes ─parse─▶ DrawingDocument ─tessellate─▶ Tessellation ──┬─▶ WebGL renderer (viewer)\n (normalized model) (batched geometry) ├─▶ SVG string (export / API / MCP)\n └─▶ DrawingSummary (describe)\n```\n\nHow it's built: [docs/architecture.md](https://github.com/frontsail-ai/aspicio/blob/master/docs/architecture.md) · behavior\nspecs: [docs/product-specs/](https://github.com/frontsail-ai/aspicio/blob/master/docs/product-specs/README.md)\n\n $\"Aspicio$ \n\n## Embed it\n\nOne embed, every flavor — and every path below renders the same web\ncomponents, so the result is pixel-identical no matter which you pick.\n\n### Web components — plain HTML, any framework\n\nOne tag gives you the layer panel plus an interactive preview; no\nbindings needed:\n\n```html\n\n\n\n```\n\nFormats are opted into by import: the package brings the components, the\n`formats/*` entry brings the parser. That is what keeps a DXF app from\nshipping every other format's code — and every flavor below does the same.\n\n### React\n\nThe same embed with idiomatic props and a `ref` exposing the full\nviewer, via [`@aspicio/react`](https://github.com/frontsail-ai/aspicio/blob/master/packages/react):\n\n```tsx\nimport { AspicioEmbed } from \"@aspicio/react\";\nimport \"@aspicio/react/formats/dxf\";\n\n;\n```\n\n### Vue\n\nTyped props and emits with unwrapped payloads, via\n[`@aspicio/vue`](https://github.com/frontsail-ai/aspicio/blob/master/packages/vue):\n\n```vue\n\n\n\n```\n\n### Svelte\n\nThe same components as raw Svelte 5 source with typed callback props,\nvia [`@aspicio/svelte`](https://github.com/frontsail-ai/aspicio/blob/master/packages/svelte):\n\n```svelte\n\n\n\n```\n\n### Vanilla TypeScript\n\nSkip the ready-made UI and drive the viewer directly from\n[`@aspicio/core`](https://github.com/frontsail-ai/aspicio/blob/master/packages/core) — bring your own chrome:\n\n```ts\nimport { DrawingViewer } from \"@aspicio/core\";\nimport { dxfParser } from \"@aspicio/core/dxf\";\n\nconst viewer = new DrawingViewer(document.querySelector(\"#preview\")!, {\n parsers: [dxfParser],\n});\nawait viewer.load(file); // File | Blob | ArrayBuffer | DXF text (ASCII or binary)\n```\n\n### Headless — Node and serverless\n\nParse, describe, and render with no browser at all (server-side\npreviews, thumbnails, pipelines):\n\n```ts\nimport {\n describeDrawing,\n parseWith,\n tessellate,\n tessellateSpace,\n tessellationToSvg,\n} from \"@aspicio/core\";\nimport { dxfParser } from \"@aspicio/core/dxf\";\n\nconst doc = await parseWith([dxfParser], bytes); // ASCII or binary DXF\nconst summary = describeDrawing(doc); // units, bounds, layers, texts, spaces…\nconst svg = tessellationToSvg(tessellate(doc)); // model space (a PDF's page 1)\n\n// Multi-page PDFs and multi-sheet DXFs: describe covers all of them, and\n// either verb can be scoped to one.\nconst page3 = describeDrawing(doc, { space: \"Page 3\" });\nconst sheet = tessellationToSvg(tessellateSpace(doc, \"Layout1\"));\n```\n\nWhat you get: WebGL rendering batched to one draw call per layer (large\ndrawings stay interactive), broad entity coverage (lines, arcs, circles,\nellipses, polylines with bulges, splines, TEXT/MTEXT, DIMENSION,\nSOLID/HATCH fills, nested INSERT blocks — anything unsupported is counted\nand reported, never fatal), a layer list with the colors that are\n_actually drawn_ (per-entity overrides included, not just the layer\ntable), measure\nwith object snap, entity picking, paper-space layouts, SVG/PNG export,\nand first-class touch. Out of scope: editing and 3D.\n\n## Hand it to an agent\n\nThe same engine speaks MCP and HTTP, so an agent can _read_ a drawing\ninstead of guessing at it:\n\n- **`describe_dxf`** — units, bounds, size, layers with effective colors,\n entity counts, and the drawing's text content. An agent reads a title\n block or a dimension value directly — no OCR, no vision round-trip.\n- **`render_dxf`** — a PNG of the drawing the model can look at.\n- **`view_dxf`** (hosted server) — an interactive in-chat viewer for the\n _person_ in the conversation, via the open [MCP Apps\n extension](https://modelcontextprotocol.io/seps/1865-mcp-apps-interactive-user-interfaces-for-mcp):\n pan, zoom, layer toggles, fullscreen, host light/dark theming. The\n widget is locked to the drawing the tool call delivered and makes no\n network requests; hosts without MCP Apps still get the structured\n facts.\n\n $\"The$ \n\n| Surface | Local files | URLs | Inline DXF |\n| -------------------------------------------- | ----------- | ---- | ---------- |\n| stdio MCP — `npx -y @aspicio/mcp` | ✅ | ✅ | ✅ |\n| Hosted MCP — `aspicio-api.frontsail.app/mcp` | — | ✅ | ✅ |\n| HTTP API — `/describe`, `/render` | POST body | ✅ | ✅ |\n\nConnect:\n\n- **Claude Code** — one step installs the MCP server plus the bundled\n skills (`aspicio-inspect-dxf`, `aspicio-embed`):\n `/plugin marketplace add frontsail-ai/aspicio` then `/plugin install aspicio@aspicio`\n- **Codex** — the same repo doubles as a Codex marketplace:\n `codex plugin marketplace add https://github.com/frontsail-ai/aspicio`,\n `codex plugin add aspicio@aspicio`, then\n `codex mcp add aspicio -- npx -y @aspicio/mcp`\n- **Any client that launches stdio MCP servers** — register\n `npx -y @aspicio/mcp`\n- **Any client that supports remote MCP (Streamable HTTP)** — point it\n at `https://aspicio-api.frontsail.app/mcp` (no install;\n speaks MCP, not a browser page)\n- **Plain HTTP** — `GET /describe?src=`,\n `GET /render?src=&format=png|svg`; the API self-describes at\n [`/openapi.json`](https://aspicio-api.frontsail.app/openapi.json)\n\nURL fetches are guarded (private-network blocking, size caps, redirect\nvalidation, timeouts). The stdio server reads local files in-process and\nnever uploads the DXF to any Aspicio service — though, as with any tool\nresult, your MCP client passes the returned summary or image to its\nmodel provider. Full details:\n[privacy policy](https://aspicio.frontsail.app/privacy/) ·\n[terms](https://aspicio.frontsail.app/terms/).\n\n## Available today · direction\n\nEverything above is shipped and live: viewer + demo, core, web\ncomponents, React, Vue, and Svelte packages, headless describe/render, stdio and hosted MCP, the in-chat\nMCP Apps viewer, the HTTP API with OpenAPI, and plugin packaging for\nClaude Code and Codex.\n\nDirection (intent, not commitments — see\n[issues](https://github.com/frontsail-ai/aspicio/issues)): MCP registry\nlistings, structured entity queries and focused rendering, and an\nupload flow so remote surfaces can handle local files.\n\n## Packages\n\n| Package | Description |\n| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| [`@aspicio/core`](https://github.com/frontsail-ai/aspicio/blob/master/packages/core) | The viewer library: parsing, tessellation, rendering, camera, input |\n| [`@aspicio/elements`](https://github.com/frontsail-ai/aspicio/blob/master/packages/elements) | Web components: ``, ``, `` — plain HTML, Svelte, any framework |\n| [`@aspicio/react`](https://github.com/frontsail-ai/aspicio/blob/master/packages/react) | React bindings: ``, ``, `` |\n| [`@aspicio/vue`](https://github.com/frontsail-ai/aspicio/blob/master/packages/vue) | Vue 3 bindings: the same three components with typed props and emits |\n| [`@aspicio/svelte`](https://github.com/frontsail-ai/aspicio/blob/master/packages/svelte) | Svelte 5 bindings: the same three components as raw .svelte source |\n| [`@aspicio/mcp`](https://github.com/frontsail-ai/aspicio/blob/master/packages/mcp) | MCP server for AI agents: `describe_dxf` + `render_dxf` |\n| [`@aspicio/api`](https://github.com/frontsail-ai/aspicio/blob/master/apps/api) | DXF HTTP API server (private): `/describe`, `/render`, `/mcp` |\n| [`@aspicio/widget`](https://github.com/frontsail-ai/aspicio/blob/master/apps/widget) | MCP Apps in-chat viewer widget (private), served by the api server |\n| [`@aspicio/demo`](https://github.com/frontsail-ai/aspicio/blob/master/apps/demo) | Standalone demo app (private) — also the reference integration |\n\nHow the viewer packages fit together: every framework path funnels into\nthe same Lit web components — one implementation of the embed UI — which\nsit on the framework-free core. React, Vue, and Svelte get thin veneers\nwith idiomatic props; plain HTML consumes the elements directly.\n\n```mermaid\nflowchart TD\n REACTAPP[\"React app\"]\n HTMLAPP[\"Plain HTML / vanilla JS app\"]\n VUEAPP[\"Vue app\"]\n SVELTEAPP[\"Svelte app\"]\n\n REACT[\"@aspicio/react
<AspicioEmbed> · <AspicioPreview> · <AspicioLayerPanel>
thin @lit/react veneer, API-stable\"]\n VUE[\"@aspicio/vue
<AspicioEmbed> · <AspicioPreview> · <AspicioLayerPanel>
thin Vue 3 veneer, typed emits\"]\n SVELTE[\"@aspicio/svelte
<AspicioEmbed> · <AspicioPreview> · <AspicioLayerPanel>
raw Svelte 5 source, compiled by your bundler\"]\n ELEMENTS[\"@aspicio/elements
<aspicio-embed> · <aspicio-preview> · <aspicio-layer-panel>
Lit web components — the one embed-UI implementation\"]\n CORE[\"@aspicio/core
parse → tessellate → render
camera · input · picking · SVG/PNG export · headless describe\"]\n\n REACTAPP -->|\"idiomatic props, ref → DrawingViewer\"| REACT\n REACT -->|\"wraps\"| ELEMENTS\n HTMLAPP -->|\"attributes + DOM events\"| ELEMENTS\n VUEAPP -->|\"idiomatic props + emits\"| VUE\n VUE -->|\"wraps\"| ELEMENTS\n SVELTEAPP -->|\"typed callback props\"| SVELTE\n SVELTE -->|\"wraps\"| ELEMENTS\n ELEMENTS -->|\"drives\"| CORE\n HTMLAPP -.->|\"or hand-rolled UI on the DrawingViewer API\"| CORE\n\n classDef pkg fill:#191c22,stroke:#4c8dff,color:#e7e3da\n classDef app fill:#1f232b,stroke:#3a3f4a,color:#9aa0ab\n class REACT,VUE,SVELTE,ELEMENTS,CORE pkg\n class REACTAPP,HTMLAPP,VUEAPP,SVELTEAPP app\n```\n\n## Development\n\nToolchain: [Vite+](https://viteplus.dev) (`vp`) on top of bun.\n\n```bash\nvp install # install dependencies\nvp run dev # start the demo app\nvp run ready # check + test + build everything (the repo gate)\n```\n\nTesting, CI/deploy, releasing, and contribution guidance:\n[CONTRIBUTING.md](https://github.com/frontsail-ai/aspicio/blob/master/CONTRIBUTING.md).\n\n---\n\nAspicio is developed and maintained by\n[FrontSail AI](https://frontsail.ai/).\n","changelogMarkdown","videoKey","requiredSecretsJson","publishedAt","priceCents","trialDays",0,"upstream",{"_113":114,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124},"requiredSecrets",[],"tags",[98,99,100,101,102,103,104,105,106,107,108,109,110,111,112],"assets",[],"stats",{"_96":85,"_97":85},"ratingAvg","reviewCount","ai-agents","artwork","autocad","cad","chatgpt","claude","dieline","dxf","dxf-parser","dxf-viewer","mcp-apps","packaging","pdf-drawing","pdf-x4","prepress","topics",[98,99,100,101,102,103,104,105,106,107,130,108,131,109,110,111,112,132,133,134],"license","MIT","language","TypeScript","registryName","io.github.frontsail-ai/aspicio","homepage","https://aspicio.frontsail.app","packages",[125],{"_126":127,"_128":129,"_75":76},"registryType","npm","identifier","@aspicio/mcp","mcp","mcp-server","react","typescript","webgl","ENV",{"_137":138,"_139":140,"_141":142},"ENVIRONMENT","production","TURNSTILE_SITE_KEY","0x4AAAAAAB8-rEI2gNDf_QhU","SENTRY_DSN","https://45fd1229f78089d5c3ee78be128030e1@o4510583261757440.ingest.de.sentry.io/4510584253448272"]