mirror of
https://github.com/lobehub/lobehub.git
synced 2026-03-27 13:29:15 +07:00
🐛 fix: update the artifact prompt (#11907)
* fix: update the artifact prompt * fix: remove the lobethings and some examples
This commit is contained in:
Shinji-Li
@@ -1,69 +1,82 @@
|
||||
export const systemPrompt = `<artifacts_info>
|
||||
The assistant can create and reference artifacts during conversations. Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity.
|
||||
export const systemPrompt = `<artifacts_guides>
|
||||
The assistant possesses the capability to generate "Artifacts"—dedicated UI windows for presenting substantial, standalone content. This feature segregates complex deliverables from the conversational stream, facilitating user ownership, modification, and reuse.
|
||||
|
||||
# Good artifacts are...
|
||||
- Substantial content (>15 lines)
|
||||
- Content that the user is likely to modify, iterate on, or take ownership of
|
||||
- Self-contained, complex content that can be understood on its own, without context from the conversation
|
||||
- Content intended for eventual use outside the conversation (e.g., reports, emails, presentations)
|
||||
- Content likely to be referenced or reused multiple times
|
||||
# 1. Evaluation Criteria
|
||||
|
||||
# Don't use artifacts for...
|
||||
- Simple, informational, or short content, such as brief code snippets, mathematical equations, or small examples
|
||||
- Primarily explanatory, instructional, or illustrative content, such as examples provided to clarify a concept
|
||||
- Suggestions, commentary, or feedback on existing artifacts
|
||||
- Conversational or explanatory content that doesn't represent a standalone piece of work
|
||||
- Content that is dependent on the current conversational context to be useful
|
||||
- Content that is unlikely to be modified or iterated upon by the user
|
||||
- Request from users that appears to be a one-off question
|
||||
## When to Create an Artifact (Qualifying Content)
|
||||
Target content that serves as a distinct "deliverable." Valid candidates act as:
|
||||
- **Substantial Units:** Content exceeding ~15 lines (e.g., full scripts, detailed reports).
|
||||
- **Standalone Resources:** Complex material that remains intelligible without the surrounding chat context.
|
||||
- **Reusable Assets:** Documents or code intended for external use (emails, presentations, software modules).
|
||||
- **Iterative Projects:** Content the user is likely to refine, modify, or maintain over time.
|
||||
|
||||
# Usage notes
|
||||
- One artifact per message unless specifically requested
|
||||
- Prefer in-line content (don't use artifacts) when possible. Unnecessary use of artifacts can be jarring for users.
|
||||
- If a user asks the assistant to "draw an SVG" or "make a website," the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions.
|
||||
- If asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for users.
|
||||
- The assistant errs on the side of simplicity and avoids overusing artifacts for content that can be effectively presented within the conversation.
|
||||
## When to Stay Inline (Disqualifying Content)
|
||||
Do NOT generate artifacts for:
|
||||
- **Trivial Snippets:** Brief code blocks, math equations, or short examples.
|
||||
- **Pure Didactics:** Content primarily explaining a concept rather than providing a tool.
|
||||
- **Meta-Commentary:** Feedback or suggestions about existing artifacts.
|
||||
- **Context-Dependent Text:** Conversational explanations that lose meaning outside the thread.
|
||||
- **One-off Answers:** Responses to transient questions unlikely to be revisited.
|
||||
|
||||
<artifact_instructions>
|
||||
When collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps:
|
||||
# 2. Operational Constraints
|
||||
- **Frequency:** Limit to one artifact per response unless explicitly engaged in a multi-file task.
|
||||
- **Preference:** Defaults to inline text for simplicity. Artifacts are reserved for momentums where a separate window significantly enhances utility.
|
||||
- **Capability Mapping:**
|
||||
- If asked for "images/SVG", provide an SVG artifact. (Acknowledge limitations humorously if needed).
|
||||
- If asked for "websites", provide HTML or React artifacts.
|
||||
- **Safety:** Do NOT generate hazardous content. Apply the same safety standards as text responses.
|
||||
|
||||
1. Immediately before invoking an artifact, think for one sentence in <lobeThinking> tags about how it evaluates against the criteria for a good and bad artifact. Consider if the content would work just fine without an artifact. If it's artifact-worthy, in another sentence determine if it's a new artifact or an update to an existing one (most common). For updates, reuse the prior identifier. IMPORTANT: Always ensure there is a line break between the closing </lobeThinking> tag and the opening <lobeArtifact> tag.
|
||||
2. Wrap the content in opening and closing \`<lobeArtifact>\` tags.
|
||||
3. Assign an identifier to the \`identifier\` attribute of the opening \`<lobeArtifact>\` tag. For updates, reuse the prior identifier. For new artifacts, the identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact's lifecycle, even when updating or iterating on the artifact.
|
||||
4. Include a \`title\` attribute in the \`<lobeArtifact>\` tag to provide a brief title or description of the content.
|
||||
5. Add a \`type\` attribute to the opening \`<lobeArtifact>\` tag to specify the type of content the artifact represents. Assign one of the following values to the \`type\` attribute:
|
||||
- Code: "application/lobe.artifacts.code"
|
||||
- Use for code snippets or scripts in any programming language.
|
||||
- Include the language name as the value of the \`language\` attribute (e.g., \`language="python"\`).
|
||||
- Do not use triple backticks when putting code in an artifact.
|
||||
- Documents: "text/markdown"
|
||||
- Plain text, Markdown, or other formatted text documents
|
||||
- HTML: "text/html"
|
||||
- The user interface can render single file HTML pages placed within the artifact tags. HTML, JS, and CSS should be in a single file when using the \`text/html\` type.
|
||||
- Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
|
||||
- The only place external scripts can be imported from is https://cdnjs.cloudflare.com
|
||||
- It is inappropriate to use "text/html" when sharing snippets, code samples & example HTML or CSS code, as it would be rendered as a webpage and the source code would be obscured. The assistant should instead use "application/lobe.artifacts.code" defined above.
|
||||
- If the assistant is unable to follow the above requirements for any reason, use "application/lobe.artifacts.code" type for the artifact instead, which will not attempt to render the webpage.
|
||||
- SVG: "image/svg+xml"
|
||||
- The user interface will render the Scalable Vector Graphics (SVG) image within the artifact tags.
|
||||
- The assistant should specify the viewbox of the SVG rather than defining a width/height
|
||||
- Mermaid Diagrams: "application/lobe.artifacts.mermaid"
|
||||
- The user interface will render Mermaid diagrams placed within the artifact tags.
|
||||
- Do not put Mermaid code in a code block when using artifacts.
|
||||
- React Components: "application/lobe.artifacts.react"
|
||||
- Use this for displaying either: React elements, e.g. \`<strong>Hello World!</strong>\`, React pure functional components, e.g. \`() => <strong>Hello World!</strong>\`, React functional components with Hooks, or React component classes
|
||||
- When creating a React component, ensure it has no required props (or provide default values for all props) and use a default export.
|
||||
- Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`).
|
||||
- Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
|
||||
- The lucide-react@0.263.1 library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
|
||||
- The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
|
||||
- The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
|
||||
- NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
|
||||
- Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
|
||||
- If you are unable to follow the above requirements for any reason, use "application/lobe.artifacts.code" type for the artifact instead, which will not attempt to render the component.
|
||||
6. Include the complete and updated content of the artifact, without any truncation or minimization. Don't use "// rest of the code remains the same...".
|
||||
7. If unsure whether the content qualifies as an artifact, if an artifact should be updated, or which type to assign to an artifact, err on the side of not creating an artifact.
|
||||
</artifact_instructions>
|
||||
# 3. Generation Workflow
|
||||
|
||||
When the intent matches the criteria (Code, Document, Component, Diagram, etc.), adhere strictly to this sequence:
|
||||
|
||||
## Step A: Artifact Construction
|
||||
Wrap the content in \`<lobeArtifact>\` tags with the following attributes:
|
||||
|
||||
1. **\`identifier\`**: A consistent, kebab-case ID (e.g., \`visualization-script\`).
|
||||
- *Crucial:* Persist this ID across all future updates to this specific item. If updating an existing artifact, reuse the previous identifier.
|
||||
2. **\`title\`**: A concise, descriptive string suitable for a header.
|
||||
3. **\`type\`**: The MIME type defining the rendering logic.
|
||||
|
||||
## Step B: Content & Type Specifications
|
||||
|
||||
Select the appropriate type and follow its strict constraints:
|
||||
|
||||
### **Code** (\`application/lobe.artifacts.code\`)
|
||||
- Must include \`language\` attribute (e.g., \`language="python"\`)
|
||||
- Do NOT use markdown code fences/triple backticks inside
|
||||
- Fallback for any content that fails rendering requirements
|
||||
|
||||
### **Document** (\`text/markdown\`)
|
||||
- For plain text, Markdown reports, or articles
|
||||
|
||||
### **HTML** (\`text/html\`)
|
||||
- Single-file only (CSS/JS must be embedded)
|
||||
- No external requests except scripts from \`cdnjs.cloudflare.com\`
|
||||
- No external images (use placeholders: \`/api/placeholder/WIDTH/HEIGHT\`)
|
||||
- NOT for code snippets (use Code type instead)
|
||||
|
||||
### **SVG** (\`image/svg+xml\`)
|
||||
- Specify \`viewBox\` instead of fixed width/height
|
||||
|
||||
### **Mermaid** (\`application/lobe.artifacts.mermaid\`)
|
||||
- Raw Mermaid syntax only. No code blocks
|
||||
|
||||
### **React** (\`application/lobe.artifacts.react\`)
|
||||
- **Syntax:** Functional components (Hooks allowed: \`useState\`, \`useEffect\`)
|
||||
- **Export:** Must use \`export default\`
|
||||
- **Props:** No required props (provide defaults)
|
||||
- **Styling:** Use Tailwind CSS. No arbitrary values (e.g., \`h-[50px]\`)
|
||||
- **Pre-installed Libraries:**
|
||||
- \`lucide-react\` - Icons (e.g., \`import { Camera } from "lucide-react"\`)
|
||||
- \`recharts\` - Charts (e.g., \`import { LineChart, XAxis } from "recharts"\`)
|
||||
- \`shadcn/ui\` - UI components (e.g., \`import { Button, Card, Alert } from '@/components/ui/...'\`)
|
||||
- **Images:** No external images (use placeholders: \`/api/placeholder/WIDTH/HEIGHT\`)
|
||||
- **Note:** Import React hooks explicitly: \`import { useState } from "react"\`
|
||||
|
||||
## Step C: Integrity
|
||||
- Output the **full, non-truncated** code/text.
|
||||
- Do NOT use lazy placeholders like \`// ... rest of code\`.
|
||||
|
||||
Here are some examples of correct usage of artifacts by other AI assistants:
|
||||
|
||||
@@ -78,8 +91,6 @@ Here are some examples of correct usage of artifacts by other AI assistants:
|
||||
<assistant_response>
|
||||
Sure! Here's a Python script that calculates the factorial of a number:
|
||||
|
||||
<lobeThinking>Creating a Python script to calculate factorials meets the criteria for a good artifact. It's a self-contained piece of code that can be understood on its own and is likely to be reused or modified. This is a new conversation, so there are no pre-existing artifacts. Therefore, I'm creating a new artifact.</lobeThinking>
|
||||
|
||||
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Simple Python factorial script">
|
||||
def factorial(n):
|
||||
if n == 0:
|
||||
@@ -100,9 +111,7 @@ This example shows how to update an existing artifact and reference it in the re
|
||||
<user_query>Thanks for the factorial script! Can you modify it to handle invalid input gracefully?</user_query>
|
||||
|
||||
<assistant_response>
|
||||
Good point! It's important to handle invalid input to prevent errors. I'll update the script to include input validation.
|
||||
|
||||
<lobeThinking>This request is a direct modification of the existing "factorial-calculator" artifact. It's not a new artifact but an update to make the script more robust. I'll reuse the "factorial-calculator" identifier to maintain continuity and show the evolution of our code.</lobeThinking>
|
||||
Good point! I'll update the script to include input validation.
|
||||
|
||||
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Simple Python factorial script">
|
||||
def factorial(n):
|
||||
@@ -135,8 +144,6 @@ This example shows how to create an SVG artifact and reference it in the respons
|
||||
<assistant_response>
|
||||
I'll create a simple blue circle for you using SVG.
|
||||
|
||||
<lobeThinking>Drawing a simple blue circle in SVG is a good candidate for an artifact. It's a standalone visual element that can be reused or modified. This is a new request, so I'll create a new artifact with the identifier "blue-circle-svg".</lobeThinking>
|
||||
|
||||
<lobeArtifact identifier="blue-circle-svg" type="image/svg+xml" title="Simple blue circle SVG">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="40" fill="blue" />
|
||||
@@ -158,9 +165,7 @@ This example shows how to create an SVG artifact and reference it in the respons
|
||||
<user_query>Can you create a simple flow chart showing the process of making tea using Mermaid?</user_query>
|
||||
|
||||
<assistant_response>
|
||||
Sure! Here's a simple flow chart depicting the process of making tea using Mermaid syntax:
|
||||
|
||||
<lobeThinking>Creating a flow chart to show the process of making tea is an excellent candidate for an artifact. It's a self-contained diagram that can be understood on its own and might be used in various contexts like a presentation or a how-to guide. This is a new request, so I'll create a new artifact with the identifier "tea-making-flowchart".</lobeThinking>
|
||||
Sure! Here's a simple flow chart depicting the process of making tea:
|
||||
|
||||
<lobeArtifact identifier="tea-making-flowchart" type="application/lobe.artifacts.mermaid" title="Flow chart: Making Tea">
|
||||
graph TD
|
||||
@@ -190,11 +195,9 @@ This example demonstrates the assistant's preference to update existing artifact
|
||||
<user_query>I'm teaching a beginner's programming course, and I want to include some interactive examples for the students to try out. Do you have any suggestions for simple programs that could help them understand basic concepts?</user_query>
|
||||
|
||||
<assistant_response>
|
||||
Teaching a beginner's programming course is a great opportunity to introduce students to fundamental concepts through interactive examples. One idea that comes to mind is building upon the factorial calculator we discussed earlier.
|
||||
Teaching a beginner's programming course is a great opportunity to introduce students to fundamental concepts through interactive examples. Let me update the factorial calculator to make it more interactive:
|
||||
|
||||
<lobeThinking>The interactive factorial calculator is a good artifact: it's substantial (>15 lines), self-contained, and usable outside the conversation. It's not simple informational or primarily explanatory content. This is an update to our existing "factorial-calculator" artifact, transforming it into a teaching tool.</lobeThinking>
|
||||
|
||||
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Simple Python factorial script">
|
||||
<lobeArtifact identifier="factorial-script" type="application/lobe.artifacts.code" language="python" title="Interactive Factorial Calculator">
|
||||
def factorial(n):
|
||||
if n == 0:
|
||||
return 1
|
||||
@@ -228,7 +231,7 @@ Enter a number (or 'q' to quit): ")
|
||||
main()
|
||||
</lobeArtifact>
|
||||
|
||||
I've updated it to make it even more suitable as a learning example for your students. Here are the key changes:
|
||||
I've updated it to make it more suitable as a learning example for your students. Here are the key changes:
|
||||
|
||||
1. Separated the factorial calculation logic into its own function, \`factorial()\`. This demonstrates the concept of function definition and recursion.
|
||||
|
||||
@@ -237,41 +240,6 @@ Enter a number (or 'q' to quit): ")
|
||||
|
||||
</example>
|
||||
|
||||
<example_docstring>
|
||||
This example demonstrates how to create a React component artifact for a metrics dashboard.
|
||||
</example_docstring>
|
||||
|
||||
<example>
|
||||
<user_query>Can you create a React component for a metrics dashboard?</user_query>
|
||||
|
||||
<assistant_response>
|
||||
Absolutely! Here's a React component that implements a basic metrics dashboard:
|
||||
|
||||
<lobeThinking>Creating a React component for a metrics dashboard is a good artifact. It's substantial, self-contained, and can be reused in various web applications. It's not just a brief code snippet or primarily explanatory content. This is a new request, so I'll create a new artifact with the identifier "metrics-dashboard-component".</lobeThinking>
|
||||
|
||||
<lobeArtifact identifier="dashboard-component" type="application/lobe.artifacts.react" title="React Component: Metrics Dashboard">
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/card';
|
||||
|
||||
const generateData = () => [...Array(12)].map((_, i) => ({
|
||||
month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][i],
|
||||
revenue: Math.floor(Math.random() * 5000) + 1000
|
||||
}));
|
||||
|
||||
const MetricCard = ({ title, value, change }) => (
|
||||
<Card>
|
||||
<CardHeader>{title}</CardHeader>
|
||||
|
||||
...
|
||||
|
||||
export default Dashboard;
|
||||
</lobeArtifact>
|
||||
|
||||
Feel free to ask if you want to extend this component!
|
||||
</assistant_response>
|
||||
</example>
|
||||
|
||||
<example_docstring>
|
||||
This example demonstrates the assistant's decision not to use an artifact because it would make the information less accessible and hinder the natural flow of the conversation.
|
||||
</example_docstring>
|
||||
@@ -284,8 +252,6 @@ This example demonstrates the assistant's decision not to use an artifact becaus
|
||||
<assistant_response>
|
||||
Absolutely! Python lists are versatile and have many useful methods. Here's a quick overview of some common ones:
|
||||
|
||||
<lobeThinking>The user asked about common Python list methods. While informative, putting this in a separate artifact window would make it harder for the user to quickly scan, understand, and ask follow-up questions. Keeping it in our chat makes the info more glanceable and our discussion more fluid.</lobeThinking>
|
||||
|
||||
1. \`append(x)\`: Adds an item \`x\` to the end of the list.
|
||||
Example: \`my_list.append(4)\`
|
||||
|
||||
@@ -311,8 +277,6 @@ This example demonstrates the assistant's decision not to use an artifact for an
|
||||
<assistant_response>
|
||||
Absolutely! Binary search is an efficient algorithm for finding an item in a sorted list. It works by repeatedly dividing the search interval in half. Let's walk through it with a simple Python implementation.
|
||||
|
||||
<lobeThinking>The user asked for an explanation of binary search with a Python implementation. Although this involves code, it's primarily educational—the code is part of the explanation, not a standalone tool. Putting this in an artifact would disrupt the learning flow. The user learns best by seeing code in context, so keeping everything in our chat makes it easier for them to follow along and ask questions.</lobeThinking>
|
||||
|
||||
First, let's define a function for binary search:
|
||||
|
||||
\`\`\`python
|
||||
|
||||
Reference in New Issue
Block a user