src/ifcchat/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>IfcOpenShell AI Assistant</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <main>
        <section class="side">
            <div class="row">
                <label>Provider</label>
                <select id="provider" style="width: 100%;">
                    <option value="openai">OpenAI</option>
                    <option value="openrouter">OpenRouter</option>
                </select>    
            </div>

            <div class="row">
                <label>OpenAI API key<span class="small">stored in browser memory</span></label>
                <input id="apiKey" type="password" placeholder="sk-..." autocomplete="off" style="width: 100%;" />
            </div>

            <hr />

            <div class="row" style="margin-bottom: 10px;">
                <label>IFC model context<span class="small">stored in browser memory; only information extracted through MCP commands sent to OpenAI servers</span></label>

                <div class="btn-row">
                    <label class="btn" id="browseBtn" for="ifcFile" role="button" tabindex="0">
                        <span class="material-icons">folder_open</span>
                        Browse
                    </label>

                    <button class="btn" id="newModel" type="button">
                        <span class="material-icons">add_box</span>
                        New IFC
                    </button>
                </div>

                <input id="ifcFile" type="file" accept=".ifc,.ifczip,.ifcxml,.zip" hidden />
            </div>

            <div class="row">
                <button class="btn btn-wide" id="downloadIfc" type="button">
                    <span class="material-icons">download</span>
                    Download IFC
                </button>
            </div>

            <hr />

            <div class="row">
                <label>Tips</label>
                <div class="status">
                    • Upload an IFC, then ask “Summarize the model” or “List all IfcWalls”.<br />
                    • Try “Add a new site and building named X” (will use ifc_edit).
                </div>
            </div>

            <div class="row">
                <label>About</label>
                <div class="status">
                    Chat with your IFC model. This app uses <span class="code">ifcopenshell-mcp</span> to interact with an IFC model. IFC is in its raw-serialized form provides little textual context on the meaning of attributes, the intent behind element instances and the resulting geometrical form. By using the IfcOpenShell high-level API through an MCP-like interface (Model Context Protocol; allows for structured interaction with APIs and tools) these limitations are addressed and the model can be interrogated on a higher semantic abstraction level. You can also use <span class="code">ifcopenshell-mcp</span> on your local machine with any LLM provider that supports the MCP protocol.
                </div>
            </div>
        </section>

        <section class="chat">
            <header>
                <div class="row">

                    <img src="https://ifcopenshell.org/assets/images/logo.png" style="float: left; padding: 10px 20px 10px 0; ">

                    <strong>IfcOpenShell AI Assistant</strong>
                    <select id="model"></select>
                </div>
                <div class="row">

                    Status: <span class="status" id="status">Booting…</span>
                </div>
            </header>
                
            <div class="msgs" id="msgs"></div>
            <div class="composer">
                <div class="inner">
                    <textarea id="input" placeholder="Ask or instruct about the IFC model…"></textarea>
                    <button id="send" class="btn">Send <span class="material-icons">send</span></button>
                </div>
            </div>
        </section>
    </main>

    <script type="module" src="./app.js"></script>
</body>

</html>
initial ai chat src 2026-04-01 15:33:23 +02:00			`<!doctype html>`
			`<html lang="en">`

			`<head>`
			`<meta charset="utf-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1" />`
			`<title>IfcOpenShell AI Assistant</title>`
html too big -> styles into sep. file 2026-04-02 13:29:35 +02:00			`<link rel="stylesheet" href="./style.css">`
initial ai chat src 2026-04-01 15:33:23 +02:00			`<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
			`</head>`

			`<body>`
			`<main>`
			`<section class="side">`
			`<div class="row">`
ui: choose openai/openrouter 2026-04-02 13:19:28 +02:00			`<label>Provider</label>`
			`<select id="provider" style="width: 100%;">`
			`<option value="openai">OpenAI</option>`
openai by default 2026-04-02 21:33:54 +02:00			`<option value="openrouter">OpenRouter</option>`
ui: choose openai/openrouter 2026-04-02 13:19:28 +02:00			`</select>`
			`</div>`

			`<div class="row">`
			`<label>OpenAI API key<span class="small">stored in browser memory</span></label>`
initial ai chat src 2026-04-01 15:33:23 +02:00			`<input id="apiKey" type="password" placeholder="sk-..." autocomplete="off" style="width: 100%;" />`
			`</div>`

			`<hr />`

			`<div class="row" style="margin-bottom: 10px;">`
			`<label>IFC model context<span class="small">stored in browser memory; only information extracted through MCP commands sent to OpenAI servers</span></label>`

			`<div class="btn-row">`
			`<label class="btn" id="browseBtn" for="ifcFile" role="button" tabindex="0">`
			`<span class="material-icons">folder_open</span>`
			`Browse`
			`</label>`

			`<button class="btn" id="newModel" type="button">`
			`<span class="material-icons">add_box</span>`
			`New IFC`
			`</button>`
			`</div>`

			`<input id="ifcFile" type="file" accept=".ifc,.ifczip,.ifcxml,.zip" hidden />`
			`</div>`

			`<div class="row">`
			`<button class="btn btn-wide" id="downloadIfc" type="button">`
			`<span class="material-icons">download</span>`
			`Download IFC`
			`</button>`
			`</div>`

			`<hr />`

			`<div class="row">`
			`<label>Tips</label>`
			`<div class="status">`
			`• Upload an IFC, then ask “Summarize the model” or “List all IfcWalls”.<br />`
			`• Try “Add a new site and building named X” (will use ifc_edit).`
			`</div>`
			`</div>`

			`<div class="row">`
			`<label>About</label>`
			`<div class="status">`
			Chat with your IFC model. This app uses <span class="code">ifcopenshell-mcp</span> to interact with an IFC model. IFC is in its raw-serialized form provides little textual context on the meaning of attributes, the intent behind element instances and the resulting geometrical form. By using the IfcOpenShell high-level API through an MCP-like interface (Model Context Protocol; allows for structured interaction with APIs and tools) these limitations are addressed and the model can be interrogated on a higher semantic abstraction level. You can also use <span class="code">ifcopenshell-mcp</span> on your local machine with any LLM provider that supports the MCP protocol.
			`</div>`
			`</div>`
			`</section>`

			`<section class="chat">`
			`<header>`
			`<div class="row">`

			`<img src="https://ifcopenshell.org/assets/images/logo.png" style="float: left; padding: 10px 20px 10px 0; ">`

			`<strong>IfcOpenShell AI Assistant</strong>`
ui: choose openai/openrouter 2026-04-02 13:19:28 +02:00			`<select id="model"></select>`
initial ai chat src 2026-04-01 15:33:23 +02:00			`</div>`
			`<div class="row">`

			`Status: <span class="status" id="status">Booting…</span>`
			`</div>`
			`</header>`

			`<div class="msgs" id="msgs"></div>`
			`<div class="composer">`
			`<div class="inner">`
			`<textarea id="input" placeholder="Ask or instruct about the IFC model…"></textarea>`
			`<button id="send" class="btn">Send <span class="material-icons">send</span></button>`
			`</div>`
			`</div>`
			`</section>`
			`</main>`

			`<script type="module" src="./app.js"></script>`
			`</body>`

			`</html>`