Files
crank/apps/ui/html/wizard/step3-rest.html
T
2026-04-03 00:03:40 +03:00

94 lines
4.8 KiB
HTML

<!-- REST variant -->
<div id="step-panel-3-rest" class="step-pane">
<div class="step-panel-header">
<div class="step-panel-eyebrow">
<div class="step-panel-eyebrow-line"></div>
<span data-i18n-html="wizard.step_of">Step 3 of 5</span>
</div>
<h1 class="step-panel-title" data-i18n="wizard.step3.rest.title">HTTP method &amp; format</h1>
<p class="step-panel-subtitle" data-i18n="wizard.step3.rest.subtitle">Choose the HTTP verb this operation sends and configure content negotiation headers. Crank will serialize MCP tool arguments into the appropriate request body format.</p>
</div>
<!-- HTTP method picker -->
<div class="config-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div class="config-card-header-icon">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 8h12M10 4l4 4-4 4"/>
</svg>
</div>
<div>
<div class="config-card-title">HTTP method</div>
<div class="config-card-subtitle">Verb sent to the upstream on every tool invocation</div>
</div>
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
</div>
<div class="config-card-body">
<div class="method-grid">
<button class="method-card" data-method="GET" onclick="selectMethod(this)">
<span class="method-name">GET</span>
<span class="method-desc">Read</span>
</button>
<button class="method-card active" data-method="POST" onclick="selectMethod(this)">
<span class="method-name">POST</span>
<span class="method-desc">Create</span>
</button>
<button class="method-card" data-method="PUT" onclick="selectMethod(this)">
<span class="method-name">PUT</span>
<span class="method-desc">Replace</span>
</button>
<button class="method-card" data-method="PATCH" onclick="selectMethod(this)">
<span class="method-name">PATCH</span>
<span class="method-desc">Update</span>
</button>
<button class="method-card" data-method="DELETE" onclick="selectMethod(this)">
<span class="method-name">DELETE</span>
<span class="method-desc">Remove</span>
</button>
</div>
<div class="method-callout" id="method-callout-rest" style="display:none;"></div>
</div>
</div>
<!-- Request format -->
<div class="config-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div class="config-card-header-icon">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="12" height="10" rx="1.5"/>
<path d="M5 7h6M5 10h4"/>
</svg>
</div>
<div>
<div class="config-card-title">Request format</div>
<div class="config-card-subtitle">Content negotiation and serialisation</div>
</div>
<span class="config-card-optional">Optional</span>
</div>
<div class="config-card-body" style="gap: 16px;">
<div class="form-row">
<div class="form-group">
<label class="form-label">Content-Type</label>
<select class="form-select">
<option selected>application/json</option>
<option>application/x-www-form-urlencoded</option>
<option>multipart/form-data</option>
<option>text/plain</option>
</select>
<div class="form-hint">How the request body is encoded when sent to the upstream.</div>
</div>
<div class="form-group">
<label class="form-label">Accept</label>
<select class="form-select">
<option selected>application/json</option>
<option>text/plain</option>
<option>*/*</option>
</select>
<div class="form-hint">Accepted response content types from the upstream server.</div>
</div>
</div>
</div>
</div>
</div><!-- /step-pane-3-rest -->