React

npm install artifactuse

import { ArtifactuseProvider } from 'artifactuse/react'
import 'artifactuse/styles'

function App() {
  return (
    <ArtifactuseProvider config={{ 
      theme: 'dark',
      // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
    }}>
      <YourApp />
    </ArtifactuseProvider>
  )
}

npm install prismjs

// In your app entry (e.g., App.jsx or _app.jsx)
import Prism from 'prismjs'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-python'
import 'prismjs/themes/prism-tomorrow.css' // or any theme

import { 
  ArtifactuseAgentMessage, 
  ArtifactusePanel, 
  ArtifactusePanelToggle 
} from 'artifactuse/react'

<ArtifactuseAgentMessage 
  content={message.content}
  messageId={message.id}
  typing={isStreaming}
  onFormSubmit={({ formId, values }) => {}}
  onSocialCopy={({ platform, text }) => {}}
  onMediaOpen={({ type, src }) => {}}
/>

<ArtifactusePanel
  onAIRequest={async ({ prompt, context }) => {}}
  onSave={({ artifactId, data }) => {}}
  onExport={({ artifactId, blob, filename }) => {}}
  externalPreview={true}
/>

<ArtifactusePanelToggle />

import { useArtifactuse } from 'artifactuse/react'

function MyComponent() {
  const {
    // State
    state,
    activeArtifact,
    artifactCount,
    hasArtifacts,
    
    // Methods
    processMessage,
    openArtifact,
    openPanel,
    closePanel,
    togglePanel,
    toggleFullscreen,
    setViewMode,      // 'preview' | 'code' | 'split' | 'edit'
    getPanelUrl,
    getTheme,
    setTheme,

    // Programmatic API
    openFile,          // Open file in panel (auto-detect language)
    openCode,          // Open code in panel (explicit language)
    updateFile,        // Update existing artifact in place
    clearArtifacts,    // Clear all artifacts

    // Events
    on,
    off,
  } = useArtifactuse()
  
  return (
    <button onClick={togglePanel}>
      Artifacts ({artifactCount})
    </button>
  )
}

const { on } = useArtifactuse()

useEffect(() => {
  const unsubscribe = on('ai:request', async ({ prompt, context }) => {
    const response = await yourAI.chat(prompt)
  })
  
  return unsubscribe
}, [])

import { useState, useEffect } from 'react'
import { 
  ArtifactuseProvider,
  ArtifactuseAgentMessage, 
  ArtifactusePanel, 
  ArtifactusePanelToggle,
  useArtifactuse 
} from 'artifactuse/react'
import 'artifactuse/styles'
import './styles.css'

// Optional: Prism.js for syntax highlighting
import Prism from 'prismjs'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism-tomorrow.css'

function App() {
  return (
    <ArtifactuseProvider config={{ 
      theme: 'dark',
      // branding: true, // Set to false to hide branding (requires license)
    }}>
      <Chat />
    </ArtifactuseProvider>
  )
}

function Chat() {
  const [messages, setMessages] = useState([])
  const { on } = useArtifactuse()
  
  useEffect(() => {
    on('form:submit', ({ formId, values }) => {
      // Send form data back to AI
      sendMessage(`Form submitted: ${JSON.stringify(values)}`)
    })
  }, [])
  
  return (
    <div className="app-container">
      <div className="chat">
        {messages.map(msg => (
          <ArtifactuseAgentMessage 
            key={msg.id}
            content={msg.content}
            messageId={msg.id}
            typing={msg.isStreaming}
          />
        ))}
        
        <ArtifactusePanelToggle />
      </div>
      
      <ArtifactusePanel />
    </div>
  )
}

/* styles.css */
html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.app-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.chat {
  flex: 1;
  padding: 20px;
  min-width: 0;
  overflow-y: auto;
}