Val Town Code SearchReturn to Val Town

26});
27
28// --- API Routes for Memories ---
29
30// GET /api/memories - Retrieve all memories
31app.get("/api/memories", async (c) => {
32  const memories = await getAllMemories();
33  return c.json(memories);
34});
35
36// POST /api/memories - Create a new memory
37app.post("/api/memories", async (c) => {
38  const body = await c.req.json<Omit<Memory, "id">>();
39  if (!body.text) {
44});
45
46// PUT /api/memories/:id - Update an existing memory
47app.put("/api/memories/:id", async (c) => {
48  const id = c.req.param("id");
49  const body = await c.req.json<Partial<Omit<Memory, "id">>>();
66});
67
68// DELETE /api/memories/:id - Delete a memory
69app.delete("/api/memories/:id", async (c) => {
70  const id = c.req.param("id");
71  try {
83// --- Blob Image Serving Routes ---
84
85// GET /api/images/:filename - Serve images from blob storage
86app.get("/api/images/:filename", async (c) => {
87  const filename = c.req.param("filename");
88

12      type="image/svg+xml"
13    />
14    <link rel="preconnect" href="https://fonts.googleapis.com" />
15    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16    <link
17      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
18      rel="stylesheet"
19    />

85  console.log(e.text);
86
87  // Get Anthropic API key from environment
88  const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
89  if (!apiKey) {
90    console.error("Anthropic API key is not configured for this val.");
91    return;
92  }
93
94  // Initialize Anthropic client
95  const anthropic = new Anthropic({ apiKey });
96
97  // Process each image attachment serially

92
93/**
94 * Format chat history for Anthropic API
95 */
96function formatChatHistoryForAI(history) {
321bot.on("message", async (ctx) => {
322  try {
323    // Get Anthropic API key from environment
324    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
325    if (!apiKey) {
326      console.error("Anthropic API key is not configured.");
327      ctx.reply(
328        "I apologize, but I'm not properly configured at the moment. Please inform the household administrator."
332
333    // Initialize Anthropic client
334    const anthropic = new Anthropic({ apiKey });
335
336    // Get message text and user info
502  // Set webhook if it is not set yet
503  if (!isEndpointSet) {
504    await bot.api.setWebhook(req.url, {
505      secret_token: SECRET_TOKEN,
506    });

27async function generateConciseWeatherSummary(weatherDay) {
28  try {
29    // Get API key from environment
30    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
31    if (!apiKey) {
32      console.error("Anthropic API key is not configured.");
33      return null;
34    }
35
36    // Initialize Anthropic client
37    const anthropic = new Anthropic({ apiKey });
38
39    const response = await anthropic.messages.create({

77async function generateFunFacts(previousFacts) {
78  try {
79    // Get API key from environment
80    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
81    if (!apiKey) {
82      console.error("Anthropic API key is not configured.");
83      return null;
84    }
85
86    // Initialize Anthropic client
87    const anthropic = new Anthropic({ apiKey });
88
89    // Format previous facts for the prompt

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;

11
12  async summarize(text: string): Promise<{ emoji: string; fullResponse: string; fromCache: boolean }> {
13    const url = `${this.baseUrl}/api/emojisummary?text=${encodeURIComponent(text)}`;
14    const response = await fetch(url);
15    
33  return (
34    <div className="documentation">
35      <h2>API and SDK Documentation</h2>
36      <button onClick={copyDocs}>Copy Documentation</button>
37      <pre ref={docRef}>
38{`Emoji Summarizer API and SDK Documentation
39
40Base URL: https://dcm31-texttoemoji.web.val.run
41
42API Endpoint: /api/emojisummary
43Method: GET
44
46text: String of text to be summarized with an emoji (URL encoded)
47
48Example API usage:
49https://dcm31-texttoemoji.web.val.run/api/emojisummary?text=I%20love%20pizza%20for%20lunch
50
51Response Format:
52{
53  "emoji": "Single emoji summarizing the text",
54  "fullResponse": "JSON string containing the full OpenAI API response",
55  "fromCache": "Boolean indicating whether the response was retrieved from cache"
56}
59{
60  "emoji": "🍕",
61  "fullResponse": "{ ... full OpenAI API response ... }",
62  "fromCache": false
63}
64
65Note: The fullResponse field contains the complete OpenAI API response as a JSON string.
66You may want to parse this JSON string to access specific details of the API response.
67
68Error Handling:
69If an error occurs, the API will return a JSON object with an "error" field describing the issue.
70
71{
75
76Example URLs for testing:
771. Happy: https://dcm31-texttoemoji.web.val.run/api/emojisummary?text=I%20feel%20happy%20today
782. Sad: https://dcm31-texttoemoji.web.val.run/api/emojisummary?text=I'm%20feeling%20down%20and%20blue
793. Excited: https://dcm31-texttoemoji.web.val.run/api/emojisummary?text=I%20can't%20wait%20for%20the%20party%20tonight!
804. Angry: https://dcm31-texttoemoji.web.val.run/api/emojisummary?text=This%20traffic%20is%20making%20me%20furious
81
82SDK Usage:
96   console.log(result.fromCache);
97
98The SDK provides a simple interface to interact with the Emoji Summarizer API.
99
100All vals are hosted on esm.town and are available for import on Val Town, Deno, Node, the browser,
109
110Caching:
111The API now uses SQLite to cache responses. If a request for the same text is made again,
112the cached emoji will be returned without calling the OpenAI API. This reduces API calls
113and improves response times for repeated queries.`}
114      </pre>
117}
118
119function ApiTester() {
120  const [testResults, setTestResults] = useState({});
121  const sdk = new EmojiSummarizerSDK("https://dcm31-texttoemoji.web.val.run");
148
149  return (
150    <div className="api-tester">
151      <h2>API Tester</h2>
152      <div className="test-buttons">
153        {testCases.map(testCase => (
228        </details>
229      )}
230      <ApiTester />
231      <Documentation />
232      <p>
248
249  const url = new URL(request.url);
250  if (request.method === "GET" && url.pathname === "/api/emojisummary") {
251    try {
252      const text = url.searchParams.get("text");
284      }
285
286      // If not in cache, call OpenAI API
287      const completion = await openai.chat.completions.create({
288        messages: [
357  align-items: center;
358}
359form, .api-tester, .documentation {
360  display: flex;
361  flex-direction: column;

5export let test = 42;
6console.log(Deno.env.toObject());
7console.log(Deno.env.get("VAL_TOWN_API_KEY"));
8console.log(Deno.env.get("valtown"));