feat: Add Anthropic Claude API support to ifcchat

Add a provider selector (OpenAI / Anthropic) to the ifcchat web UI,
allowing users to use their Anthropic API key with Claude models
instead of only OpenAI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
DesertSpringsCivil
2026-04-02 18:50:27 -06:00
parent 9d42f4c1ee
commit 95851ff94c
2 changed files with 203 additions and 21 deletions
+21 -5
View File
@@ -143,7 +143,8 @@
padding: 8px 10px;
}
#model {
#model,
#provider {
background: white;
color: gray;
border: solid 1px #eee;
@@ -239,14 +240,22 @@
<main>
<section class="side">
<div class="row">
<label>OpenAI API key<span class="small">stored in browser memory; only sent to OpenAI servers</span></label>
<label>Provider</label>
<select id="provider" style="width: 100%;">
<option value="openai">OpenAI</option>
<option value="anthropic">Anthropic (Claude)</option>
</select>
</div>
<div class="row">
<label id="apiKeyLabel">OpenAI API key<span class="small">stored in browser memory; only sent to provider servers</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>
<label>IFC model context<span class="small">stored in browser memory; only information extracted through MCP commands sent to provider servers</span></label>
<div class="btn-row">
<label class="btn" id="browseBtn" for="ifcFile" role="button" tabindex="0">
@@ -296,8 +305,15 @@
<strong>IfcOpenShell AI Assistant</strong>
<select id="model">
<option value="gpt-5">gpt-5</option>
<option value="gpt-4.1">gpt-4.1</option>
<optgroup id="modelGroupOpenai" label="OpenAI">
<option value="gpt-5">gpt-5</option>
<option value="gpt-4.1">gpt-4.1</option>
</optgroup>
<optgroup id="modelGroupAnthropic" label="Anthropic" disabled>
<option value="claude-sonnet-4-6" disabled>claude-sonnet-4-6</option>
<option value="claude-opus-4-6" disabled>claude-opus-4-6</option>
<option value="claude-haiku-4-5-20251001" disabled>claude-haiku-4-5</option>
</optgroup>
</select>
</div>
<div class="row">