Val Town Code SearchReturn to Val Town

42        </h2>
43        <ol>
44          <li>Login with your Val Town API token (with projects:read, projects:write, user:read permissions)</li>
45          <li>Select a project to work on</li>
46          <li>Chat with Claude about your code</li>
79          </div>
80          <h3>Cost Tracking</h3>
81          <p>See estimated API usage costs for each interaction</p>
82        </div>
83      </section>
92        <ul>
93          <li>React frontend with TypeScript</li>
94          <li>Hono API server backend</li>
95          <li>Web Audio API for sound notifications</li>
96          <li>AI SDK for Claude integration</li>
97        </ul>
98        <p>
99          The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your
100          project files directly.
101        </p>

8  const { isAuthenticated, authenticate, error } = useAuth();
9  const [tokenValue, setTokenValue] = useState("");
10  const [apiKey, setApiKey] = useState("");
11  // const [invalid, setInvalid] = useState(""); // TODO
12
13  const handleSubmit = (e) => {
14    e.preventDefault();
15    authenticate(tokenValue, apiKey);
16  };
17
36      >
37        <div>
38          <label htmlFor="valtown-token" className="label">Val Town API Token</label>
39          <div style={{ fontSize: "0.8em", color: "#666" }}>
40            <p>
41              <a href="https://www.val.town/settings/api/new" target="_blank" rel="noreferrer">
42                Create a Val Town token here
43              </a>
58        </div>
59        <div>
60          <label htmlFor="anthropic-api-key" className="label">Anthropic API Key (optional)</label>
61          <input
62            type="password"
63            id="anthropic-api-key"
64            name="anthropic-key"
65            value={apiKey}
66            onChange={e => {
67              setApiKey(e.target.value);
68            }}
69          />