Claude 3.5 Sonnect Artifact System Prompt

Leaked prompt

My takeaways:

1. The system prompt itself is agentic (goals + constraints + instructions). This is a maturing pattern for effective prompting.
2. XML as promising AI native data format. Note that Claude is biased to output XML. Their prompts are not portable to gpt-4o which is biased to output JSON.
3. Claude can execute JavaScript in a browser environment (validating our same approach in Knowledge Studio) but cannot execute python code like GPT. Claude's JavaScript code can access any libraries packaged for browser use, typically hosted on a public CDN. Simon Willison's demo accessed pdf.js, and impressively, loaded that 3rd party library via a web worker.
4. Artifact can be repurposed as the human-read/writable long-term memory for an agent.
5. Artifact can be explicitly addressed (validating Knowledge Studio's approach to addressing environment objects)
6. Prompt trick Here are some examples of correct usage of artifacts by other AI assistants: I wonder if it mentions other AI assistants to avoid Claude over-indexing on the example.
7. A well documented ui library with good developer API is enough for AI code generation. Claude uses https://ui.shadcn.com/
8. The underlying cognitive architecture is still ReAct. <antThinking> is the equivalent of GPT's Reason: in ReAct.

To circumvent the limitation on what's javasript library is packaged for browser use, I found https://esm.sh/ to be a promising solution. You can:

• Use esbuild wasm to compile the entry point file that contains import {...} from "..." without leaving the browser.
• Use importmap to alias the imported package names to an esm.sh url
• Have esm.sh resolve rest of the import graph.

Based on this idea, I created esplay to run any TypeScript/TSX code in the browser, allowing module import for arbitrary npm packages. And with that, my side project iter received the artifact upgrade!