Bolt.new prompts

100%

Bolt.new prompts

✓ Published0🌍 Public

Last edited Oct 23, 2024

Created on Oct 23, 2024

This visualization presents the text of the system prompt used by Bolt, an AI software engineer, directly from the source code. It shows the prompt’s content as a plain text document. The code is written for a React application, using files like `prompts.ts`, and the visualization simply displays this content as-is. This particular example’s rendering uses the raw text from the files, offering a transparent view of the developer instructions. The technology used is React, with the source originating from the `bolt.new` repository.

AI-generated description

Surfacing the prompts for study. Originally published in app/lib/.server/llm/prompts.ts in https://github.com/stackblitz/bolt.new

Similar vizzes

Loading thumbnail…

rohit @krishnanrohit · Feb 6 The system prompt for ChatGPT is absurd! h/t @dylan522p , and I independently verified across a couple devices.

This example visualizes a text-based system prompt as a circular, node-link diagram using D3’s force simulation. It shows the hierarchical structure of tools, namespaces, and policies embedded in the prompt, with each text block rendered as a labeled circle. The code uses `d3.forceSimulation` for layout and SVG elements for rendering, drawing from the raw `Chatgptsystem.txt` file to map the prompt’s nested sections into a network of interconnected nodes.

IIoTeacher

59% match

Loading thumbnail…

Claude

This interactive explainer demonstrates three distinct AI prompting strategies—prompt crafting, financial stock analysis, and research-driven coding—within a single glassmorphism-styled interface. Users trigger scenarios through buttons to compare system-prompt variations and observe real-time behavioral outputs. The visualization combines custom CSS gradient overlays with frosted-glass panel effects, while JavaScript handles scenario switching and dynamic feedback logs. Code snippets are rendered as formatted markdown blocks, showing users practical prompt structures they can adapt for their own AI workflows.

JJastor11

58% match

Loading thumbnail…

CSS Terminal

A minimalist web page reconstructs a Windows command-prompt interface using React. It displays a black terminal window with a white title bar, where monospace text types out line by line with a stepped animation. The example uses CSS `@keyframes` for the blur effect, the `steps()` timing function for text reveal, and a blinking cursor animation. The implementation relies on plain HTML and CSS within a React project, with no external data source beyond the hardcoded Windows version text.

SStefan Gerrits

56% match

Loading thumbnail…

vibeCoding

This React application demonstrates the power of vibe coding, an approach where developers leverage AI tools to generate and refine code through conversational prompts. The interface presents a three-column layout showcasing key components of this workflow: a collaborative chat interface in the center for issuing commands, a code editor panel on the right displaying live renderings, and a color-coded activity log on the left that visualizes the event stream. Built with React and styled using Tailwind CSS, the application uses useState for managing chat messages and activity entries, demonstrating state management and component-based architecture in a modern single-page application.

JJastor11

56% match

Loading thumbnail…

Fork of Fork of Cars Report

This example displays a single plain-text message, “Lets goooooo,” rendered in large red type on a minimal HTML page. It shows a very basic React-free approach, using plain JavaScript to write into a `<pre>` element’s text content. The code relies on `document.getElementById` to target the message element and sets its `textContent` directly. The visualization is static, with no interactive or data-driven behavior, serving as a trivial starter template for a raw CSS and JavaScript setup. The title “Fork of Fork of Cars Report” hints at a lineage of forks, but no car-related data or chart is present.

SShadowTheHyper

56% match

Loading thumbnail…

A Fork of the HTML Starter

This example displays a single line of text, “ Hey! HTML JavaScript CSS,” in large navy letters against a pink background. The page uses D3.js v6’s `select` method to target the body element and set its text content, demonstrating basic DOM manipulation with D3. The visualization is built with HTML, CSS, and JavaScript, with the styling defined in a `<style>` block and D3 loaded via a CDN script tag. The rendering approach is simple text display, showing how D3 can be used for minimal, non-graphical web interactions.

BBagaski

56% match

Loading thumbnail…

cars testor

This example displays a static text-based visualization titled “cars testor,” showing the message “Hello HTML” in large, plain text on a white background. The rendering relies on a minimal HTML page that references a bundled JavaScript file, while the core logic uses standard Document Object Model (DOM) APIs—specifically `getElementById` and `textContent`—to inject the message into a preformatted element. No external visualization libraries or datasets are used; the focus is entirely on basic DOM manipulation within a React project structure. The output appears as simple, unstyled text rather than a data-driven chart.

Aazer.xu

55% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive HTML page where clicking on text triggers a change in its content. The page displays the phrase “my text” at a large font size, and when clicked, the text updates to “I have changed” using JavaScript. The implementation uses plain HTML, inline CSS for styling, and a JavaScript arrow function assigned to the `onclick` event handler, which accesses the element via `document.getElementById`. No external libraries are used, making it a minimal starter template for web visualization projects.

NNita

55% match