Example Custom Functions

This directory contains example implementations of custom functions that can be used with the Source Code Annotator.

Files

ai-explainer.ts

An AI-powered block explainer that uses OpenAI to generate detailed explanations.

Requirements:

  • Set OPENAI_API_KEY environment variable
  • Val Town Pro subscription (for OpenAI API access)

Test:

curl -X POST https://your-val-url.web.val.run/examples/ai-explainer.ts \ -H "Content-Type: application/json" \ -d '{ "code": "function hello() {\n console.log(\"Hello World\");\n}", "blockInfo": {"start": 1, "end": 3, "type": "function"} }'

enhanced-detector.ts

A more sophisticated block detector with support for various code constructs.

Test:

curl -X POST https://your-val-url.web.val.run/examples/enhanced-detector.ts \ -H "Content-Type: application/json" \ -d '{ "code": "function hello() {\n console.log(\"Hello World\");\n}", "line": 2, "column": 5 }'

custom-highlighter.ts

A custom syntax highlighter with complexity indicators and enhanced styling.

Test:

curl -X POST https://your-val-url.web.val.run/examples/custom-highlighter.ts \ -H "Content-Type: application/json" \ -d '{ "code": "function hello() {\n console.log(\"Hello World\");\n}", "language": "javascript" }'

Usage Examples

Using AI Explainer

https://your-val-url.web.val.run/std/blob?blockExplainer=https://your-val-url.web.val.run/examples/ai-explainer.ts

Using Enhanced Detector

https://your-val-url.web.val.run/std/blob?blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts

Using Custom Highlighter

https://your-val-url.web.val.run/std/blob?syntaxHighlighter=https://your-val-url.web.val.run/examples/custom-highlighter.ts

Using All Together

https://your-val-url.web.val.run/std/blob?syntaxHighlighter=https://your-val-url.web.val.run/examples/custom-highlighter.ts&blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts&blockExplainer=https://your-val-url.web.val.run/examples/ai-explainer.ts

Creating Your Own

To create your own custom functions:

  1. Create a new HTTP val
  2. Handle POST requests with the expected JSON payload
  3. Return the appropriate response format
  4. Use the val URL as a query parameter

See the existing examples for implementation patterns and API contracts.