Prompt Details
Model
(claude-4-5-sonnet)
Token size
226
Example input
[USER_REQUEST]: Create an interactive expense tracker that lets users add income/expenses with categories and shows totals.
Example output
Artifact Type: application/vnd.ant.react
// Expense Tracker (excerpt)
import React, { useState, useEffect } from 'react';
export default function ExpenseTracker() {
const [items, setItems] = useState([]);
const total = items.reduce((s, i) => s + i.amount, 0);
return (
<div style={{ padding: 16 }}>
<h1>Expense Tracker</h1>
<p>Total: ¥{total}</p>
{/* add form + list */}
</div>
);
}
Usage: Edit categories, currency, and storage key in localStorage.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
19
Views
CLAUDE-4-5-SONNET
Generate Claude Artifacts with React—interactive apps, dashboards, and calculators. Designed to produce a high-quality starting point quickly; review and small adjustments may be needed. Includes dark mode, localStorage, and charts.
...more
Added over 1 month ago
