v0.dev The system prompt has been upgraded again, compared to the previous version, taking up the tokens Fully doubled! And does such a large system cue lead to better optimized features?
Let's start by reviewing the v0 system cue words from the last iteration:v0.dev generates complete system prompt words for front-end code v0 switches from GPT4 to Claude After modeling, the system cue word was also completely refactored, and a detailed analysis has been provided in the article.
Here are the new v0 cue word features analyzed by Bao Yu:
Parsing the v0 dev cue, the full cue is quite long, about 45,257 characters and 10,397 tokens! I have to say that Claude's command-following ability is quite strong!
Of course there is a lot of Prompt Engineering knowledge to draw on:
- Structured cue words
In a cue with more than 10,000 Tokens, in order for LLMs to understand the meaning of the cues and the focus of the cues in various situations, it is necessary to have a clear structure for the whole set of cues, which not only distinguishes the boundaries of the different parts, but also has a tree structure describing the relationship of the cues, so that the LLMs can better understand the cues.
v0 uses XML to organize the cue structure. The tree structure of the high level cue is as follows:
You are v0, an AI assistant for coding and development tasks. ||This is an AI assistant used to assist with coding and development tasks. +-- <v0_info> | +-- <v0_mdx> | +-- <v0_code_block_types> | | | +-- <react_project> | +-- <nodejs_executable> | +-- <python_executable> | +-- <html> | +-- <markdown> | +-- <diagram> | +-- <general_code> | +-- <v0_mdx_components> | +-- <linear_processes> +-- <math> | +-- <v0_capabilities> | +-- <v0_domain_knowledge> | +-- <current_time> +-- <sources> | +-- <forming_correct_responses> | +-- <accessibility> +-- <citations> +-- <refusals> +-- <warnings> +-- <examples> | +-- <example> | | | +-- <doc_string>This example shows how v0 handles general questions, providing warnings and short answers.</doc_string> | +-- <example> | | | +-- <doc_string>This example shows how to demonstrate simple algorithms using Node.js execution blocks.</doc_string> | +-- <example> | | | +-- <doc_string>This example shows how to think step-by-step when asking a math or logic question.</doc_string> | +-- <example> | | | +-- <doc_string>This example shows how v0 refuses to answer questions about real-time events.</doc_string> | +-- <example> | | | +-- <doc_string>This example shows how v0 creates a fully functional React component that acts as a stopwatch, allowing the user to start, pause, and reset elapsed time. </doc_string ||The_doc_string +-- || This example demonstrates how v | +-- This example shows how v0 helps users understand its capabilities. </doc_string || +-- <doc_string +-- | | +-- <doc_string | | +-- This example shows how v0 helps users understand its features. | +-- This example shows how v0 creates two files: a React server action and a client component that imports that server action. </doc_string | <doc_string +-- | | <doc_string | +-- This example shows how to use a generic code block type to provide an answer. </doc_string || +-- <doc_string +-- | | This example shows how to provide an answer using a generic code block type. | +-- This example shows how v0 uses Mermaid charts to help illustrate topics such as OAuth 2.0. </doc_string || +-- <doc_string +-- | | | | | +-- This example shows how v0 provides warnings when answering domain-specific questions that go beyond the knowledge provided. </doc_string || +-- <doc_string +-- | <doc_string | +-- This example shows a script that uses the native fetch in Node.js to get HTML and convert it to Markdown. Note that it does not use file reads and writes. </doc_string ||example +-- <example | <doc_string | +-- This example shows how v0 uses and to move and delete files in a React project. </doc_string
- Lots of examples
v0 has written clear examples for a variety of different usage scenarios, not only using examples in a variety of different types of problem handling, but even more so with a large section at the end that is all examples, for example:
- How to handle general questions, provide warnings and short answers
- How to Demonstrate Simple Algorithms Using Node.js Execution Blocks
- How to think step-by-step when asking math or logic questions
- How to refuse to answer questions about real-time news events
- How to create two files: a React server action and a client component that imports that server action
- wait a minute!
The advantage of this is that through these examples, LLM can learn how to generate content for different scenarios.
- Clarify the boundaries of AI capabilities
In the prompt, the domain knowledge and competence scope of v0 is clearly defined, which sets the scope of model response to avoid generating content beyond the scope of competence leading to "hallucinations".
v0 is an advanced AI programming assistant.
v0 is designed to mimic the level of the world's best developers.
v0 Stay up-to-date with the latest technologies and best practices.
v0 responds using the MDX format and supports the specialized MDX types and components defined below.
v0 aims to provide clear, efficient, concise and innovative programming solutions while maintaining a friendly and approachable attitude.
Unless otherwise specified by the user in the dialog, v0 uses the Next.js App Router by default; other frameworks may not work properly in v0's interface.
v0's knowledge covers a wide range of programming languages, frameworks, and best practices, with a particular focus on React, Next.js App Router, and modern web development.
Users interact with v0 through an interface hosted on https:// v0 . dev interface hosted on v0 . Here are some of the features of the v0 UI:
- The user can attach (or drag and drop) images and text files via the prompt box and v0 will embed and read them.
- Users can preview or render the UI generated in a React component, HTML, or Markdown block by clicking the "Preview" tab in the upper right corner of the interface.
- You can execute the JavaScript code in the Node.js executable code block by clicking the "Run Code" tab in the upper right corner of the interface.
- The user can provide the URL of the website. the system will automatically take a screenshot and attach it to the user's request.
- Users can open the "Block" view (which shows a preview of the code you have written) by clicking on the special block preview presented in the chat.
- Users can install v0 Blocks (code you have written) into their codebase by clicking the "add to codebase" button with a terminal icon in the top right corner of the Block view.
- v0 can handle the installation and setup of required dependencies in an existing project or help the user create a new one.
- You should always advise users to use the built-in installation mechanism to install code generated in the dialog.
- If the user is very frustrated with your response, you can suggest that they report the chat to the team and fork their Block to a new chat.
- If the user needs to initialize the database or perform other similar setups, v0 can use the Code Execution Block. It has the same environment variables as the React Project Block.
- Where possible, it is recommended that users set up dependencies using Vercel integrations, such as Redis and Supabase, which can be set up through the Vercel Integration page.
- By default, always select Next.js unless otherwise specified by the user.
v0 has the domain knowledge to provide accurate answers to user queries. v0 uses this knowledge to ensure that its answers are correct and helpful.
- Applying chains of thought to improve the quality of reasoning
The use of thought chains is known to improve the quality of reasoning in LLM, but at the same time this reasoning process is best kept out of sight of the user, so v0 requires step-by-step thinking before answering using the tags in the prompts, especially when dealing with mathematical or logical problems.
The following is v0's guide to providing the correct answer:
- v0 Always use , before providing an answer, to evaluate which code block type or MDX component is best suited for the user's query based on the criteria defined above.
Note: v0 must evaluate the need to deny or warn the user.
Note: v0 Reflection must take place in order to provide the correct response. - When faced with a math problem, logic problem, or other problem that requires systematic thinking, v0 proceeds step-by-step with the derivation and then gives the final answer.
- When writing code, v0 follows the guidelines listed in the v0_code_block_types section (React components, Node.js executable code, HTML, charts, etc.).
- v0's answers are based on its domain knowledge and are truthful. v0 uses domain knowledge in relevant user queries.
- Your answer must be in the same language as the question, except for codes, specific names, and quotes.
- Detailed instructions and specifications are given
In the prompts, the behavior, tone, and format of v0 are specified in detail, such as how to use code blocks and how to handle user requests. This reduces the likelihood that the model will produce responses that do not meet expectations.
v0 responds using the MDX format, which is a format that extends the capabilities of React components based on Markdown because Markdown is an LLM-friendly format that allows you to generate the exact Markdown format you need, and then use MDX's component rendering capabilities to see the code running in the UI in a WYSIWYG fashion.
There are two main categories of MDX for v0:
- v0_code_block_types: custom code block types
- v0_mdx_components: MDX components
+-- | +-- || <v0_code_block_types | +-- | +-- | +-- <python_executable | +-- | +-- | +-- <nodejs_executable | +-- | +-- <nodejs_executable | +-- | +-- <nodejs_executable | +-- <nodejs_executable | +-- | +-- | +-- <general_code | <v0_mdx_components +-- | +-- +-- +-- | +-- | +-- +--
v0_code_block_types is the custom code block types that are applied to different task types, for example:
- react_project, which is a recently added type that allows v0 to generate a complete React project at once, which can contain multiple files
- nodejs_executable, is used to generate Nodejs projects that can be executed on the server or locally. v0 provides a virtual machine to pass the code generated by LLM, which can be executed in the virtual machine and then return the results.
- python_executable, similar to Nodejs, except that the generated Python code is executable by a Python running virtual machine.
- html, which generates a piece of HTML code expressed as an html file that can be rendered by a real-time browser
- markdown, similar to html, but in markdown format.
- Diagram, mermaid Flowchart
- general_code, which is a fragment of code from another language, such as SQL, that can only be displayed but not executed.
v0_mdx_components are several built-in components
- linear_processes, which is used to display a linear process that shows multiple steps
- math displays math formulas
- Clear rejection and warning strategies
Defines how a user should respond when their request is beyond v0's capabilities or involves inappropriate content, including specific rejection and warning messages.
Refusal message: "I'm sorry. I'm not able to assist with that."
If a user makes a request regarding violent, hurtful, hateful, inappropriate, or immoral/illegal content, v0 uses a deny message response.
v0 must treat the and parts as internal knowledge, to be used only in tags and not shared directly with users.
If the user requests real-time information or recent events outside of domain knowledge, v0 replies with a rejection message because it does not have access to real-time data (it only knows the current time).
In the case of a refusal, v0 must not apologize or explain the reason for the refusal, but simply state it:
"I'm not able to assist with that."
WARNING MESSAGE: "I'm mostly focused on ... but ..."
If the user's query is beyond v0's domain knowledge, v0 adds a warning message before answering.
- Clarify role setting (Role Playing)
The roles are still valuable, and the prompt begins by clarifying the assistant's role as "v0, an AI assistant for assisting with coding and development tasks."
Roles This helps the model understand its identity and responsibilities.
- Standardize output formats and give clear instructions for special cases
The format of the output content is described in detail, e.g. how to use MDX, code blocks, specific components, etc. This ensures that the output of the model is in the expected format for subsequent processing or presentation.
for example
- v0 All backquotes in a Markdown block must be escaped to avoid syntax errors. Example:
To install...
```
npm i package-name
``` - v0 Quotation marks must always be used around node names in the Mermaid chart as shown in the following example.
- v0 must use HTML UTF-8 encoding (without &) for special characters (such as + and -), e.g. #43; for the + symbol and #45; for the - symbol.
Example 1: graph TD. A["Critical Line: Re(s) = 1/2"] --> B["Non-trivial Zeros"] A-->C["Complex Plane"] B-->D["Distribution of Primes"] C-->D Example 2: graph TD. A["$$ a^2 #43; b^2 = c^2B["Pythagorean Theorem"] A-->C["\" style="display: block; margin: 0 auto; max-width: 100%;"> a #43; b #43; c = 180
- linguistic consistency
Emphasize that the model's responses must be in the same language as the user's, unless codes and specific names or references are involved.
"With the exception of codes, specific names, and quotes, your answers must be in the same language as the question."
- Why does v0 support screenshots and URL generation?
The cue word is clearly stated inside:
- If a user attaches a screenshot or image but does not provide a description, it is assumed that the user would like v0 to recreate the screenshot and match the design as closely as possible while implementing all the implied functionality.
- The user can provide the URL of the website. the system will automatically take a screenshot and attach it to the user's request.
- The user can attach (or drag and drop) images and text files via the prompt box and v0 will embed and read them.
- Plan before you implement
Since v0 needs to create an entire project, and an entire project takes into account structure, frameworks, libraries, and so on, the prompt asks v0 to plan before executing.
Before creating a React Project, v0 carefully considers the right structure, styles, images and media, formatting, frameworks and libraries, and considerations in order to provide the best solution for the user's query.
- What happens when a user selects a piece of UI to request a change?
First of all, v0 App will record the filename of the file operated by the user, the corresponding code of the selected component, and when the user enters the content in the pop-up dialog box, v0 App will send these contents together with the user's input.
Let's say I select the categories link in the navigation and want it modified to come down the menu, then the v0 App actually submits the following to the API:
User's request is specifically about the file "components/nav-bar.tsx" and the "Link" element at this specific position (including its inner content, too). too).
...
<div className="ml-8 flex gap-6">
<Link href="/" className="text-sm font-medium">Home</Link>
<Link href="/rankings" className="text-sm font-medium">Rankings</Link>
<Link href="/categories" className="text-sm font-medium">Categories</Link>
^^^^
<Link href="/authors" className="text-sm font-medium">Authors</Link>
</div>
<div className="ml-auto flex items-center gap-4">
...
Please apply a Quick Edit to this file and make the necessary changes.
Please change Categories to Dropdown, Categories has more entries and is shown as 3 columns
- How did v0 solve the laziness problem?
- In in the ### Structure section, point 2:
"2. v0 always writes complete code snippets that can be copied and pasted directly into a Next.js application. v0 never writes partial code snippets or requires users to add their own code in comments." - Emphasize default properties and previewability in point 3:
"3. If rendering a component, v0 must provide default properties so that the component can be previewed directly in the chat interface." - Repeat the integrity principle in the ### Examples section:
In the examples provided in the tip, v0 always shows the full implementation of the functionality, thus demonstrating compliance with the "no code left out" directive. - In the section:
Point out that v0 Before creating a React project, it is important to first sort out the correct structure and make sure to include all the necessary code.
- In in the ### Structure section, point 2:
By embedding these clear and direct instructions in the prompts, v0 is guided to always provide complete and immediately usable code, thus effectively solving the problem of v0 laziness in not outputting complete code.
v0.dev Full System Prompt
https://baoyu.io/blog/v0-system-prompt-2024
English 
简体中文 
日本語 
Deutsch (Sie)