### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/thread/README.md Commands to start the development server for the Superinterface thread example using different package managers. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` ```bash bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/primitives/README.md Commands to start the development server for the Superinterface primitives example. These commands are compatible with npm, yarn, pnpm, and bun package managers. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` ```bash bun dev ``` -------------------------------- ### Install Dependencies Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/standalone/README.md Installs the necessary project dependencies using npm. ```bash npm install ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/audio-thread-dialog-realtime/README.md Commands to start the development server using different package managers (npm, yarn, pnpm, bun). This allows you to view the real-time audio thread dialog example. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/self-hosted/README.md Commands to start the Superinterface development server using different package managers (npm, yarn, pnpm, bun). This allows you to view the example in your browser and auto-updates as you edit the code. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/audio-thread/README.md Commands to start the development server for the Superinterface audio thread example. These commands are compatible with npm, yarn, pnpm, and bun package managers. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/reset-thread/README.md Commands to start the Superinterface development server using different package managers. This allows you to view the live example and begin editing the application. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` ```bash bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/form-filling/README.md Commands to start the development server for the Superinterface form filling example. These commands are compatible with various package managers like npm, yarn, pnpm, and bun. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/thread-dialog/README.md Commands to start the development server for the Superinterface thread dialog example. These commands are compatible with npm, yarn, pnpm, and bun package managers. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Development Server Commands Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/group-iframe/README.md Commands to start the development server for the Superinterface group iframe example. These commands are compatible with npm, yarn, pnpm, and bun. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Development Server Commands Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/thread-dialog-script-tag/README.md Commands to start the development server using different package managers (npm, yarn, pnpm, bun). These commands are essential for running the example locally. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Page Editing Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/group-iframe/README.md Instructions on how to start editing the main page of the Superinterface group iframe example. The page automatically updates upon file modification. ```typescript app/page.tsx ``` -------------------------------- ### Install Dependencies Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/next-frontend-functions/README.md Installs the necessary project dependencies using npm. ```bash npm install ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/next-frontend-functions/README.md Starts the Next.js development server, allowing for live preview and hot-reloading. ```bash npm run dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/components/README.md Commands to start the development server for the Superinterface project. These commands are typically used to run the application locally for development and testing purposes. The server can be started using npm, yarn, pnpm, or bun. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` ```bash bun dev ``` -------------------------------- ### Run Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/code-canvas/README.md Commands to start the development server for the Superinterface project using different package managers like npm, yarn, pnpm, or bun. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` ```bash bun dev ``` -------------------------------- ### Next.js Project Structure Example Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/next-multi-assistant/README.md An example of a Next.js project structure, specifically highlighting the 'app/page.tsx' file which is the main page of the application that can be modified to see auto-updates. ```typescript app/page.tsx ``` -------------------------------- ### Build Project Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/standalone/README.md Builds the project, likely compiling TypeScript and bundling JavaScript assets. ```bash npm run build ``` -------------------------------- ### Markdown Audio Syntax Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/standalone/README.md Demonstrates how to embed audio in markdown using image syntax with audio file extensions. ```markdown ![audio](/audio.mp3) ``` -------------------------------- ### Page Editing Instruction Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/thread-dialog-script-tag/README.md Instruction on which file to modify to start editing the page content. The development server supports hot reloading, so changes will be reflected automatically. ```typescript app/page.tsx ``` -------------------------------- ### Superinterface Deployment Options Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/standalone/README.md Provides guidance on selecting and deploying different Superinterface components based on desired functionality (inline, dialog, or voice). ```javascript if (it’s inline) { use Thread.global.js; } else if (it’s a dialog) { use ThreadDialog.global.js; } else if (it’s voice) { use AudioThread.global.js; } ``` -------------------------------- ### Markdown Video Syntax Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/standalone/README.md Demonstrates how to embed videos in markdown using image syntax with video file extensions. ```markdown ![video](/video.mp4) ``` -------------------------------- ### Running the Development Server Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/next-multi-assistant/README.md Commands to start the development server for the Next.js project using different package managers (npm, yarn, pnpm, bun). This allows you to view and edit the application locally. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Page Editing Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/audio-thread-dialog-realtime/README.md Instructions for editing the main page of the application. Modifications to `app/page.tsx` will trigger automatic updates in the browser. ```typescript Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. ``` -------------------------------- ### Customizing Thread Root Element Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/standalone/README.md Explains how to customize the default HTML element where the Superinterface Thread component renders and the process to re-build after changes. ```typescript // To customize the default rendering element for Thread: // 1. Edit the Thread.tsx file. // 2. Run `npm run build` again to apply changes. ``` -------------------------------- ### Integrate ESLint React Plugin Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/vite-react-ts/README.md This code demonstrates how to integrate the 'eslint-plugin-react' into your ESLint configuration, setting the React version and enabling its recommended rules for JSX runtime. ```javascript // eslint.config.js import react from 'eslint-plugin-react' export default tseslint.config({ // Set the react version settings: { react: { version: '18.3' } }, plugins: { // Add the react plugin react, }, rules: { // other rules... // Enable its recommended rules ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, }, }) ``` -------------------------------- ### Configure ESLint for Type-Aware Linting Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/vite-react-ts/README.md This snippet shows how to configure ESLint in a Vite project to enable type-aware linting rules by specifying project configurations and using type-checked ESLint configurations. ```javascript export default tseslint.config({ languageOptions: { // other options... parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, }, }) ``` -------------------------------- ### Next.js Font Optimization Source: https://github.com/supercorp-ai/superinterface/blob/main/examples/next-frontend-functions/README.md Demonstrates the use of next/font for automatic font optimization and loading, specifically for the Inter Google Font. ```javascript This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.