Val Town Code SearchReturn to Val Town

10  const [query, setQuery] = React.useState("");
11  const [targetAccount, setTargetAccount] = React.useState("");
12  const [apiKey, setApiKey] = React.useState("");
13  const [searchType, setSearchType] = React.useState("Latest");
14  const [sinceDate, setSinceDate] = React.useState("");
50  const fetchAllTweets = React.useCallback(
51    async (fullQuery, type, targetCount) => {
52      if (!apiKey.trim()) {
53        setError("Please enter your SocialData API Key.");
54        return;
55      }
79          }
80
81          const response = await fetch(`/api/search?${params.toString()}`, {
82            headers: { "X-Api-Key": apiKey },
83          });
84
88            const errorData = await response
89              .json()
90              .catch(() => ({ message: `API Error: ${response.statusText}` }));
91            throw new Error(
92              errorData.message
93                || `API Error: ${response.statusText} on page ${pageNum}`,
94            );
95          }
100          if (data.status === "error") {
101            throw new Error(
102              data.message || `API returned an error on page ${pageNum}`,
103            );
104          }
135      }
136    },
137    [apiKey],
138  );
139
144      return;
145    }
146    if (!apiKey.trim()) {
147      setError("Please enter your SocialData API Key.");
148      return;
149    }
176    { className: "app" },
177    React.createElement("h1", { className: "title" }, "X Search"),
178    // API Key Input
179    React.createElement(
180      "div",
185        React.createElement(
186          "label",
187          { htmlFor: "apiKey", className: "label" },
188          "API Key",
189        ),
190        React.createElement("input", {
191          type: "password",
192          id: "apiKey",
193          value: apiKey,
194          onChange: (e) => setApiKey(e.target.value),
195          placeholder: "Enter SocialData API Key",
196          className: "input",
197        }),
565          rel: "noopener noreferrer",
566        },
567        "SocialData API",
568      ),
569      " | ",
598  const url = new URL(request.url);
599
600  // Search API Proxy Endpoint
601  if (url.pathname === "/api/search" && request.method === "GET") {
602    const apiKey = request.headers.get("X-Api-Key");
603    if (!apiKey) {
604      return Response.json(
605        { status: "error", message: "API Key missing in request" },
606        { status: 400 },
607      );
619    }
620
621    const apiUrl = new URL("https://api.socialdata.tools/twitter/search");
622    apiUrl.searchParams.set("query", query);
623    apiUrl.searchParams.set("type", type);
624    if (cursor) apiUrl.searchParams.set("cursor", cursor);
625
626    try {
627      const apiResponse = await fetch(apiUrl.toString(), {
628        headers: {
629          Authorization: `Bearer ${apiKey}`,
630          Accept: "application/json",
631        },
634      let responseData;
635      try {
636        responseData = await apiResponse.json();
637      } catch (e) {
638        const text = await apiResponse.text();
639        console.error("Non-JSON response from SocialData:", text);
640        return Response.json(
641          {
642            status: "error",
643            message: `SocialData API non-JSON response: ${apiResponse.statusText}`,
644          },
645          { status: apiResponse.status },
646        );
647      }
648
649      if (!apiResponse.ok || responseData.status === "error") {
650        console.error(
651          `SocialData API Error (${apiResponse.status}):`,
652          responseData,
653        );
656            status: "error",
657            message: responseData?.message
658              || `SocialData API Error: ${apiResponse.statusText}`,
659          },
660          { status: apiResponse.status },
661        );
662      }

41    : `applications/${DISCORD_APP_ID}/commands`;
42
43  console.log(`📡 Using API endpoint: ${endpoint}`);
44
45  try {
49
50    // Register the command using POST for a single command
51    const response = await fetch(`https://discord.com/api/v10/${endpoint}`, {
52      method: "POST", // Using POST for single command creation
53      headers: {

19  console.log(`📤 Sending follow-up message: ${content}`);
20  try {
21    await fetch(`https://discord.com/api/v10/webhooks/${applicationId}/${interactionToken}/messages/@original`, {
22      method: "PATCH",
23      headers: {

50    : `applications/${DISCORD_APP_ID}/commands`;
51
52  console.log(`📡 Using API endpoint: ${endpoint}`);
53
54  try {
58
59    // Register the command using POST for a single command
60    const response = await fetch(`https://discord.com/api/v10/${endpoint}`, {
61      method: "POST", // Using POST for single command creation
62      headers: {

57    : `applications/${DISCORD_APP_ID}/commands`;
58
59  console.log(`📡 Using API endpoint: ${endpoint}`);
60  const results = [];
61
67
68      // Register the command using POST for a single command
69      const response = await fetch(`https://discord.com/api/v10/${endpoint}`, {
70        method: "POST", // Using POST for single command creation
71        headers: {

50    : `applications/${DISCORD_APP_ID}/commands`;
51
52  console.log(`📡 Using API endpoint: ${endpoint}`);
53
54  try {
58
59    // Register the command using POST for a single command
60    const response = await fetch(`https://discord.com/api/v10/${endpoint}`, {
61      method: "POST", // Using POST for single command creation
62      headers: {

35    : `applications/${DISCORD_APP_ID}/commands`;
36
37  console.log(`📡 Using API endpoint: ${endpoint}`);
38
39  try {
41    console.log("🔍 Checking current commands...");
42
43    const getResponse = await fetch(`https://discord.com/api/v10/${endpoint}`, {
44      method: "GET",
45      headers: {
62
63    // Send empty array to unregister all commands
64    const response = await fetch(`https://discord.com/api/v10/${endpoint}`, {
65      method: "PUT",
66      headers: {

9- **File Browser**: Select specific files to include in the context window for more focused AI assistance
10- **Branch Management**: View, select, and create branches without leaving the app
11- **Cost Tracking**: See estimated API usage costs for each interaction
12- **Sound Notifications**: Get alerted when Claude finishes responding
13- **Mobile-Friendly**: Works on both desktop and mobile devices
14- **Usage Dashboard**: Monitor API usage and inference calls with detailed analytics
15
16## How It Works
17
181. **Login**: Authenticate with your Val Town API token and Anthropic API key
192. **Select a Project**: Choose which Val Town project you want to work on
203. **Select Files**: Browse your project files and select which ones to include in the context window
26### Prerequisites
27
28- A Val Town account with API access
29- An Anthropic API key (Claude 3.7 Sonnet)
30
31### Setup
32
331. Visit the OpenTownie app
342. Enter your Val Town API token (with `projects:write` and `users:read` permissions)
353. Enter your Anthropic API key
364. Click "Login" to access your projects
37
49- React frontend with TypeScript
50- React Router
51- Hono API server backend
52- Web Audio API for sound notifications
53- AI SDK for Claude integration
54
55The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
56
57## Privacy & Security
58
59- Your Val Town API token and Anthropic API key are stored locally in your browser
60- No data is stored on our servers
61- All communication with the APIs is done directly from your browser
62

19  finish_reason?: string;
20  num_images?: number;
21  our_api_token: boolean;
22}
23
44      finish_reason TEXT,
45      num_images INTEGER,
46      our_api_token INTEGER NOT NULL,
47      finish_timestamp INTEGER
48    )

20      SUM(num_images) as total_images
21    FROM ${USAGE_TABLE}
22    WHERE our_api_token = 1
23    GROUP BY user_id, username
24    ORDER BY total_price DESC