Val Town Code SearchReturn to Val Town

14
15// Public route without authentication
16app.get("/api/public/:id", async (c) => {
17  const key = `__public/${c.req.param("id")}`;
18  const { blob } = await import("https://esm.town/v/std/blob");
132};
133
134app.get("/api/blobs", checkAuth, async (c) => {
135  const prefix = c.req.query("prefix") || "";
136  const limit = parseInt(c.req.query("limit") || "20", 10);
141});
142
143app.get("/api/blob", checkAuth, async (c) => {
144  const key = c.req.query("key");
145  if (!key) return c.text("Missing key parameter", 400);
149});
150
151app.put("/api/blob", checkAuth, async (c) => {
152  const key = c.req.query("key");
153  if (!key) return c.text("Missing key parameter", 400);
158});
159
160app.delete("/api/blob", checkAuth, async (c) => {
161  const key = c.req.query("key");
162  if (!key) return c.text("Missing key parameter", 400);
166});
167
168app.post("/api/blob", checkAuth, async (c) => {
169  const { file, key } = await c.req.parseBody();
170  if (!file || !key) return c.text("Missing file or key", 400);

70  const menuRef = useRef(null);
71  const isPublic = blob.key.startsWith("__public/");
72  const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
73
74  useEffect(() => {
234    setLoading(true);
235    try {
236      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
237      const data = await response.json();
238      setBlobs(data);
261      setBlobContentLoading(true);
262      try {
263        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
264        const content = await response.text();
265        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
275  const handleSave = async () => {
276    try {
277      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
278        method: "PUT",
279        body: editContent,
287  const handleDelete = async (key) => {
288    try {
289      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
290      setBlobs(blobs.filter(b => b.key !== key));
291      if (selectedBlob && selectedBlob.key === key) {
304        const key = `${searchPrefix}${file.name}`;
305        formData.append("key", encodeKey(key));
306        await fetch("/api/blob", { method: "POST", body: formData });
307        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
308        setBlobs([newBlob, ...blobs]);
326      try {
327        const fullKey = `${searchPrefix}${key}`;
328        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
329          method: "PUT",
330          body: "",
341  const handleDownload = async (key) => {
342    try {
343      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
344      const blob = await response.blob();
345      const url = window.URL.createObjectURL(blob);
360    if (newKey && newKey !== oldKey) {
361      try {
362        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
363        const content = await response.blob();
364        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
365          method: "PUT",
366          body: content,
367        });
368        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
369        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
370        if (selectedBlob && selectedBlob.key === oldKey) {
380    const newKey = `__public/${key}`;
381    try {
382      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
383      const content = await response.blob();
384      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
385        method: "PUT",
386        body: content,
387      });
388      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
389      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
390      if (selectedBlob && selectedBlob.key === key) {
399    const newKey = key.slice(9); // Remove "__public/" prefix
400    try {
401      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
402      const content = await response.blob();
403      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
404        method: "PUT",
405        body: content,
406      });
407      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
408      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
409      if (selectedBlob && selectedBlob.key === key) {
554                        onClick={() =>
555                          copyToClipboard(
556                            `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
557                          )}
558                        className="text-blue-400 hover:text-blue-300 text-sm"
577                        >
578                          <img
579                            src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
580                            alt="Blob content"
581                            className="max-w-full h-auto"

197});
198
199// API documentation endpoint
200app.get("/api/docs", async (c) => {
201  const { TOOLS } = await import("./mcp/tools.ts");
202  
207      mcp: "POST /mcp - Main MCP protocol endpoint",
208      health: "GET /health - Health check",
209      docs: "GET /api/docs - This documentation"
210    },
211    examples: {

125              <div className="flex items-center gap-2">
126                <span>{getMessageIcon(message.role)}</span>
127                <span className="font-semibold capitalize">{message.role}</span>
128              </div>
129              <span className="text-xs text-gray-500">

2import React, { useState } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3
4interface ApiKeyInputProps {
5  apiKey: string;
6  onApiKeyChange: (key: string) => void;
7}
8
9export function ApiKeyInput({ apiKey, onApiKeyChange }: ApiKeyInputProps) {
10  const [isVisible, setIsVisible] = useState(false);
11  const [tempKey, setTempKey] = useState(apiKey);
12
13  const handleSave = () => {
14    onApiKeyChange(tempKey);
15  };
16
17  const handleClear = () => {
18    setTempKey('');
19    onApiKeyChange('');
20    localStorage.removeItem('anthropic_api_key');
21  };
22
23  return (
24    <div className="bg-white rounded-lg shadow-md p-6">
25      <h2 className="text-2xl font-semibold text-gray-800 mb-4">🔑 Anthropic API Key</h2>
26      
27      <div className="space-y-4">
28        <div>
29          <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700 mb-2">
30            Enter your Anthropic API Key
31          </label>
32          <div className="flex gap-2">
33            <div className="flex-1 relative">
34              <input
35                id="apiKey"
36                type={isVisible ? "text" : "password"}
37                value={tempKey}
38                onChange={(e) => setTempKey(e.target.value)}
39                placeholder="sk-ant-api03-..."
40                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
41              />
67          <p className="mb-2">
68            <strong>Status:</strong>{' '}
69            <span className={apiKey ? 'text-green-600' : 'text-red-600'}>
70              {apiKey ? '✅ API key configured' : '❌ No API key set'}
71            </span>
72          </p>
73          <p className="mb-2">
74            Your API key is stored locally in your browser and sent directly to Anthropic's API.
75          </p>
76          <p>
77            Get your API key from{' '}
78            <a 
79              href="https://console.anthropic.com/account/keys" 

2import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import { MCPClient } from "./MCPClient.tsx";
4import { ApiKeyInput } from "./ApiKeyInput.tsx";
5import { ChatInterface } from "./ChatInterface.tsx";
6
23
24export function App() {
25  const [apiKey, setApiKey] = useState<string>('');
26  const [messages, setMessages] = useState<Message[]>([]);
27  const [isLoading, setIsLoading] = useState(false);
29  const [availableTools, setAvailableTools] = useState<any[]>([]);
30
31  // Initialize MCP client and load API key from localStorage
32  useEffect(() => {
33    const savedApiKey = localStorage.getItem('anthropic_api_key');
34    if (savedApiKey) {
35      setApiKey(savedApiKey);
36    }
37
52      id: '1',
53      role: 'system',
54      content: 'Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.',
55      timestamp: new Date()
56    }]);
57  }, []);
58
59  const handleApiKeyChange = (key: string) => {
60    setApiKey(key);
61    localStorage.setItem('anthropic_api_key', key);
62  };
63
64  const sendMessage = async (content: string) => {
65    if (!apiKey.trim()) {
66      alert('Please enter your Anthropic API key first');
67      return;
68    }
92When you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;
93
94      // Call Anthropic API
95      const response = await fetch('https://api.anthropic.com/v1/messages', {
96        method: 'POST',
97        headers: {
98          'Content-Type': 'application/json',
99          'x-api-key': apiKey,
100          'anthropic-version': '2023-06-01'
101        },
121      if (!response.ok) {
122        const errorData = await response.json();
123        throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);
124      }
125
205
206        <div className="grid gap-6">
207          <ApiKeyInput 
208            apiKey={apiKey} 
209            onApiKeyChange={handleApiKeyChange}
210          />
211          

8- **SQLite Database**: Execute queries and manage database operations
9- **Email**: Send emails through Val Town's email service
10- **OpenAI Integration**: Access OpenAI API through Val Town's service
11- **File Operations**: Read and list project files
12- **Environment Variables**: Access environment configuration
20- JSON-RPC 2.0 compliant messaging
21
22## API Endpoints
23
24- `POST /mcp` - Main MCP protocol endpoint
34- **MCP Protocol**: `POST /mcp` - JSON-RPC 2.0 endpoint for MCP requests
35- **Health Check**: `GET /health` - Server health status
36- **API Documentation**: `GET /api/docs` - Complete API documentation in JSON format
37
38### Example MCP Requests

86  {
87    name: "openai_chat",
88    description: "Generate text using OpenAI's chat completion API",
89    inputSchema: {
90      type: "object",

13## Authentication
14
15Login to your SQLite Explorer with [password authentication](https://www.val.town/v/pomdtr/password_auth) with your [Val Town API Token](https://www.val.town/settings/api) as the password.
16
17## Todos / Plans

27      <head>
28        <title>SQLite Explorer</title>
29        <link rel="preconnect" href="https://fonts.googleapis.com" />
30
31        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
32        <link
33          href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
34          rel="stylesheet"
35        />