Val Town Code SearchReturn to Val Town

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

120
121export default async function server(request: Request): Promise<Response> {
122  // Todoist API endpoint
123  const TODOIST_API_BASE = "https://api.todoist.com/rest/v2";
124
125  // Check for Todoist tasks request
126  if (new URL(request.url).pathname === "/todoist-tasks") {
127    // Retrieve Todoist API token from environment
128    const apiToken = Deno.env.get("TODOIST_API_TOKEN");
129
130    if (!apiToken) {
131      return new Response(
132        JSON.stringify({
133          error: "Todoist API token not configured",
134        }),
135        {
142    try {
143      // Fetch active tasks from Todoist
144      const todoistResponse = await fetch(`${TODOIST_API_BASE}/tasks`, {
145        headers: {
146          "Authorization": `Bearer ${apiToken}`,
147          "Content-Type": "application/json",
148        },

26Focus on identifying:
27- Symptoms or characteristics of ASD (e.g., "difficulty with social communication", "repetitive behaviors", "sensory sensitivities").
28- Types of therapies and interventions (e.g., "Applied Behavior Analysis (ABA)", "speech therapy", "occupational therapy", "DIR Floortime").
29- Diagnostic processes and criteria (e.g., "ADOS assessment", "early diagnosis", "developmental screening").
30- Educational approaches and supports (e.g., "Individualized Education Program (IEP)", "special education services", "inclusive classrooms").
371    <script>
372        const tagsData = ${tagsJson};
373        const sourceApiUrl = "${sourceUrl}"; // For form submission
374
375        function escapeHtml(unsafe) {
510
511                  try {
512                      const response = await fetch(sourceApiUrl, {
513                          method: 'POST',
514                          body: formData // FormData handles multipart/form-data encoding
653  }
654
655  // --- Helper Function: Call OpenAI API ---
656  async function callOpenAI(
657    openai: OpenAI,

21  const webhookSecret = process.env.githubWebhookApproveSmallPRs;
22  // the token to make github requests (needs `repo` permissions)
23  const githubApiToken = process.env.githubApproveSmallPRsToken;
24
25  let valHttpUrl = "https://val.town";
68  const { Octokit } = await import("npm:@octokit/core");
69  const octokit = new Octokit({
70    auth: githubApiToken,
71  });
72  const { repository, organization } = payload;
108      event: "APPROVE",
109      headers: {
110        "X-GitHub-Api-Version": "2022-11-28",
111      },
112    },

1import { API_URL } from "https://esm.town/v/std/API_URL";
2import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
3import ValTown from "npm:@valtown/sdk";
28);
29
30// Example of using the API to create a new val with a single file
31// First create the val
32const valResponse = await fetch(
33  `${API_URL}/v2/vals`,
34  {
35    method: "POST",
36    body: JSON.stringify({
37      name: "new-val-api",
38      privacy: "public",
39      description: "This is an example of using the API to create a val.",
40    }),
41    headers: {
53const val = await valResponse.json();
54const fileResponse = await fetch(
55  `${API_URL}/v2/vals/${val.id}/files?path=main.tsx`,
56  {
57    method: "POST",
58    body: JSON.stringify({
59      content: "This is an example of using the API to create a script file at the root.",
60      type: "script",
61    }),

1# v2/vals Example: Creating a val with a script file
2
3This val shows how to create a val and add a script file to it both with the SDK and with the API. You can find both examples in `main.tsx`.
4
5### Getting Started
61. Remix this project
72. Create your own API token [here](https://www.val.town/settings/api/new) with **Val: Read and write** permissions
83. Create an environment variable in your remixed project called `VAL_RW_TOKEN` and paste your new API token into it
94. Run `main.tsx` and you'll create 2 new vals in your account: `new-val-sdk` and `new-val-api`

25Focus on identifying:
26- Symptoms or characteristics of ASD (e.g., "difficulty with social communication", "repetitive behaviors", "sensory sensitivities").
27- Types of therapies and interventions (e.g., "Applied Behavior Analysis (ABA)", "speech therapy", "occupational therapy", "DIR Floortime").
28- Diagnostic processes and criteria (e.g., "ADOS assessment", "early diagnosis", "developmental screening").
29- Educational approaches and supports (e.g., "Individualized Education Program (IEP)", "special education services", "inclusive classrooms").
500  }
501
502  // --- Helper Function: Call OpenAI API (Unchanged from previous) ---
503  async function callOpenAI(
504    openai: OpenAI,
585        } else if (
586          ct.includes("text/html") || ct.includes("text/plain") || ct === "" || ct.includes("application/json")
587        ) { // Added json for APIs
588          docText = await res.text();
589          if (!docText?.trim()) throw new Error("Fetched empty text from URL.");

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>

97
98export async function sendDailyBriefing(chatId?: string, today?: DateTime) {
99  // Get API keys from environment
100  const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
101  const telegramToken = Deno.env.get("TELEGRAM_TOKEN");
102
106  }
107
108  if (!apiKey) {
109    console.error("Anthropic API key is not configured.");
110    return;
111  }
122
123  // Initialize Anthropic client
124  const anthropic = new Anthropic({ apiKey });
125
126  // Initialize Telegram bot
162
163  // disabled title for now, it seemes unnecessary...
164  // await bot.api.sendMessage(chatId, `*${title}*`, { parse_mode: "Markdown" });
165
166  // Then send the main content
169
170  if (content.length <= MAX_LENGTH) {
171    await bot.api.sendMessage(chatId, content, { parse_mode: "Markdown" });
172    // Store the briefing in chat history
173    await storeChatMessage(
198    // Send each chunk as a separate message and store in chat history
199    for (const chunk of chunks) {
200      await bot.api.sendMessage(chatId, chunk, { parse_mode: "Markdown" });
201      // Store each chunk in chat history
202      await storeChatMessage(