ITE-ASSETDOC is a browser-based field documentation tool built for MSP engineers performing on-site rack surveys. The core workflow is: photograph equipment → Claude AI identifies make/model/serial/observations → engineer reviews → one click to save. All data is stored locally in the browser and can be exported as CSV at any time.
.html file — UI, AI integration, storage, and all logic. Open it locally in any modern browser. Works offline for manual entry; only the AI photo analysis requires an internet connection.api.anthropic.com/v1/messages using your Anthropic API key. Claude claude-sonnet-4-6 returns a structured JSON object identifying device type, manufacturer, model, serial, port count, and physical observations. No intermediate server ever sees the image or key.
The application is entirely client-side. The only external connection is the optional direct
API call to Anthropic when a photo is captured with a valid key. All record data lives in
localStorage under the key ite_records.
| Component | What it does |
|---|---|
| Capture Screen | Three-panel workspace: photo upload + client context | AI analysis fields | asset record form. Confirm bar at bottom triggers save. |
| runAI() | Calls the Anthropic API with the base64 image. Parses JSON response. Calls fillFields() with results. Falls back to runAIDemo() if no API key. |
| runAIDemo() | Picks a random profile from DEMO_PROFILES and animates the flow with simulated delays matching a real API call. |
| saveRecord() | Collects all field values, timestamps, engineer name, and photo data URI into a record object. Pushes to the records array and saves to localStorage. |
| renderSidebar() | Builds the client → site → asset accordion tree from the records array. Filters inline on the search field. |
| Search Screen | Full-text search across all record fields. Type-filter buttons (All/Server/Switch/etc). Card grid layout with thumbnails. |
| Detail Modal | View and edit mode. Can update photo, all fields, status, and notes. "Enrich with Photo" loads the record back into the Capture screen for a new AI pass. |
| Zone | Description |
|---|---|
| Titlebar | App name, status pills (AI mode / SharePoint), engineer avatar and name, live clock. Non-interactive — display only. |
| Rail | 6-button vertical icon nav. Capture, Search, All Assets screens. API Settings modal. Clear All Data. Hover shows tooltip. |
| Sidebar | Client accordion tree: Client → Site → individual assets sorted by rack location. Search field at top filters in real time. Yellow dot on client = has Needs Review items. |
| Tabs | Capture / Search / All Assets. Sync with rail buttons — clicking either navigates to the same screen. |
| Topbar | Breadcrumb (Client › Site › Action) and per-screen action buttons (Reset, Demo Mode, Manual Entry, How It Works). |
| Screen area | Full-height workspace that swaps based on active screen. Capture = 3-column grid. Search = card grid. Assets = data table. |
| Confirm bar | Fixed bottom bar on Capture screen. Shows unsaved dot animation, current status text, asset ID preview, Retake and Save buttons. |
| Toast | Bottom-right slide-in notification. Green border = success. Red border = error. Auto-dismisses after 3.5 seconds. |
The primary workspace for documenting new assets. Three panels run side by side on desktop: Photo Upload (left), AI Analysis (center), Asset Record (right). Below those, Flow Status and Session Stats panels provide real-time feedback.
updateBC(). Rack is free-text. These three values are stamped on every saved record.readonly until AI completes. Purple border indicates AI-populated. Editable after result.api.anthropic.com/v1/messages with base64 image and structured promptFull-text search across all record fields. Results render as card grid with colored top border per device type, thumbnail if photo was captured, and key metadata. Click any card to open the detail modal.
--card-c.Sortable data table of every record. Click any column header to sort. Click any row to open the detail modal. Toolbar provides Export CSV, Load Demo Data, and Clear All.
| Column | Field | Sortable |
|---|---|---|
| (thumbnail) | 48×36 px photo preview or placeholder icon | No |
| Asset ID | id — yellow, bold | Yes (id) |
| Device | mfr + model | Yes (name) |
| Type | type | Yes (type) |
| Rack | rack | Yes (rack) |
| Client | client | Yes (client) |
| Date | date (ISO YYYY-MM-DD) | Yes (date) |
| Status | Colored badge | Yes (status) |
state.sortCol and state.sortDir (in-memory only). Refreshing the page resets to default sort (date, descending). The table re-sorts automatically whenever the Assets screen is rendered after a save or delete.Opens over any screen when a record is clicked from the sidebar, search results, or assets table. Two modes: View and Edit. A third mode tag "MANUAL" appears for records sourced via manual entry.
When a photo is uploaded, handleFile() reads it as a data URL, extracts the
base64 payload, and calls runAI(). If no API key is set, it falls back to
runAIDemo() automatically.
handleFile() reads the image as data URL via FileReader.readAsDataURL(). The base64 payload is stored in currentImageB64; the full data URL in currentImageSrc (for photo embedding in the record). showPreview() renders it in the camera zone and starts the scan-line animation.POST to https://api.anthropic.com/v1/messages with model claude-sonnet-4-6, max_tokens: 1024. Message content contains the base64 image as image/jpeg and a structured text prompt. Headers include anthropic-dangerous-direct-browser-access: true to allow browser-direct calls.data.content[0].text is cleaned of any markdown fences (```json) and parsed with JSON.parse(). If parsing fails, an error is thrown and the form is unlocked for manual entry anyway.fillFields() calls typeIn() for each field. Text is typed character-by-character at 14ms per char for single-line fields, 6ms for the observations textarea — giving a "live typing" visual effect. AI fields get a purple border until the engineer edits them.saveRecord().The prompt instructs Claude to return only valid JSON — no preamble, no markdown, no explanation. The six required fields are strictly typed with example values to maximize parsing reliability.
| JSON field | Type | Mapped to form field | Notes |
|---|---|---|---|
| device_type | string (enum) | f-dtype | One of 6 fixed values; defaults to "Unknown" if unrecognized |
| manufacturer | string | f-mfr | "Unknown" if brand not legible from photo |
| model_number | string | f-model | "Unknown" if model not visible; Claude often reads front-panel labels |
| serial_number | string | null | f-serial | Filled with "Not visible" in the form if null from AI |
| port_count | integer | null | f-ports | Appended with " ports" in form; "N/A" if null |
| observations | string | f-obs | 2–3 sentences: physical condition, LED state, cabling, notable observations |
null. Best practice: take a dedicated close-up of the serial label
if serial accuracy is critical — or use the Enrich flow to add a second photo specifically
of the label.
Demo mode is the fallback when no API key is configured. It animates the full 6-step flow
using a random profile from DEMO_PROFILES, with realistic delays that match a
real API call. The Demo Mode button in the topbar or the Demo button in the
camera zone triggers it manually.
| Demo Profile | Type | Confidence |
|---|---|---|
| Dell PowerEdge R750 | Server | 94% |
| Cisco Catalyst 9300-48P | Switch | 91% |
| Fortinet FortiGate 200F | Firewall | 87% |
| APC Smart-UPS 3000VA RM | UPS | 89% |
runAI() checks if (!apiKey) and routes to runAIDemo() automatically.aiSource: "Demo Mode". The AI Analyzed counter in session stats excludes these records.
An Anthropic API key with access to claude-sonnet-4-6 is required for live AI
photo analysis. The key is stored in localStorage under ite_api_key
and never sent anywhere except directly to api.anthropic.com.
sk-ant-. Ensure the key has access to claude-sonnet-4-6 (included in standard API access).localStorage which is readable by any JS running in the same
origin. Do not use this tool on shared or untrusted computers without clearing the key afterward.
The anthropic-dangerous-direct-browser-access: true header is required because
browsers normally block direct API calls to third-party origins — this header explicitly opts in
to that pattern. Anthropic's API accepts it for browser-only use cases.
Each record in the records array (and localStorage['ite_records'])
follows this structure. All fields are strings unless noted.
localStorage has a 5–10 MB limit per origin.
With photos embedded, you may hit this limit after 5–10 records with full-resolution images.
Recommendations: resize photos before upload, use the browser's built-in
downscaling, or use the Export CSV feature regularly to back up and clear data.
| localStorage key | Contains | Cleared by |
|---|---|---|
| ite_records | JSON-serialized array of all record objects including embedded photos | Clear All button, manual DevTools clear, or localStorage.removeItem('ite_records') |
| ite_api_key | Anthropic API key string | Saving a blank key, Use Demo Mode, or manual DevTools clear |
localStorage is scoped to the exact origin the file is opened from. If you open
file:///C:/tools/ite-assetdoc.html on two different machines, or move the file
to a different path, the data is not shared. Use Export CSV to move data between
machines or share with the team.
15 pre-built records across 4 clients and 3 sites seed the app on first load via
seedDemoData(). They load only if records.length === 0. Use
Load Demo Data in the Assets toolbar to reload them into an existing session
without replacing current records.
| Client | Site | Assets (count) | Types included |
|---|---|---|---|
| AcmeCorp | Chicago-HQ | 7 | Server ×3, Switch ×2, Firewall ×1, UPS ×1 — includes 1 Needs Review (UPS) and 1 Decommissioned (R630) |
| NovaTech Industries | Chicago-DR | 3 | Server ×1, Firewall ×1, UPS ×1 — all Active, DR site scenario |
| Harbor Financial | Milwaukee-Branch | 3 | Server ×1, Switch ×1 (Needs Review), Patch Panel ×1 |
| Redline Logistics | Chicago-HQ | 2 | Server ×1, Firewall ×1 — both Active |
The Export CSV button in the All Assets toolbar generates a downloadable CSV
file named ITE-ASSETDOC-YYYY-MM-DD.csv. All fields except the embedded photo
are included. Values are double-quoted with internal quotes escaped.
localStorage. If you need
photos archived, export them individually via the detail modal before clearing data.
R02-U14). These stamp every record made until you change them — set them once at the start of each rack survey.Manual entry skips the photo and AI steps entirely. Use it when you know the asset details and don't have a photo, or when the AI analysis fails and you prefer to type data directly.
startManualEntry() which: resets the form, sets all AI-tagged fields to readOnly=false and removes the ai CSS class (purple border), enables the Save button immediately, and stamps aiSource as "Manual Entry".aiSource: "Manual Entry" in the detail view. No photo is embedded (null). The record is fully searchable and editable like any other.Enrichment lets you run a new AI photo analysis against an existing record — updating its AI fields without creating a duplicate. Useful when a record was created in manual or demo mode and you later have a photo, or when you want a better photo of a piece of equipment.
loadIntoCapture() switches to the Capture screen, pre-fills Client, Site, and Rack from the existing record, and shows the enrichment banner at the top of the screen identifying which record is being updated.saveRecord() detects state.isUpdate === true and calls update logic instead of push — finds the existing record by state.updateId, merges the new data, and preserves the original ID. Old photo is kept if no new photo was uploaded.cancelEnrich() which hides the banner, collapses the camera zone, resets state.isUpdate and state.updateId, and calls resetAll().
Colors are defined in the TYPE_COLORS object in JS and applied to: sidebar icons,
search card top borders, asset table placeholder icons, and detail modal header accents.
The six types match the exact values Claude is instructed to return in the AI prompt's
device_type enum — anything outside this set maps to "Other" / gray.
| Status | Badge | Sidebar indicator | Use when |
|---|---|---|---|
| Active | Active | Green dot on badge | Equipment is operational and in production use. Default for all new records. |
| Needs Review | Review | Yellow dot on client accordion header | Something needs attention — failing battery, intermittent port, suspected hardware issue, upcoming decommission. The yellow dot on the client in the sidebar signals this without opening the client. |
| Decommissioned | Decomm | Gray badge, no dot | Equipment has been powered off and is awaiting disposal or has been removed. Kept in records for audit trail. |
The left sidebar renders an accordion tree of all records organized by Client → Site → Asset. Assets within each site are sorted by rack location alphabetically.
mfr + model), rack + type meta row, status badge. Click any row to open the detail modal for that record.status === "Needs Review". Visible even when the client is collapsed.anthropic-dangerous-direct-browser-access: true is required and already included in the request.sk-ant-, and click Save & Connect.claude-sonnet-4-6 given the strict prompt.localStorage is browser-specific and not synced. If you used Chrome to capture records and open the file in Firefox, the data won't be there. Always use the same browser. Export CSV regularly to create portable backups.<option> tags in both the Capture screen (f-client, f-site) and the detail modal edit mode (de-client, de-site). Edit the HTML to add new entries. Both dropdowns need to be updated for consistency.engineer field is hardcoded to "M. Krawczyk" in saveRecord(). To change this, search the JS for engineer: 'M. Krawczyk' and update it, or replace with a dynamic input field.reloadDemoData() checks for ID conflicts before adding — it only adds demo records whose IDs don't already exist. If you have records ASSET-0001 through ASSET-0015 from a previous demo load, nothing will be added. Use Clear All first if you want a clean demo state.ITE-ASSETDOC KB · KrawTech MSP Tooling · eng-_ite-assetdoc.html · v1.0