Superinterface

https://github.com/supercorp-ai/superinterface
Admin
Superinterface is a React library for building AI-first assistant interfaces like chats and wizards...
Tokens:5,089
Snippets:28
Trust Score:9.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### 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.
```
Tokens:
Raw