> ## Documentation Index
> Fetch the complete documentation index at: https://artifactuse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get up and running in 5 minutes

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install artifactuse
  ```

  ```bash yarn theme={null}
  yarn add artifactuse
  ```

  ```bash pnpm theme={null}
  pnpm add artifactuse
  ```
</CodeGroup>

## Syntax Highlighting (Optional)

For code syntax highlighting in the panel, add Prism.js:

<CodeGroup>
  ```bash npm theme={null}
  npm install prismjs
  ```

  ```bash cdn theme={null}
  <!-- Add to your HTML head -->
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" />
  ```
</CodeGroup>

```js theme={null}
// If using npm, import in your app entry
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 you prefer
```

## Basic Usage

<Tabs>
  <Tab title="Vue 3">
    ```vue theme={null}
    <template>
      <div class="app-container">
        <div class="chat">
          <ArtifactuseAgentMessage 
            v-for="msg in messages"
            :key="msg.id"
            :content="msg.content"
            :message-id="msg.id"
            @form-submit="handleFormSubmit"
            @social-copy="handleSocialCopy"
          />
          
          <ArtifactusePanelToggle />
        </div>
        
        <ArtifactusePanel @ai-request="handleAIRequest" />
      </div>
    </template>

    <script setup>
    import { ref } from 'vue'
    import { 
      ArtifactuseAgentMessage, 
      ArtifactusePanel, 
      ArtifactusePanelToggle,
      provideArtifactuse 
    } from 'artifactuse/vue'
    import 'artifactuse/styles'

    provideArtifactuse({
      theme: 'dark',
      // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
    })

    const messages = ref([])

    function handleFormSubmit({ formId, values }) {
      console.log('Form submitted:', formId, values)
    }

    function handleSocialCopy({ platform, text }) {
      console.log('Copied:', platform, text)
    }

    async function handleAIRequest({ prompt, context }) {
      const response = await yourAI.chat(prompt)
    }
    </script>

    <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    #app {
      height: 100%;
    }

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

    .chat {
      flex: 1;
      padding: 20px;
      min-width: 0;
      overflow-y: auto;
    }
    </style>
    ```
  </Tab>

  <Tab title="Vue 2">
    ```vue theme={null}
    <template>
      <div class="app-container">
        <div class="chat">
          <ArtifactuseAgentMessage 
            v-for="msg in messages" 
            :key="msg.id"
            :content="msg.content"
            :message-id="msg.id"
            @form-submit="handleFormSubmit"
            @social-copy="handleSocialCopy"
          />
          
          <ArtifactusePanelToggle />
        </div>
        
        <ArtifactusePanel @ai-request="handleAIRequest" />
        
        <!-- Required: Portal target for fullscreen/mobile -->
        <portal-target name="artifactuse" />
      </div>
    </template>

    <script>
    import { 
      ArtifactuseAgentMessage, 
      ArtifactusePanel, 
      ArtifactusePanelToggle,
      provideArtifactuse 
    } from 'artifactuse/vue2'
    import 'artifactuse/styles'

    export default {
      components: {
        ArtifactuseAgentMessage,
        ArtifactusePanel,
        ArtifactusePanelToggle,
      },
      setup() {
        provideArtifactuse({
          theme: 'dark',
          // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
        })
        
        // ... your setup code
      }
    }
    </script>

    <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    #app {
      height: 100%;
    }

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

    .chat {
      flex: 1;
      padding: 20px;
      min-width: 0;
      overflow-y: auto;
    }
    </style>
    ```

    <Note>
      Vue 2.6 with `@vue/composition-api` requires an alias. See [Vue docs](/docs/frameworks/vue#vue-26--vuecomposition-api) for details.
    </Note>
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { useState } from 'react'
    import { 
      ArtifactuseProvider,
      ArtifactuseAgentMessage, 
      ArtifactusePanel, 
      ArtifactusePanelToggle 
    } from 'artifactuse/react'
    import 'artifactuse/styles'
    import './styles.css'

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

    function Chat() {
      const [messages, setMessages] = useState([])
      
      return (
        <div className="app-container">
          <div className="chat">
            {messages.map(msg => (
              <ArtifactuseAgentMessage 
                key={msg.id}
                content={msg.content}
                messageId={msg.id}
                onFormSubmit={handleFormSubmit}
                onSocialCopy={handleSocialCopy}
              />
            ))}
            
            <ArtifactusePanelToggle />
          </div>
          
          <ArtifactusePanel onAIRequest={handleAIRequest} />
        </div>
      )
    }
    ```

    ```css theme={null}
    /* 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;
    }
    ```
  </Tab>

  <Tab title="Svelte">
    ```svelte theme={null}
    <!-- +layout.svelte -->
    <script>
      import { setArtifactuseContext } from 'artifactuse/svelte'
      import 'artifactuse/styles'
      
      setArtifactuseContext({ 
        theme: 'dark',
        // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
      })
    </script>

    <slot />

    <style>
      :global(html), :global(body) {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }
    </style>
    ```

    ```svelte theme={null}
    <!-- Chat.svelte -->
    <script>
      import { 
        ArtifactuseAgentMessage, 
        ArtifactusePanel, 
        ArtifactusePanelToggle 
      } from 'artifactuse/svelte'
    </script>

    <div class="app-container">
      <div class="chat">
        {#each messages as msg (msg.id)}
          <ArtifactuseAgentMessage 
            content={msg.content}
            messageId={msg.id}
            on:formSubmit={handleFormSubmit}
            on:socialCopy={handleSocialCopy}
          />
        {/each}
        
        <ArtifactusePanelToggle />
      </div>
      
      <ArtifactusePanel on:aiRequest={handleAIRequest} />
    </div>

    <style>
      .app-container {
        display: flex;
        height: 100%;
        overflow: hidden;
      }
      
      .chat {
        flex: 1;
        padding: 20px;
        min-width: 0;
        overflow-y: auto;
      }
    </style>
    ```
  </Tab>
</Tabs>

## Add AI Prompts

Install the prompts package to teach your AI how to generate artifacts:

```bash theme={null}
npm install @artifactuse/prompts
```

```javascript theme={null}
import { canvasPrompt, videoPrompt } from '@artifactuse/prompts'

const systemPrompt = `
You are a helpful assistant.

${canvasPrompt}
${videoPrompt}
`

const response = await openai.chat.completions.create({
  model: 'gpt-4',
  messages: [
    { role: 'system', content: systemPrompt },
    { role: 'user', content: 'Create a YouTube thumbnail' }
  ]
})
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Frameworks" icon="layers" href="/docs/frameworks/react">
    Detailed setup for React, Vue, Svelte
  </Card>

  <Card title="Artifacts" icon="shapes" href="/docs/artifacts/canvas">
    Learn about each artifact type
  </Card>

  <Card title="AI Prompts" icon="sparkles" href="/docs/prompts/overview">
    Configure AI to generate artifacts
  </Card>

  <Card title="Theming" icon="palette" href="/docs/theming">
    Customize colors and styles
  </Card>
</CardGroup>