- One time initial setup
yarn install
yarn build- To run the development server on
localhost:3407
yarn dev- Clean
node_modulesand.nextdirectories
yarn clean- These are optional for local development, but required for some features to work.
- For prod deployment the
amplify.ymlbuild script will use the env variables defined in the Amplify App Console and inject them into.env.production
Create .env.local file
touch .env.local- For interacting with OpenAI API
NEXT_PUBLIC_is required for the key to be accessible on the client side
echo 'NEXT_PUBLIC_OPENAI_API_KEY=<your-api-key-here>' >> .env.local- For using TipTap Pro Extensions
- Used by
.npmrcto link to the pro registry which requires a tiptap account: https://cloud.tiptap.dev/pro-extensions
echo 'TIPTAP_PRO_REGISTRY=<your-registry-here>' >> .env.local- Needed for AWS Clients (S3)
- Not exposed to the client side, only accessed by the server side api routes
echo '_AWS_ACCESS_KEY=<your-access-key-here>' >> .env.local
echo '_AWS_SECRET_ACCESS_KEY=<your-secret-access-key-here>' >> .env.local
echo '_AWS_REGION=us-west-2' >> .env.local
echo '_AWS_BUCKET=node-previews' >> .env.local- Deployed using AWS Amplify
-
Infrastructure:
-
Styling
-
Utility:
- Infinite Canvas SDK:
- Rich Text/Content Editor:
- Schema Validation:
- Queries:
- State Management:
- Code Syntax Highlighting:
- Data Visualization:
- Fun:
- Fonts:
- Icons:
Domain Aliases:
- https://gradient-guru.com
- https://gradient-guru.org
- https://gradient-guru.net
- https://gradient-guru.dev
Routes
//compute/demos/share-noderedirects to/[id]: where[id]is theidof aPreviewNode.PreviewNodes are generated every forward pass of the model where html is generated. The content is saved in s3, associated by the id of the node which is used to generate the share link. The share link page itself simply retrieves the content from s3 and renders it on the page. ThePreviewNodewhen in the tldraw whiteboard iframes embeds the share link page hence the namePreviewNode.
Testing Routes
Used for the initial testing of components and features. Just leaving these in cause why not
Structured as a standard Next.js app (app router):
.env.local # Local Environment Variables
.npmrc # NPM Config needed to link TipTap Pro Extensions Registry
amplify.yml # Amplify Config for site deployment
next.config.js # Next.js Config with every option customized or set to what their default values are per the docs
tailwind.config.js # Tailwind Config
|-- app/ # Nextjs App Router (Note: By default, components inside app are React Server Components.)
| |-- api/ # Server Side API Routes
| | |-- getS3/ # Route for fetching content from S3
| | |-- putS3/ # Route for uploading content to S3
| |-- compute/ # `/compute` Route
| |-- demos/ # `/demos` Route
| |-- share-node/ # `/share-node` Route
| |-- tests/ # `/tests` Route
| |-- global.css # Global CSS injected at the top level of the app
| |-- layout.tsx # defines the top level layout of the app
| |-- page.tsx # `/` Route
| |-- providers.tsx # defines the top level providers of the app injected into the layout
|-- assets/ # Static Assets
| |-- fonts/ # Fonts
| |-- icons/ # Icons
| |-- images/ # Images
|-- clients/ # Client APIs
| |-- AWS/ # AWS Clients
| | |-- S3.ts # S3
| |-- Model/ # AI/ML Model Clients
| | |-- BaseClient.ts # Base Client which all other clients extend to inherit from
| | |-- OpenAI.ts # OpenAI Client
|-- components/ # All Components
| |-- Buttons/ # Generic commonly used buttons
| | |-- BuyMeComputeButton.tsx
| | |-- CopyButton.tsx
| | |-- DownloadButton.tsx
| | |-- ThemeToggle.tsx
| |-- Chat/ # Chat and Chat-related components (ChatMessage, ChatBubble, etc.)
| | |-- Chat.tsx
| | |-- ChatBubble.tsx
| | |-- ChatList.tsx
| | |-- ChatMessage.tsx
| | |-- ChatStatus.tsx
| |-- Flow/ # "Flow" is an arbitrary alias for Tldraw to avoid (lol...) confusion from naming conflicts with tldraw
| | |-- Extensions/ # All "Flow"-related components used in Flow/FlowUI
| | | |-- DropWrapper.tsx # Wrapper around the canvas that provides drag'n'drop functionality for ScratchPanel
| | | |-- FlowCursor.tsx # Cursor used by the "bot" (BotController) to interact with Flow
| | | |-- FlowFormItem.tsx # Overrides for what to render in the Form component
| | | |-- ScratchPanel.tsx # Panel that provides drag'n'drop functionality for adding custom nodes to Flow
| | | |-- shared.ts # Shared types, constants, functions, etc. used by all "Flow"-related components
| | | |-- TestButtons.tsx # Buttons added to the debug panel dropdown to test various features
| | | |-- TimelineScrubber # TimelineScrubber is a slider which allows the user to scrub through the history of changes of Flow
| | |-- Nodes/ # Custom nodes (aka "shapes") for Flow
| | | |-- PreviewNode/ # PreviewNode is a special node which is used to generate share links and embed html content generated from Models
| | | | |-- PreviewNode.tsx
| | | | |-- PreviewNodeDropdown.tsx # Dropdown menu for the preview node for external links, copy link, etc
| | | |-- FlowNode.tsx # Abstract Node which all other custom nodes extend from, adds default functionality for previewing nodes in the ScratchPanel, ability to define custom schemas, etc
| | | |-- IconNode.tsx # Icon Node which leverages IconSetCache to render a single icon from any iconset
| | | |-- PlotlyNode.tsx # Node which renders `Plotly` component
| | | |-- TerminalNode.tsx # Node which renders `Terminal` component
| | | |-- TipTapNode.tsx # Node which renders `Tiptap` component
| | |-- FlowSidePanel/ # SidePanel for Flow which is a vertically tabbed vscode-like panel
| | | |-- ExtractionTab.tsx
| | | |-- FlowSidePanel.tsx
| | | |-- HistoryTab.tsx
| | | |-- ModelTab.tsx
| | | |-- NodesTab.tsx
| | |-- Flow.css # Overrides for default Tldraw styles
| | |-- Flow.tsx # "Flow" which parallels Tldraws "Tldraw" component (composed of the TldrawEditor + FlowUi)
| | |-- FlowUI.tsx # "FlowUI" component which parallels Tldraws "TldrawUI" component
| |-- Fun/ # Random Fun components
| | |-- Aceternity/ # Modified components originally from https://www.aceternity.com/components
| | |-- Custom/
| |-- Highlighter/ # Code Syntax Highlighter components
| | |-- SyntaxStyles/
| | | |-- CustomSyntaxStyle # Modified version of vscDarkPlus
| | |-- Highlighter.tsx # Wrapper component for react-syntax-highlighter
| |-- Icons/ # Icons and Icon-related components
| | |-- CustomIcons/ # JSX SVGs
| | |-- IconSets/ # All Icon Sets loaded into IconSetCache
| | | |-- Carbon.tsx
| | | |-- CodeLanguages.tsx
| | | |-- Custom.tsx
| | | |-- Logos.tsx
| | | |-- Lucide.tsx
| | | |-- Radix.tsx
| | | |-- Tldraw.tsx
| | |-- Icon.tsx # Generic Icon component
| | |-- IconSetCache.ts # IconSetCache which loads all Icon Sets and is the main interface for Icon components (example use is <IconSetCache.Carbon.MachineLearning {...props} />)
| |-- PageLink/ # Page/ID related components used for `share-node/[id]` route
| | |-- PageLink.tsx # Fetches content from S3 based on the given id and version and passes the content to PageId
| | |-- PageId.tsx # Renders the content passed to it in an iframe
| |-- Plotly/ # Plotly wrapper component
| | |-- Plotly.tsx
| |-- Primitives/ # Radix and other low level primitives which serve as buildling blocks for other components
| | |-- Toast/
| | | |-- Toast.tsx
| | | |-- Toasts.tsx
| | | |-- ToastsViewport.tsx
| | |-- Accordion.tsx
| | |-- Button.tsx
| | |-- Checkbox.tsx
| | |-- Dropdown.tsx
| | |-- FlipCard.tsx
| | |-- HoverCard.tsx
| | |-- Input.tsx
| | |-- Kbd.tsx
| | |-- Label.tsx
| | |-- Menubar.tsx
| | |-- Panel.tsx
| | |-- Progress.tsx
| | |-- Select.tsx
| | |-- Separator.tsx
| | |-- SidePanel.tsx
| | |-- Slider.tsx
| | |-- Switch.tsx
| | |-- Textarea.tsx
| | |-- Toolbar.tsx
| | |-- Tooltip.tsx
| |-- Terminal/ # Terminal-like code block component
| | |-- Terminal.tsx
| |-- Tiptap/ # All Tiptap-related components
| | |-- Extensions/ # Configures all of the publicly available extensions for Tiptap + defines custom extensions
| | | |-- ColorChips.ts # Converts hex color codes to color chips
| | | |-- Comments.tsx # Adds commenting functionality to the editor
| | | |-- EmojiList.tsx # Used in EmojiSuggestions
| | | |-- EmojiSuggestions.tsx # Adds emoji suggestions/search
| | | |-- Extensions.ts # All extensions loaded into `Extensions` object
| | | |-- Katex.tsx # Adds mathematical typesetting via Katex
| | | |-- MentionList.tsx # Used in MentionSuggestions
| | | |-- MentionListSuggestions.tsx # Adds @mention suggestions/search
| | | |-- ReactComponent.tsx # Adds React Component Node for embedding React Components in the tiptap editor
| | | |-- Snippets.tsx # Adds snippets functionality which
| | | |-- TerminalBlock.tsx # Adds terminal-like code block functionality which leverage `Terminal` component
| | | |-- TextReplacements.tsx # Adds text replacement functionality which will automatically replace specifically defined input sequences with glyphs and/or emojis
| | | |-- TOC.tsx # Adds table of contents functionality
| | | |-- Video.tsx # Sereneinserenade's Video extension which adds video embed functionality
| | |-- Tiptap.tsx # Wrapper component for Tiptap
| | |-- TiptapToolbar.tsx # Toolbar component optionally stickied to the top of `Tiptap` component
|-- hooks/ # React Hooks
| |-- useChat/ # For managing `Chat` component
| | |-- useChat.ts
| |-- useFlow/ # "Flow"-related hooks
| | |-- useBotController.tsx # Controls a bot which interacts with Flow by acting as an external user with its own cursor, messages, etc.
| | |-- useContentExtractor.tsx # Extracts content from Flow (Used as input to model)
| | |-- useContentRecorder.tsx # Records content from Flow (the current `uiState` which is essentially the current tool state, `canvasEvent` which is the last emitted canvas event, and `historyRecords` which records document changes made by the user and is used to undo/redo, within the TimelineScrubber, etc.)
| | |-- useImagePreview.tsx # Fetches a "preview" version of the image which would be extracted from Flow and used as input to the model
| | |-- useNodesPreview.tsx # Fetches a "preview" version of the JSON properties of nodes which would be extracted from Flow and used as input to the model
| | |-- useScratchPanel.tsx # Controls the ScratchPanel component which is a panel that provides drag'n'drop functionality for adding custom nodes to Flow. Nodes can customized what their preview inside the panel is by overriding the `panelPreview` function.
| |-- useModel/ # AI/ML Model-related hooks
| | |-- useModel.tsx
| | |-- shared.ts # Shared types, constants, functions, etc. used by all models
| |-- useActionKey.ts # Implements a global action key hook which allows for global keybindings
| |-- useApi.ts # API for interacting with server side (apis defined in `app/api`)
| |-- useDebugger.ts # Debugger hook provided at the top level of the app
| |-- useDownloader.ts # Controls DownloadButton functionality
| |-- useFormField.ts # Controls fields in Form component
| |-- useIsomorphicLayoutEffect.tsx # Generic useLayoutEffect hook which works on both client and server side
| |-- useMounted.ts # Generic useMounted hook which returns whether or not a component has been mounted
| |-- usePlotly.ts # Controls Plotly component
| |-- usePosition.ts # Flexible and Customizable hook to track mouse/pointer position
| |-- useRippleEffect.ts # Ripple effect mimics MUI ripple click effect
| |-- useThemePanel.ts # Controls radix-theme ThemePanel component
| |-- useTiptap.ts # Controls Tiptap component
| |-- useToasts.ts # Controls Toasts component provided at the top level of the app
| |-- useViewport.ts # Generic useViewport hook which returns the current viewport dimensions
|-- packages/ # Third Party Packages which are embed
| |-- tldraw/ # Emebed Tldraw Package
|-- public/ # Public Assets
|-- scripts/ # Random/Misc Scripts Directory
|-- utils/ # Utility (Codedump) Directory
| |-- prompts/ # Prompts for working with LLMs
| | |-- MakeReal.tsx # "Make Real" prompt from https://github.com/tldraw/make-real
| | |-- GenericCanvasAgent.tsx # Generic Canvas Agent prompt
| | |-- shared.ts # Shared types, constants, functions, etc. used by all prompts
| |-- tests/ # Jest Unit Tests
| |-- animate-tailwindcss.js # Modified version of `tailwindcss-animate` from https://github.com/jamiebuilds/tailwindcss-animate/blob/main/index.js
| |-- colors.ts # Generic color utils
| |-- constants.ts # Global Constants
| |-- device.ts # Defines functions to determine info about the client device
| |-- export.ts # Generic export utils originally based on https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/utils/export/export.ts
| |-- filesystem.ts # For interacting with a filesystem (calculating size and other meta data)
| |-- host.ts # Defines static info about the host (e.g. environment, port, etc.)
| |-- keymap.ts # Defines keybinding mappings
| |-- links.ts # For generating links to external sites (Codepen, CodeSandbox, Replit, StackBlitz, etc)
| |-- MapCache.ts # Simple weakmap cache for objects
| |-- math.ts # Generic Math utils
| |-- png.ts # Generic png utils from https://github.com/tldraw/tldraw/blob/01ab3604d0d1ce8772e671f15d0bb4c329443c4c/packages/utils/src/lib/png.ts#L61
| |-- regex.ts # Generic regex definitions
| |-- StyledComponentsRegistry # StyledComponentsRegistry used to integrate styled-components with NextJS, injected at the top level of the app
| |-- svg.ts # Generic svg utils
| |-- utils.ts # Generic utils