{"id":11838,"date":"2025-12-10T16:00:39","date_gmt":"2025-12-10T12:00:39","guid":{"rendered":"https:\/\/beegraphy.com\/blog\/?p=11838"},"modified":"2025-12-23T13:08:06","modified_gmt":"2025-12-23T09:08:06","slug":"exploring-the-typescript-node-in-beegraphy","status":"publish","type":"post","link":"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/","title":{"rendered":"Create Parametric 3D Models in Beegraphy using TypeScript Node and Claude.ai"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e4e0fb5ba3d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #757575;color:#757575\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #757575;color:#757575\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e4e0fb5ba3d\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Why_Code_Matters_Inside_a_Visual_Platform\" >Why Code Matters Inside a Visual Platform<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#When_Node_Graphs_Become_Unwieldy\" >When Node Graphs Become Unwieldy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Conveying_Reason_in_a_precise_manner\" >Conveying Reason in a precise manner<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#How_AI_Tools_Boost_Code-Based_Workflows\" >How AI Tools Boost Code-Based Workflows<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Parametric_bench_using_Typescript_and_Claude\" >Parametric bench using Typescript and Claude<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#TypeScript_in_Beegraphy\" >TypeScript in Beegraphy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Prompting_Claude\" >Prompting Claude<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Beegraphy_Classes\" >Beegraphy Classes<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Sample_code_gives_creates_a_simple_Box_OUTPUT_made_of_curves\" >Sample code gives creates a simple Box OUTPUT made of curves<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Why_this_matters_for_the_future_of_computational_designers\" >Why this matters for the future of computational designers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/beegraphy.com\/blog\/exploring-the-typescript-node-in-beegraphy\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><span style=\"font-weight: 400;\">Parametric design is where creativity and logic meet. For most designers, particularly for those who work with computational workflows, BeeGraphy might be a good starting point into this world. Its visual node system provides an insight into the way more complex processes can be more comprehensible, but clearly link up parameters with form. However, as designers may become more ambitious, there soon arises the necessity for something much more organized yet expressive. In this respect, the TypeScript node stands at the forefront: as the link between visual design and algorithmic control, enabling projects that are truly scalable, flexible, and highly parametric.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This article explains why the TypeScript node matters, what it brings to BeeGraphy&#8217;s visual methodology, how AI systems such as Claude can accelerate code-driven workflows, and how those concepts interrelate through the metaphor of a parametric bench. The tone is considerate and lucid, consistent with the style of the BeeGraphy blog and focused on design thinking rather than technical explanation or coding. You should have more than just an idea of what can be done with the TypeScript node by the end but also an understanding of how it furthers the designer&#8217;s creative process.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_Code_Matters_Inside_a_Visual_Platform\"><\/span><span style=\"font-weight: 400;\">Why Code Matters Inside a Visual Platform<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">At first glance, adding TypeScript to a visual platform may appear to be a contradiction. If the goal is accessibility, then why add code at all? The answer comes down to balance. The advantages of visual systems are unparalleled when it comes to expressing spatial relationships and intuitive workflows. They are clean, immediate and readable. But they become less efficient when a project requires repetition, logic branching or structured data.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The TypeScript node extends the node system by providing a place where logic can be programmed succinctly and exactly. It extends, rather than replaces, the visual pipeline. For example, a designer might want to create node-based layouts for previews or high-level operations and then use TypeScript for specific tasks that require organization and abstraction. This hybrid approach honors intuition and structure.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Furthermore, adding code to BeeGraphy doesn&#8217;t require you to become a software engineer, but to use one more tool. As your ideas get more complicated you will want to choose the best way to express each part of your design. And when designers do this, with practice, it&#8217;s quite normal for them to switch between purely visual and code-based thinking.<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-11845 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM.png\" alt=\"\" width=\"490\" height=\"236\" data-sizes=\"auto\" data-srcset=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM.png 1114w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM-300x144.png 300w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM-1024x493.png 1024w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM-768x370.png 768w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM-800x385.png 800w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM-20x10.png 20w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"When_Node_Graphs_Become_Unwieldy\"><\/span><span style=\"font-weight: 400;\">When Node Graphs Become Unwieldy<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">On smaller projects, node graphs stay efficient and clear. With growing complexity, though, you start to notice patterns: clusters of nodes repeated repeatedly, multiple branches for trees that should be copied when modifying it, a long chain of nodes to indirectly represent loops or conditions. These generate cognitive overhead. You may be doing more graph wrangling than developing your design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The TypeScript node frees you from that burden. Instead of duplicating logic throughout the graph, you centralize it. Instead of creating long chains of operations for repeated elements, you programmatically generate them. And instead of visually branching for every design variation, you concisely express conditions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This, in turn, makes your project more maintainable. If you want to change one aspect of the logic, you change it once in code rather than in multiple node clusters. In addition, this will keep your graph visually clean and easier to understand by others for further modification.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conveying_Reason_in_a_precise_manner\"><\/span><span style=\"font-weight: 400;\">Conveying Reason in a precise manner<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In essence, code lets you express things, which are hard and sometimes impossible to describe with nodes. Imagine doing things like distributing points along a variable path, calculating spacing that adapts to user input conditionally, reorganizing data, and auto-generating mirrored geometry. These are straightforward in code but would take large node structures to achieve visually.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Code brings precision to these ideas. You define mathematical relationships directly, you manage arrays of geometry, and you enforce constraints. You build helper logic once and reuse it throughout the project. Rather than scattering logic throughout the graph, you structure it in a tidy script.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This level of precision enables designers to engage in projects that they might otherwise shun because of visual complexity. It turns BeeGraphy into a platform where conceptual exploration can scale without becoming messy.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_AI_Tools_Boost_Code-Based_Workflows\"><\/span><span style=\"font-weight: 400;\">How AI Tools Boost Code-Based Workflows<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-start=\"159\" data-end=\"274\">Coding can feel intimidating for many designers, but AI and visual tools make the transition far more approachable. The biggest barriers are usually syntax and structure, not the logic itself. Designers already understand patterns intuitively, they just hesitate when asked to express them in code.<\/p>\n<ul>\n<li data-start=\"159\" data-end=\"274\">Large language model AI tools like <strong><a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"noopener\">Claude.ai<\/a><\/strong> act as cooperative partners that convert natural language into workable starter logic.<\/li>\n<li data-start=\"159\" data-end=\"274\">This removes the pressure of writing every line from scratch and gives designers a clear foundation to build on.<\/li>\n<li data-start=\"159\" data-end=\"274\">AI does not replace understanding, it accelerates iteration by handling repetitive and error-prone parts of coding.<\/li>\n<li data-start=\"159\" data-end=\"274\">Designers remain fully in control, testing, refining, and shaping the logic and geometry themselves.<\/li>\n<li data-start=\"159\" data-end=\"274\">In this role, AI becomes an extension of sketching, helping designers think through logic the same way nodes help visualize form.<\/li>\n<li data-start=\"159\" data-end=\"274\">With both nodes and TypeScript available, designers shift into a more strategic space, focusing on relationships, rules, and systems.<\/li>\n<li data-start=\"159\" data-end=\"274\">This mirrors the direction of computational design, where designers orchestrate dynamic systems rather than craft isolated objects.<\/li>\n<li data-start=\"159\" data-end=\"274\">Automating structure frees up creative bandwidth, enabling fast variation, extreme experiments, and entire families of designs.<\/li>\n<li data-start=\"159\" data-end=\"274\">Designers become the choreographers of performance, setting rules that the system executes, and BeeGraphy supports this through intuitive visual tools combined with structured scripting.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Parametric_bench_using_Typescript_and_Claude\"><\/span><span style=\"font-weight: 400;\">Parametric bench using Typescript and Claude<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11853 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1.png\" alt=\"\" width=\"575\" height=\"383\" data-sizes=\"auto\" data-srcset=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1.png 1248w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1-300x200.png 300w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1-1024x683.png 1024w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1-768x512.png 768w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1-800x533.png 800w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_u4kyu0u4kyu0u4ky-1-20x14.png 20w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/p>\n<p>A parametric bench in BeeGraphy can be generated entirely through TypeScript, with Claude helping write and refine the logic behind the geometry. This tutorial walks through how to script the bench from scratch, build its structure through curves and solids, and control the overall form through code rather than manual modeling. You will see how BeeGraphy\u2019s geometry classes and solid tools can be combined with Claude\u2019s code generation to create a fully parametric, customizable bench that updates instantly whenever the script changes.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"TypeScript_in_Beegraphy\"><\/span><strong>TypeScript in Beegraphy<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11845 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-5.35.19-PM.png\" alt=\"\" width=\"406\" height=\"157\" \/><\/p>\n<p data-start=\"1719\" data-end=\"1792\"><strong>Step 1:<\/strong> Open the BeeGraphy Editor, double click and add a <strong data-start=\"1755\" data-end=\"1774\">TypeScript node<\/strong> to your canvas.<\/p>\n<p data-start=\"1796\" data-end=\"1915\"><strong>Step 2: <\/strong>Copy the code you want to use and paste it into the script by clicking the <strong data-start=\"1871\" data-end=\"1879\">Edit<\/strong> button on the node.<\/p>\n<p data-start=\"1919\" data-end=\"2031\"><strong>Step 3: <\/strong>Inside the window, click <strong data-start=\"1949\" data-end=\"1958\">Ports<\/strong> in the top left corner. Delete all the default input and output ports.<\/p>\n<p data-start=\"2035\" data-end=\"2230\"><strong>Step 4: <\/strong>At the top of your code, you will see the <strong data-start=\"2077\" data-end=\"2113\">in-port names and their types<\/strong>. Copy each name into the Ports panel and <strong><em>assign the correct type<\/em> <\/strong>in the drop down menu <strong><em>(scroll to find the desired one)<\/em><\/strong>. This is important for the node to work properly.<\/p>\n<p data-start=\"2234\" data-end=\"2400\"><strong>Step 5: <\/strong>Scroll to the bottom of the code to find the <strong data-start=\"2279\" data-end=\"2299\">out port name<\/strong>, such as <em><strong>curves, surfaces, or solid<\/strong><\/em>. Copy that into the output ports and select the matching type.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11859 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz.png\" alt=\"\" width=\"2288\" height=\"1080\" data-sizes=\"auto\" data-srcset=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz.png 2288w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-300x142.png 300w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-1024x483.png 1024w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-768x363.png 768w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-1536x725.png 1536w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-2048x967.png 2048w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-800x378.png 800w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-1920x906.png 1920w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/czdfzxczxczcz-20x9.png 20w\" sizes=\"(max-width: 2288px) 100vw, 2288px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prompting_Claude\"><\/span><strong><br \/>\nPrompting Claude<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Claude does not generate BeeGraphy ready code directly, so we go step by step.<br data-start=\"233\" data-end=\"236\" \/><strong><br \/>\nStep 1:<\/strong> In this case, we asked Claude to make a rectangle by giving it two additional things: the BeeGraphy guide links and a sample code. Providing both of these things are important in order to make claude aware of the <strong>Beegraphy classes<\/strong> and the <strong>A Sample code<\/strong> structure.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Beegraphy_Classes\"><\/span><strong>Beegraphy Classes<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"392\" data-end=\"917\">The\u00a0<a href=\"https:\/\/beegraphy.com\/guide\/classes\/Curve\"><strong>Curve <\/strong><\/a><strong>Class<\/strong>\u00a0is a fundamental component within our system, representing a geometric curve. It encapsulates the properties and methods needed to define and manipulate curves in various forms.<\/p>\n<p>The\u00a0<a href=\"https:\/\/beegraphy.com\/guide\/classes\/CurveBuilder\"><strong>CurveBuilder<\/strong><\/a><strong> Class<\/strong>\u00a0is designed to simplify the process of constructing curves. It offers a set of static methods that facilitate the creation of various types of curves by providing an intuitive and flexible interface.<\/p>\n<p>The\u00a0<a href=\"https:\/\/beegraphy.com\/guide\/classes\/FontBuilder\"><strong>FontBuilder <\/strong><\/a><strong>Class<\/strong>\u00a0is a powerful tool for constructing fonts and generating geometric representations of text.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/Plane\">Plane<\/a> Class<\/strong>\u00a0represents a geometric plane in three-dimensional space. It provides a foundational structure for defining, manipulating, and performing operations on planes, which are essential elements in many geometric and computational tasks.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/Vector\">Vector<\/a> Class<\/strong>\u00a0represents a vector in three-dimensional space, providing a fundamental framework for handling vector operations and calculations.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/Solid\">Solid<\/a> Class<\/strong>\u00a0represents a three-dimensional solid within the application, providing a comprehensive framework for defining, manipulating, and performing operations on solid shapes.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/SolidBuilder\">SolidBuilder<\/a> Class<\/strong>\u00a0provides a set of static methods for creating a variety of solid shapes with ease.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/Surface\">Surface<\/a> Class<\/strong>\u00a0represents a surface geometry within the application, providing a robust framework for defining, manipulating, and analyzing surface shapes in three-dimensional space.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/SurfaceBuilder\">SurfaceBuilder<\/a> Class<\/strong>\u00a0offers a range of static methods for constructing surfaces using various algorithms and operations.<\/p>\n<p>The\u00a0<strong><a href=\"https:\/\/beegraphy.com\/guide\/classes\/Transformation\">Transformation<\/a> Class<\/strong> represents a transformation in three-dimensional space, providing a comprehensive framework for applying geometric transformations to objects.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><em><strong>Prompt:<\/strong> Review the BeeGraphy docs and sample code, then help me generate optimized TypeScript node logic for creating a Tapered Box Geometry in BeeGraphy.<\/em><\/p>\n<p>Beegraphy Docs link:<br \/>\nhttps:\/\/beegraphy.com\/guide\/classes\/Geometry <br data-start=\"436\" data-end=\"439\" \/>https:\/\/beegraphy.com\/guide\/classes\/Curve<br data-start=\"480\" data-end=\"483\" \/>https:\/\/beegraphy.com\/guide\/classes\/CurveBuilder<br data-start=\"531\" data-end=\"534\" \/>https:\/\/beegraphy.com\/guide\/classes\/FontBuilder<br data-start=\"581\" data-end=\"584\" \/>https:\/\/beegraphy.com\/guide\/classes\/Plane<br data-start=\"625\" data-end=\"628\" \/>https:\/\/beegraphy.com\/guide\/classes\/Vector<br data-start=\"670\" data-end=\"673\" \/>https:\/\/beegraphy.com\/guide\/classes\/Solid<br data-start=\"714\" data-end=\"717\" \/>https:\/\/beegraphy.com\/guide\/classes\/SolidBuilder<br data-start=\"765\" data-end=\"768\" \/>https:\/\/beegraphy.com\/guide\/classes\/Surface<br data-start=\"811\" data-end=\"814\" \/>https:\/\/beegraphy.com\/guide\/classes\/SurfaceBuilder<br data-start=\"864\" data-end=\"867\" \/>https:\/\/beegraphy.com\/guide\/classes\/Transformation<\/p>\n<div class=\"code-editor\">\n<div class=\"code-editor-header\">\n<div class=\"code-editor-title\">TypeScript Sample Code:<\/div>\n<\/div>\n<div class=\"code-editor-body\">\n<pre><code><span class=\"token-comment\">\/\/ ===== SIMPLE BOX =====<\/span>\r\n<span class=\"token-keyword\">type<\/span> BoxInPorts = {\r\n  width: Value&lt;number&gt;;  \/\/Inport Name width\r\n  height: Value&lt;number&gt;;  \/\/Inport Name height\r\n  depth: Value&lt;number&gt;;  \/\/Inport Name depth\r\n};\r\n\r\n<span class=\"token-keyword\">async<\/span> ({ width: widthPort, height: heightPort, depth: depthPort }: BoxInPorts) =&gt; {\r\n  <span class=\"token-keyword\">const<\/span> width = widthPort.value;\r\n  <span class=\"token-keyword\">const<\/span> height = heightPort.value;\r\n  <span class=\"token-keyword\">const<\/span> depth = depthPort.value;\r\n  <span class=\"token-keyword\">const<\/span> hw = width \/ <span class=\"token-number\">2<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> hh = height \/ <span class=\"token-number\">2<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> hd = depth \/ <span class=\"token-number\">2<\/span>;\r\n\r\n  <span class=\"token-comment\">\/\/ Create box vertices<\/span>\r\n  <span class=\"token-keyword\">const<\/span> vertices = [\r\n    <span class=\"token-keyword\">new<\/span> Vector([-hw, -hh, -hd]), <span class=\"token-comment\">\/\/ 0<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([+hw, -hh, -hd]), <span class=\"token-comment\">\/\/ 1<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([+hw, -hh, +hd]), <span class=\"token-comment\">\/\/ 2<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([-hw, -hh, +hd]), <span class=\"token-comment\">\/\/ 3<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([-hw, +hh, -hd]), <span class=\"token-comment\">\/\/ 4<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([+hw, +hh, -hd]), <span class=\"token-comment\">\/\/ 5<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([+hw, +hh, +hd]), <span class=\"token-comment\">\/\/ 6<\/span>\r\n    <span class=\"token-keyword\">new<\/span> Vector([-hw, +hh, +hd])  <span class=\"token-comment\">\/\/ 7<\/span>\r\n  ];\r\n\r\n  <span class=\"token-keyword\">const<\/span> edgePairs = [\r\n    [<span class=\"token-number\">0<\/span>, <span class=\"token-number\">1<\/span>], [<span class=\"token-number\">1<\/span>, <span class=\"token-number\">2<\/span>], [<span class=\"token-number\">2<\/span>, <span class=\"token-number\">3<\/span>], [<span class=\"token-number\">3<\/span>, <span class=\"token-number\">0<\/span>],\r\n    [<span class=\"token-number\">4<\/span>, <span class=\"token-number\">5<\/span>], [<span class=\"token-number\">5<\/span>, <span class=\"token-number\">6<\/span>], [<span class=\"token-number\">6<\/span>, <span class=\"token-number\">7<\/span>], [<span class=\"token-number\">7<\/span>, <span class=\"token-number\">4<\/span>],\r\n    [<span class=\"token-number\">0<\/span>, <span class=\"token-number\">4<\/span>], [<span class=\"token-number\">1<\/span>, <span class=\"token-number\">5<\/span>], [<span class=\"token-number\">2<\/span>, <span class=\"token-number\">6<\/span>], [<span class=\"token-number\">3<\/span>, <span class=\"token-number\">7<\/span>]\r\n  ];\r\n\r\n  <span class=\"token-keyword\">const<\/span> edges = <span class=\"token-keyword\">await<\/span> Promise.all(\r\n    edgePairs.map(([start, end]) =&gt;\r\n      CurveBuilder.polyline([vertices[start], vertices[end]])\r\n    )\r\n  );\r\n\r\n  <span class=\"token-keyword\">const<\/span> curves = edges.map((edge) =&gt; ({\r\n    type: Type.Curve,\r\n    value: edge,\r\n    meta: { color: <span class=\"token-string\">\"#00aaff\"<\/span> }\r\n  }));\r\n\r\n  <span class=\"token-keyword\">return<\/span> { curves };  \/\/OutPort Name and type\r\n};\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Sample_code_gives_creates_a_simple_Box_OUTPUT_made_of_curves\"><\/span><b><br \/>\nSample code gives creates a simple Box OUTPUT made of curves<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11839 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM.png\" alt=\"\" width=\"1354\" height=\"536\" data-sizes=\"auto\" data-srcset=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM.png 1354w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM-300x119.png 300w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM-1024x405.png 1024w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM-768x304.png 768w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM-800x317.png 800w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.40.25-PM-20x8.png 20w\" sizes=\"(max-width: 1354px) 100vw, 1354px\" \/><\/h2>\n<div class=\"code-editor\">\n<div class=\"code-editor-body\">\n<hr \/>\n<\/div>\n<\/div>\n<p><span style=\"color: #003300;\"><strong>Troubleshooting:<\/strong>\u00a0<\/span><\/p>\n<ul>\n<li><span style=\"color: #003300;\">If you see the code is stuck in task execution, remind the chatbot to use <em><strong>await, async &amp; promise . <\/strong><\/em>This allows your code to handle asynchronous tasks and won&#8217;t get stuck in a loop.<\/span><\/li>\n<li><span style=\"color: #003300;\">If you see type error in node after changing the <strong>in<\/strong> and <strong>out<\/strong> port names, refresh the page and it usually disappears.<\/span><\/li>\n<li><span style=\"color: #003300;\">If you encounter other errors in node, such as calling undefined classes, then you can take a screenshot of the error and share it with claude.<\/span><\/li>\n<li><span style=\"color: #003300;\">You can also reach out to us on <strong><a style=\"color: #003300;\" href=\"https:\/\/discord.gg\/JaKg282Kp3\" target=\"_blank\" rel=\"noopener\">discord<\/a> <\/strong>in case you need help.<\/span><\/li>\n<\/ul>\n<p>If you are able to generate a working code for a tapered box then Congratulations! We will move to next steps and play with generating geometries using different methods and more complex prompting.<br \/>\n<b><\/b><\/p>\n<p>&nbsp;<\/p>\n<p><b>STEP 2: Creating a geometry with lofted surfaces and using Array to repeat the geometries<br \/>\n<span style=\"color: #ff9900;\">Note: <\/span><\/b><span style=\"color: #ff9900;\">You can try different prompts to create these geometries. In this case we have created these array of boxes using surfaces as output, however you may prompt to output as Solids as well<\/span><\/p>\n<hr \/>\n<p><strong>PROMPT:<\/strong> Create an array of lofted surfaces along the Y axis using BeeGraphy TypeScript. Each surface should have an hourglass\/concave profile created by lofting between 3 horizontal curves:<\/p>\n<p>Bottom curve &#8211; a straight horizontal line at z=0<\/p>\n<p>Middle curve &#8211; a horizontal line at z=height\/2, but narrower (bulged inward) on both sides<\/p>\n<p>Top curve &#8211; a straight horizontal line at z=height<\/p>\n<hr \/>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11841 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-scaled.png\" alt=\"\" width=\"2560\" height=\"1158\" data-sizes=\"auto\" data-srcset=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-scaled.png 2560w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-300x136.png 300w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-1024x463.png 1024w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-768x347.png 768w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-1536x695.png 1536w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-2048x926.png 2048w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-800x362.png 800w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-1920x868.png 1920w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-12.52.07-PM-20x9.png 20w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<div class=\"code-editor\">\n<div class=\"code-editor-header\">\n<div class=\"code-editor-title\">TypeScript Output<\/div>\n<\/div>\n<div class=\"code-editor-body\">\n<pre><code><span class=\"token-keyword\">type<\/span> InPorts = {\r\n  width: Value&lt;number&gt;;\r\n  height: Value&lt;number&gt;;\r\n  depth: Value&lt;number&gt;;\r\n  bulge: Value&lt;number&gt;;\r\n  count: Value&lt;number&gt;;\r\n  spacing: Value&lt;number&gt;;\r\n  loftDegree: Value&lt;number&gt;;\r\n};\r\n\r\n<span class=\"token-keyword\">async<\/span> ({\r\n  width: widthPort,\r\n  height: heightPort,\r\n  depth: depthPort,\r\n  bulge: bulgePort,\r\n  count: countPort,\r\n  spacing: spacingPort,\r\n  loftDegree: loftDegreePort\r\n}: InPorts) =&gt; {\r\n  <span class=\"token-keyword\">const<\/span> width = widthPort.value;\r\n  <span class=\"token-keyword\">const<\/span> height = heightPort.value;\r\n  <span class=\"token-keyword\">const<\/span> depth = depthPort.value;\r\n  <span class=\"token-keyword\">const<\/span> bulge = bulgePort.value;\r\n  <span class=\"token-keyword\">const<\/span> count = countPort.value;\r\n  <span class=\"token-keyword\">const<\/span> spacing = spacingPort.value;\r\n  <span class=\"token-keyword\">const<\/span> loftDegree = loftDegreePort.value;\r\n\r\n  <span class=\"token-keyword\">const<\/span> hw = width \/ <span class=\"token-number\">2<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> step = depth + spacing;\r\n\r\n  <span class=\"token-keyword\">const<\/span> surfaces = [];\r\n\r\n  <span class=\"token-keyword\">for<\/span> (let i = <span class=\"token-number\">0<\/span>; i &lt; count; i++) {\r\n    <span class=\"token-keyword\">const<\/span> yPos = i * step;\r\n    <span class=\"token-keyword\">const<\/span> middleHW = hw - bulge;\r\n\r\n    <span class=\"token-comment\">\/\/ FRONT SURFACE<\/span>\r\n    <span class=\"token-keyword\">const<\/span> frontBottom = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos, <span class=\"token-number\">0<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> frontMiddle = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-middleHW, yPos, height \/ <span class=\"token-number\">2<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([middleHW, yPos, height \/ <span class=\"token-number\">2<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> frontTop = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos, height])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> frontSurface = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.loft(\r\n      [frontBottom, frontMiddle, frontTop],\r\n      loftDegree\r\n    );\r\n\r\n    <span class=\"token-comment\">\/\/ BACK SURFACE<\/span>\r\n    <span class=\"token-keyword\">const<\/span> backBottom = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos + depth, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos + depth, <span class=\"token-number\">0<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> backMiddle = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-middleHW, yPos + depth, height \/ <span class=\"token-number\">2<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([middleHW, yPos + depth, height \/ <span class=\"token-number\">2<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> backTop = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos + depth, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos + depth, height])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> backSurface = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.loft(\r\n      [backBottom, backMiddle, backTop],\r\n      loftDegree\r\n    );\r\n\r\n    <span class=\"token-comment\">\/\/ LEFT SIDE SURFACE<\/span>\r\n    <span class=\"token-keyword\">const<\/span> leftBottom = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos + depth, <span class=\"token-number\">0<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> leftMiddle = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-middleHW, yPos, height \/ <span class=\"token-number\">2<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-middleHW, yPos + depth, height \/ <span class=\"token-number\">2<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> leftTop = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos + depth, height])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> leftSurface = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.loft(\r\n      [leftBottom, leftMiddle, leftTop],\r\n      loftDegree\r\n    );\r\n\r\n    <span class=\"token-comment\">\/\/ RIGHT SIDE SURFACE<\/span>\r\n    <span class=\"token-keyword\">const<\/span> rightBottom = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos + depth, <span class=\"token-number\">0<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> rightMiddle = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([middleHW, yPos, height \/ <span class=\"token-number\">2<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([middleHW, yPos + depth, height \/ <span class=\"token-number\">2<\/span>])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> rightTop = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos + depth, height])\r\n    );\r\n    <span class=\"token-keyword\">const<\/span> rightSurface = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.loft(\r\n      [rightBottom, rightMiddle, rightTop],\r\n      loftDegree\r\n    );\r\n\r\n    <span class=\"token-comment\">\/\/ BOTTOM FACE<\/span>\r\n    <span class=\"token-keyword\">const<\/span> bottomFace = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.surface4Pnt(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos + depth, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos + depth, <span class=\"token-number\">0<\/span>])\r\n    );\r\n\r\n    <span class=\"token-comment\">\/\/ TOP FACE<\/span>\r\n    <span class=\"token-keyword\">const<\/span> topFace = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.surface4Pnt(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, yPos + depth, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, yPos + depth, height])\r\n    );\r\n\r\n    surfaces.push(\r\n      { type: Type.Surface, value: frontSurface,  meta: { color: <span class=\"token-string\">\"#ff5500\"<\/span> } },\r\n      { type: Type.Surface, value: backSurface,   meta: { color: <span class=\"token-string\">\"#ff5500\"<\/span> } },\r\n      { type: Type.Surface, value: leftSurface,   meta: { color: <span class=\"token-string\">\"#ff5500\"<\/span> } },\r\n      { type: Type.Surface, value: rightSurface,  meta: { color: <span class=\"token-string\">\"#ff5500\"<\/span> } },\r\n      { type: Type.Surface, value: bottomFace,    meta: { color: <span class=\"token-string\">\"#ff5500\"<\/span> } },\r\n      { type: Type.Surface, value: topFace,       meta: { color: <span class=\"token-string\">\"#ff5500\"<\/span> } }\r\n    );\r\n  }\r\n\r\n  <span class=\"token-keyword\">return<\/span> { surfaces };\r\n};\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><strong>STEP 3: Altering geometry to make a bench<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11842 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-scaled.png\" alt=\"\" width=\"2560\" height=\"1405\" data-sizes=\"auto\" data-srcset=\"https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-scaled.png 2560w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-300x165.png 300w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-1024x562.png 1024w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-768x421.png 768w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-1536x843.png 1536w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-2048x1124.png 2048w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-800x439.png 800w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-1920x1053.png 1920w, https:\/\/beegraphy.com\/blog\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-10-at-1.24.01-PM-20x11.png 20w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p data-start=\"92\" data-end=\"213\">After Step 2, we did not try to get everything in one shot. We prompted Claude for each action separately, in this order:<\/p>\n<ol data-start=\"214\" data-end=\"284\">\n<li data-start=\"214\" data-end=\"235\">\n<p data-start=\"217\" data-end=\"235\">Create the bulges.<\/p>\n<\/li>\n<li data-start=\"236\" data-end=\"261\">\n<p data-start=\"239\" data-end=\"261\">Scale the bottom face.<\/p>\n<\/li>\n<li data-start=\"262\" data-end=\"284\">\n<p data-start=\"265\" data-end=\"284\">Apply fillet edges.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"286\" data-end=\"471\" data-is-last-node=\"\" data-is-only-node=\"\">Each prompt built on the previous output. Run one change, review the geometry, then give the next prompt. This avoids conflicts and gives you control over the parameters at every stage.<\/p>\n<p><strong><a href=\"https:\/\/claude.ai\/share\/aaafe32e-4a4c-40b7-9edf-2d2266304ef1\" target=\"_blank\" rel=\"noopener\">Click here<\/a> to checkout the Claude.ai chat of this model for reference.<\/strong><\/p>\n<div class=\"code-editor\">\n<div class=\"code-editor-header\">\n<div class=\"code-editor-title\">TypeScript<\/div>\n<\/div>\n<div class=\"code-editor-body\">\n<pre><code><span class=\"token-keyword\">type<\/span> InPorts = {\r\n  width: Value&lt;number&gt;;\r\n  height: Value&lt;number&gt;;\r\n  depth: Value&lt;number&gt;;\r\n  minBulge: Value&lt;number&gt;;\r\n  maxBulge: Value&lt;number&gt;;\r\n  bottomBulge: Value&lt;number&gt;;\r\n  fillet: Value&lt;number&gt;;\r\n  count: Value&lt;number&gt;;\r\n  spacing: Value&lt;number&gt;;\r\n};\r\n\r\n<span class=\"token-keyword\">async<\/span> ({\r\n  width: widthPort,\r\n  height: heightPort,\r\n  depth: depthPort,\r\n  minBulge: minBulgePort,\r\n  maxBulge: maxBulgePort,\r\n  bottomBulge: bottomBulgePort,\r\n  fillet: filletPort,\r\n  count: countPort,\r\n  spacing: spacingPort\r\n}: InPorts) =&gt; {\r\n  <span class=\"token-keyword\">const<\/span> width = widthPort.value || <span class=\"token-number\">10<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> height = heightPort.value || <span class=\"token-number\">10<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> depth = depthPort.value || <span class=\"token-number\">2<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> minBulge = minBulgePort.value || <span class=\"token-number\">0.5<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> maxBulge = maxBulgePort.value || <span class=\"token-number\">4<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> bottomBulge = bottomBulgePort.value || <span class=\"token-number\">3<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> fillet = filletPort.value || <span class=\"token-number\">1<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> count = countPort.value || <span class=\"token-number\">10<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> spacing = spacingPort.value || <span class=\"token-number\">3<\/span>;\r\n\r\n  <span class=\"token-keyword\">const<\/span> hw = width \/ <span class=\"token-number\">2<\/span>;\r\n  <span class=\"token-keyword\">const<\/span> hwBottom = hw - bottomBulge;\r\n\r\n  <span class=\"token-comment\">\/\/ Wood color variations<\/span>\r\n  <span class=\"token-keyword\">const<\/span> woodColors = [\r\n    <span class=\"token-string\">\"#C9AC8C\"<\/span>,\r\n    <span class=\"token-string\">\"#B89B72\"<\/span>,\r\n    <span class=\"token-string\">\"#D4B896\"<\/span>,\r\n    <span class=\"token-string\">\"#A67C52\"<\/span>\r\n  ];\r\n\r\n  <span class=\"token-keyword\">const<\/span> solids = [];\r\n\r\n  <span class=\"token-keyword\">for<\/span> (let i = <span class=\"token-number\">0<\/span>; i &lt; count; i++) {\r\n    <span class=\"token-keyword\">const<\/span> offsetY = i * (depth + spacing);\r\n    <span class=\"token-keyword\">const<\/span> color = woodColors[i % woodColors.length];\r\n\r\n    <span class=\"token-comment\">\/\/ concave bulge calculation<\/span>\r\n    <span class=\"token-keyword\">const<\/span> centerIndex = (count - <span class=\"token-number\">1<\/span>) \/ <span class=\"token-number\">2<\/span>;\r\n    <span class=\"token-keyword\">const<\/span> distanceFromCenter = Math.abs(i - centerIndex);\r\n    <span class=\"token-keyword\">const<\/span> maxDistance = centerIndex;\r\n    <span class=\"token-keyword\">const<\/span> t = maxDistance &gt; <span class=\"token-number\">0<\/span> ? distanceFromCenter \/ maxDistance : <span class=\"token-number\">0<\/span>;\r\n    <span class=\"token-keyword\">const<\/span> bulge = minBulge + (maxBulge - minBulge) * (1 - t * t);\r\n    <span class=\"token-keyword\">const<\/span> hwMiddle = hw - bulge;\r\n\r\n    <span class=\"token-comment\">\/\/ front profile<\/span>\r\n    <span class=\"token-keyword\">const<\/span> bottomFront = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hwBottom, offsetY, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hwBottom, offsetY, <span class=\"token-number\">0<\/span>])\r\n    );\r\n\r\n    <span class=\"token-keyword\">const<\/span> middleFront = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hwMiddle, offsetY, height \/ <span class=\"token-number\">2<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hwMiddle, offsetY, height \/ <span class=\"token-number\">2<\/span>])\r\n    );\r\n\r\n    <span class=\"token-keyword\">const<\/span> topFront = <span class=\"token-keyword\">await<\/span> CurveBuilder.bSplineCurve([\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw + fillet, offsetY, height - fillet]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, offsetY, height - fillet]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, offsetY, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw + fillet, offsetY, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw - fillet, offsetY, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, offsetY, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, offsetY, height - fillet]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw - fillet, offsetY, height - fillet])\r\n    ], <span class=\"token-number\">2<\/span>, false);\r\n\r\n    <span class=\"token-keyword\">const<\/span> frontSurface = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.loft(\r\n      [bottomFront, middleFront, topFront], <span class=\"token-number\">2<\/span>\r\n    );\r\n\r\n    <span class=\"token-comment\">\/\/ back profile<\/span>\r\n    <span class=\"token-keyword\">const<\/span> bottomBack = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hwBottom, offsetY + depth, <span class=\"token-number\">0<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hwBottom, offsetY + depth, <span class=\"token-number\">0<\/span>])\r\n    );\r\n\r\n    <span class=\"token-keyword\">const<\/span> middleBack = <span class=\"token-keyword\">await<\/span> CurveBuilder.line(\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hwMiddle, offsetY + depth, height \/ <span class=\"token-number\">2<\/span>]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hwMiddle, offsetY + depth, height \/ <span class=\"token-number\">2<\/span>])\r\n    );\r\n\r\n    <span class=\"token-keyword\">const<\/span> topBack = <span class=\"token-keyword\">await<\/span> CurveBuilder.bSplineCurve([\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw + fillet, offsetY + depth, height - fillet]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, offsetY + depth, height - fillet]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw, offsetY + depth, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([-hw + fillet, offsetY + depth, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw - fillet, offsetY + depth, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, offsetY + depth, height]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw, offsetY + depth, height - fillet]),\r\n      <span class=\"token-keyword\">new<\/span> Vector([hw - fillet, offsetY + depth, height - fillet])\r\n    ], <span class=\"token-number\">2<\/span>, false);\r\n\r\n    <span class=\"token-keyword\">const<\/span> backSurface = <span class=\"token-keyword\">await<\/span> SurfaceBuilder.loft(\r\n      [bottomBack, middleBack, topBack], <span class=\"token-number\">2<\/span>\r\n    );\r\n\r\n    <span class=\"token-keyword\">const<\/span> solid = <span class=\"token-keyword\">await<\/span> SolidBuilder.loft(\r\n      [frontSurface, backSurface], <span class=\"token-number\">1<\/span>\r\n    );\r\n\r\n    solids.push({\r\n      type: Type.Solid,\r\n      value: solid,\r\n      meta: { color }\r\n    });\r\n  }\r\n\r\n  <span class=\"token-keyword\">return<\/span> { solids };\r\n};<\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong><a href=\"https:\/\/beegraphy.com\/market\/product\/typescript-bench-model-8da\">Click here<\/a> to checkout the Beegraphy file with TypeScript code<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_this_matters_for_the_future_of_computational_designers\"><\/span><span style=\"font-weight: 400;\"><br \/>\nWhy this matters for the future of computational designers<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The design industry is shifting toward the use of parametric, generative, and adaptive systems throughout architecture, furniture, products, and interfaces. Being able to think and work in a parametric way is becoming a crucial skill. BeeGraphy offers a space where designers can begin this journey without being overwhelmed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The TypeScript node does not intend to make this platform more complex; instead, it empowers those designers needing more. It supports a smooth transition from visual to structural logic. It builds confidence in designers to take on bigger and even more complex projects. It actually prepares them for workflows practiced in professional computational design studios.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Merging nodes, TypeScript, and AI assistance reflects how many real-world design teams are used to working. It reflects an understanding that creativity does not come from tools in isolation, but from how well you use them together.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><span style=\"font-weight: 400;\">Conclusion<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The new BeeGraphy TypeScript node represents a significant extension of what is possible in a cloud-based parametric design platform. It gives designers the power to express intricate, beautiful logic and retains strong visual strengths in node-based modelling. AI tools bridge the gap for beginners and enable fast drafting and iteration.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The idea of the parametric bench shows how this hybrid workflow brings clarity and flexibility to design. A simple object becomes a rich system, a single idea many variations, and the designer is free to explore without being held back by manual work.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It encourages designers to think in relationships, patterns, and behavior. Ultimately, the TypeScript node opens the door to a deeper practice of computational design, where logic and creativity move together. This is the future of parametric design, and BeeGraphy gives designers the tools to step into it with confidence.<\/span><\/p>\n<p><iframe id=\"model-693be876ff4e1b09399e21da\" width=\"1210\" height=\"860\" src=\"https:\/\/beegraphy.com\/embed\/693be876ff4e1b09399e21da\" style=\"border: none; border-radius: 12px;\" allowfullscreen\/><\/iframe> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Parametric design is where creativity and logic meet. For most designers, particularly for those who work with computational workflows, BeeGraphy might be a good starting point into this world. Its visual node system provides an insight into the way more complex processes can be more comprehensible, but clearly link up parameters with form. However, as [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":11852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11838","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured"],"_links":{"self":[{"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/posts\/11838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/comments?post=11838"}],"version-history":[{"count":31,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/posts\/11838\/revisions"}],"predecessor-version":[{"id":11975,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/posts\/11838\/revisions\/11975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/media\/11852"}],"wp:attachment":[{"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/media?parent=11838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/categories?post=11838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beegraphy.com\/blog\/wp-json\/wp\/v2\/tags?post=11838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}