Val Town Code SearchReturn to Val Town

1import type { Meta, StoryObj } from "@storybook/react";
2import { DashboardCard } from "./DashboardCard";
3

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5// User credentials mapping
201  const [error, setError] = useState("");
202
203  const handleSubmit = (e: React.FormEvent) => {
204    e.preventDefault();
205    if (USER_CREDENTIALS[username] === password) {

1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5## Getting started
13- The **client-side entrypoint** is [`/frontend/index.html`](/frontend/index.html)
14  - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)
15  - which in turn imports the React app from [`/frontend/components/App.tsx`](/frontend/components/App.tsx).
16
17So if you wanted to get a sense of how this app comes together, we suggest reading the files in this order: 
21## Further resources
22
23- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a bigger example project, with a SQLite database table, queries, client-side CSS, a favicon, and shared code that runs on both client and server.

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/frontend/style.css">
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
6  return (
7    <div>
8      <h1>Val Town React + Hono Starter</h1>
9      I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
10    </div>

1// This val creates a form to input a Zillow or Craigslist link, determines the link type,
2// calls the appropriate scraping API, and renders the results in a table.
3// It uses React for the UI, fetch for API calls, and basic string manipulation for link validation.
4
5/** @jsxImportSource https://esm.sh/react */
6import React, { useState } from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9function App() {

1// This val creates a form to input a Zillow or Craigslist link, determines the link type,
2// calls the appropriate scraping API, and renders the results in a table.
3// It uses React for the UI, fetch for API calls, and basic string manipulation for link validation.
4
5/** @jsxImportSource https://esm.sh/react */
6import React, { useState } from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9function App() {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Anthropic, { MessageStreamEvent } from "https://esm.sh/@anthropic-ai/sdk";
3import React from "https://esm.sh/react@18.2.0";
4
5// External shared types
193
194export default function useAnthropicStream(config: AppConfig) {
195  const [status, setStatus] = React.useState<Status>("idle");
196  const [liveBlocks, setLiveBlocks] = React.useState<any[] | null>(null);
197  const [pendingTool, setPendingTool] = React.useState<PendingToolExecution | null>(null);
198  const abortRef = React.useRef<AbortController | null>(null);
199
200  /* Anthropic SDK instance – memoised so we don't recreate each render */
201  const anthropic = React.useMemo(() => {
202    if (!config.anthropicApiKey) return null;
203    return new Anthropic({
213
214  /* Abort helper */
215  const abort = React.useCallback(() => {
216    abortRef.current?.abort();
217    abortRef.current = null;
226
227  /* Resolve pending tool execution */
228  const resolvePendingTool = React.useCallback((response: string) => {
229    if (pendingTool) {
230      pendingTool.resolve(response);
234
235  /* Cancel pending tool execution */
236  const cancelPendingTool = React.useCallback(() => {
237    if (pendingTool) {
238      pendingTool.resolve("(No response provided)");
242
243  /* Stream a single message */
244  const streamMessage = React.useCallback(
245    async (messages: any[]): Promise<{ message: AssistantMsg; stopReason: string }> => {
246      if (!anthropic) throw new Error("API key missing");
336
337  /* Main send/stream function with tool use loop */
338  const send = React.useCallback(
339    async (history: Message[], userText: string): Promise<Message[]> => {
340      if (!anthropic) throw new Error("API key missing");

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4import type { NextStepsOutput, AskUserToolInput } from "../../shared/types.ts";
5import { MCPClient } from "../utils/MCPClient.ts";