Val Town Code SearchReturn to Val Town

2import { formatNumber, formatPrice, formatDate } from "../utils/formatters.ts";
3import { PaginationResult, renderPaginationControls } from "../utils/pagination.ts";
4import { CreditAddition } from "../api/credit-additions.ts";
5
6interface CreditAdditionsSummary {

79  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
80  <title>Drywall AI Assistant</title>
81  <link rel="preconnect" href="https://fonts.googleapis.com">
82  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
83  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Oswald:wght@500&display=swap" rel="stylesheet">
84<style>
85  :root {
412<script>
413(function() {
414  const API_URL = '${sourceUrl}';
415  const $ = (selector) => document.querySelector(selector);
416
428  }
429
430  async function handleApiRequest(action, payload, resultsPanel) {
431    resultsPanel.style.display = 'none';
432    loader.style.display = 'block';
435
436    try {
437      const response = await fetch(API_URL, {
438        method: 'POST',
439        headers: { 'Content-Type': 'application/json' },
527      finish_level: $('#finish-level').value,
528    };
529    handleApiRequest('estimate', payload, $('#results-estimator'));
530  });
531  
537    }
538    const payload = { image: currentImageBase64 };
539    handleApiRequest('analyzeImage', payload, $('#results-analyzer'));
540  });
541  
543    e.preventDefault();
544    const payload = { description: $('#project-description').value };
545    handleApiRequest('getFinishRecommendation', payload, $('#results-finishes'));
546  });
547
549    e.preventDefault();
550    const payload = { conditions: $('#site-conditions').value };
551    handleApiRequest('safetyCheck', payload, $('#results-safety'));
552  });
553
559      humidity: $('#humidity').value,
560    };
561    handleApiRequest('calculateMix', payload, $('#results-mixing'));
562  });
563  
599  }
600
601  // Handle API POST requests
602  if (req.method === "POST") {
603    const openai = new OpenAI();

31    const fetchWordlist = async () => {
32      try {
33        const response = await fetch("/api/wordlist");
34        const data = await response.json();
35        setFullWordlist(data);

104- Test with no MCP servers configured (offline mode)
105- Test with MCP servers that fail to connect
106- Test rapid component attachment/detachment
107- Test page refresh with persistent affordances
108- Test cleanup on navigation away from app

136  model: string;
137  max_tokens: number;
138  anthropic_api_key: string;
139  mcp_servers?: Array<{
140    type: string;

17
18export interface AppConfig {
19  anthropicApiKey: string;
20  mcpServers: MCPServerConfig[];
21  selectedModel: string;
47export default function App() {
48  const [config, setConfig] = useState<AppConfig>({
49    anthropicApiKey: "",
50    mcpServers: [],
51    selectedModel: "claude-3-5-sonnet-20241022",
146  // Load config from localStorage on mount
147  useEffect(() => {
148    const savedApiKey = localStorage.getItem("anthropic_api_key");
149    const savedMcpServers = localStorage.getItem("mcp_servers");
150    const savedMessages = localStorage.getItem("chat_messages");
155    let mcpServers = savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS;
156    setConfig({
157      anthropicApiKey: savedApiKey || "",
158      mcpServers: mcpServers,
159      selectedModel: savedModel || "claude-3-5-sonnet-20241022",
172    }
173
174    // Show settings if no API key is configured
175    if (!savedApiKey) {
176      setShowSettings(true);
177    }
180  // Save config to localStorage when it changes
181  useEffect(() => {
182    if (config.anthropicApiKey) {
183      localStorage.setItem("anthropic_api_key", config.anthropicApiKey);
184    }
185    localStorage.setItem("mcp_servers", config.mcpServers?.length ? JSON.stringify(config.mcpServers) : "");

1# Anthropic Streaming Chat with MCP
2
3A mobile-optimized single page chat application that uses the Anthropic Messages API with **real-time streaming** and MCP (Model Context Protocol) server support, featuring **centralized client management** and **performance optimizations**.
4
5Source: https://www.val.town/x/c15r/Chat 
40const clientPool = new MCPClientPool(connectedClients, serverConfigs);
41
42// Unified API across all components
43await clientPool.testServer(serverName);
44await clientPool.fetchTools();
224
225The app stores configuration and chat history in localStorage:
226- `anthropic_api_key`: Your Anthropic API key
227- `selected_model`: The chosen Claude model (defaults to claude-3-5-sonnet-20241022)
228- `mcp_servers`: Array of configured MCP servers
252For detailed testing information, see [TESTING.md](./TESTING.md).
253
254### API Endpoints
255
256- `GET /` - Main application (serves frontend)
263
2641. Open the app at the provided URL
2652. Click "Settings" in the footer to configure your Anthropic API key and select your preferred Claude model
2663. Add/remove/toggle MCP servers as needed
2674. Use the "Test" button next to each MCP server to verify connectivity (shows ✅ for success, ❌ for errors)
308- **Auto-scroll**: Messages automatically scroll to bottom during streaming
309- **Auto-resize**: Input field grows with content
310- **Error Handling**: Clear error messages for API issues with stream recovery
311- **Loading States**: Visual feedback during API calls and streaming
312- **Structured Responses**: MCP tool use and results are displayed in organized, collapsible sections
313- **Clean Interface**: Maximized chat area with no header, footer contains all controls

196  /** Retry a user message */
197  const retryMessage = async (messageId: string) => {
198    if (status !== "idle" || !config.anthropicApiKey) return;
199
200    const userText = onRetryFromMessage(messageId);
222    console.log("[Chat] fire send", { userText, input });
223    const messageText = userText || input.trim();
224    if (!messageText || status !== "idle" || !config.anthropicApiKey) return;
225
226    // Only clear input if we're using the current input (not NextSteps execution)
280  };
281
282  const canSend = input?.trim() && status === "idle" && config.anthropicApiKey;
283
284  /* ── UI ─────────────────────────────────────────────────────── */
286    <>
287      <div className="chat-messages">
288        {!config.anthropicApiKey && (
289          <div className="message system">
290            Please configure your Anthropic API key in settings to start chatting
291          </div>
292        )}
371              }}
372              onKeyDown={handleKeyDown}
373              placeholder={config.anthropicApiKey
374                ? streaming
375                  ? "Streaming…"
377                  ? "Waiting for your input above…"
378                  : "Type your message or / for commands…"
379                : "Configure API key in settings first"}
380              className="chat-input"
381              disabled={!config.anthropicApiKey || thinking || waitingForUser}
382              rows={1}
383            />

123  /* Anthropic SDK instance – memoised so we don't recreate each render */
124  const anthropic = React.useMemo(() => {
125    if (!config.anthropicApiKey) return null;
126    return new Anthropic({
127      dangerouslyAllowBrowser: true,
128      apiKey: config.anthropicApiKey,
129      baseURL: "https://api.anthropic.com",
130      defaultHeaders: {
131        "anthropic-version": "2023-06-01",
133      },
134    });
135  }, [config.anthropicApiKey]);
136
137  /* Abort helper */
167  const streamMessage = React.useCallback(
168    async (messages: any[]): Promise<{ message: AssistantMsg; stopReason: string }> => {
169      if (!anthropic) throw new Error("API key missing");
170
171      // Use the existing buildBody helper but override messages
192        })) as AsyncIterable<MessageStreamEvent>;
193      } catch (err: any) {
194        console.error("Failed to call Anthropic API", err);
195        throw err;
196      }
264  const send = React.useCallback(
265    async (history: Message[], userText: string): Promise<Message[]> => {
266      if (!anthropic) throw new Error("API key missing");
267      if (status !== "idle") throw new Error("Stream already in progress");
268

8    <meta charset="utf-8" />
9    <style>
10    @import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");
11    </style>
12  </head>