Val Town Code SearchReturn to Val Town

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;

22  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
23  
24  // API code example
25  const [apiCode, setApiCode] = useState("");
26  const [sdkCode, setSdkCode] = useState("");
27  
54  const emojiPickerContainerRef = useRef(null);
55  
56  // Generate the API URL example whenever the options change
57  useEffect(() => {
58    // Build the API URL
59    const baseUrl = "https://dcm31--1e7e43501a4611f0affa569c3dd06744.web.val.run/";
60    const params = new URLSearchParams();
77    if (debug) params.append("debug", "true");
78    
79    const apiUrl = `${baseUrl}?${params.toString()}`;
80    setApiCode(`// Using fetch to call the API
81fetch("${apiUrl}")
82  .then(response => response.text())
83  .then(svgString => {
581          <div className="mb-6">
582            <div className="flex justify-between items-center mb-2">
583              <h3 className="text-lg font-medium">API Usage</h3>
584              <button
585                onClick={() => copyCode(apiCode)}
586                className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded"
587              >
590            </div>
591            <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
592              {apiCode}
593            </pre>
594          </div>

130   * Create a new instance of the LogoWorkshopSDK
131   * 
132   * @param emojiSdkUrl - Optional custom URL for the EmojiSummarizer API
133   */
134  constructor(emojiSdkUrl: string = EMOJI_SDK_URL) {
326    bgColor = isValidHexColor(bgColor) ? bgColor : "#ffffff";
327    
328    // Calculate optimal font sizes using the exact same algorithm as logoAPI Val
329    const { 
330      topFontSize,
366    }
367    
368    // Generate SVG content using the same implementation as logoAPI Val
369    const svgContent = generateLogoSVG({
370      logoWidth: LOGO_WIDTH,

1# LogoWorkshopOpenMoji SDK
2
3This SDK provides direct programmatic access to the LogoWorkshopOpenMoji logo generation engine. Rather than making HTTP API calls, you can use this SDK to generate logos directly in your code.
4
5## Installation/Import
67## Configuration Options
68
69The SDK accepts the same options as the HTTP API:
70
71```typescript

22  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
23  
24  // API code example
25  const [apiCode, setApiCode] = useState("");
26  const [sdkCode, setSdkCode] = useState("");
27  
54  const emojiPickerContainerRef = useRef(null);
55  
56  // Generate the API URL example whenever the options change
57  useEffect(() => {
58    // Build the API URL
59    const baseUrl = "https://dcm31--1e7e43501a4611f0affa569c3dd06744.web.val.run/";
60    const params = new URLSearchParams();
77    if (debug) params.append("debug", "true");
78    
79    const apiUrl = `${baseUrl}?${params.toString()}`;
80    setApiCode(`// Using fetch to call the API
81fetch("${apiUrl}")
82  .then(response => response.text())
83  .then(svgString => {
581          <div className="mb-6">
582            <div className="flex justify-between items-center mb-2">
583              <h3 className="text-lg font-medium">API Usage</h3>
584              <button
585                onClick={() => copyCode(apiCode)}
586                className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded"
587              >
590            </div>
591            <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
592              {apiCode}
593            </pre>
594          </div>

4
5interface ConversionFormProps {
6  apiKey: string;
7  valUrls: string;
8  projectName: string;
9  isLoading: boolean;
10  onApiKeyChange: (value: string) => void;
11  onValUrlsChange: (value: string) => void;
12  onProjectNameChange: (value: string) => void;
19  isLoadingProjects: boolean;
20  projectsError: string | null;
21  apiKeyHighlightError: boolean;
22  onExistingProjectLabelClick: () => void;
23}
24
25export function ConversionForm({
26  apiKey,
27  valUrls,
28  projectName,
29  isLoading,
30  onApiKeyChange,
31  onValUrlsChange,
32  onProjectNameChange,
39  isLoadingProjects,
40  projectsError,
41  apiKeyHighlightError,
42  onExistingProjectLabelClick,
43}: ConversionFormProps) {
45    <form onSubmit={onSubmit}>
46      <div className="form-group">
47        <label htmlFor="apiKey" className="primary-label">
48          <span role="img" aria-label="key" style={{ marginRight: '10px' }}>🔑</span> API Key
49        </label>
50        <input
51          type="password"
52          id="apiKey"
53          className={apiKeyHighlightError ? "input-error-highlight" : ""}
54          value={apiKey}
55          onChange={(e) => onApiKeyChange(e.target.value)}
56          placeholder="vt_..."
57          required
58        />
59        {apiKeyHighlightError && (
60          <div className="small-text error-text" style={{ marginTop: '5px' }}>
61            API Key is required to load existing projects.
62          </div>
63        )}
64        <div className="helper-text" style={{ marginTop: apiKeyHighlightError ? '5px' : 'var(--space-xs)' }}>
65          <a href="https://www.val.town/settings/api" target="_blank" rel="noopener noreferrer">
66            Get your API key
67          </a> with Project + Val Read/Write permissions
68        </div>
102          </label>
103          <label
104            style={{ fontWeight: 'normal', display: 'flex', alignItems: 'center', position: 'relative', cursor: !apiKey ? 'pointer' : 'default' }}
105            title={!apiKey ? "Enter API key to enable" : isLoadingProjects ? "Loading projects..." : projectsError ? "Error loading projects" : projects.length === 0 ? "No existing projects found" : "Select an existing project"}
106            onClick={onExistingProjectLabelClick}
107          >
111              value="existing"
112              checked={creationMode === "existing"}
113              onChange={() => { if(apiKey && !isLoadingProjects && !projectsError && projects.length > 0) onCreationModeChange("existing"); }}
114              disabled={!apiKey || isLoadingProjects || !!projectsError || projects.length === 0}
115              style={{ marginRight: 'var(--space-xs)' }}
116            />
147              onChange={(e) => onSelectedProjectIdChange(e.target.value)}
148              required={creationMode === "existing"}
149              disabled={isLoadingProjects || projects.length === 0 || !apiKey}
150              style={{ width: '100%', padding: '10px', fontSize: '14px', marginTop: 'var(--space-xs)' }}
151            >