Free Section

AI Copilot Workspace Section

A split landing page section showcasing an interactive AI assistant workspace with quick prompt chips, real-time message bubble simulation, and code responses.

dark
ai
chat
copilot
interface
split
interactive

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<section class="ai-sec">
  <div class="ai-wrap">
    <div class="ai-content">
      <span class="ai-eyebrow">Autonomous Intelligence</span>
      <h2>Code, debug &amp; deploy with an AI partner</h2>
      <p>Connect your repositories and chat directly with a context-aware model that understands your exact codebase, dependencies, and architecture.</p>
      <div class="ai-perks">
        <div class="perk"><span>⚡</span> 40ms average response latency</div>
        <div class="perk"><span>🔒</span> Zero data retention on private code</div>
        <div class="perk"><span>🧩</span> Integrates with GitHub, GitLab &amp; Slack</div>
      </div>
      <a href="#" class="ai-btn">Try Playground Free &rarr;</a>
    </div>

    <div class="ai-chatbox">
      <div class="chat-top">
        <div class="chat-title">
          <span class="chat-bot-icon">✦</span>
          <div>
            <strong>Copilot v3.4</strong>
            <span class="chat-status">Active in #backend-api</span>
          </div>
        </div>
        <span class="chat-model-badge">DeepSeek / Claude 3.5</span>
      </div>

      <div class="chat-messages" id="chatMsgs">
        <div class="msg msg-ai">
          <div class="msg-author">AI Assistant</div>
          <div class="msg-bubble">How can I assist your deployment pipeline today?</div>
        </div>
        <div class="msg msg-user">
          <div class="msg-bubble">Can you generate an optimized MongoDB aggregation pipeline for user retention cohorts?</div>
        </div>
        <div class="msg msg-ai">
          <div class="msg-author">AI Assistant</div>
          <div class="msg-bubble">
            Here is the pipeline with indexed $match and $facet stages for 30-day retention:
            <pre><code>[
  { $match: { createdAt: { $gte: ISODate("2026-01-01") } } },
  { $group: { _id: "$cohortWeek", activeUsers: { $addToSet: "$userId" } } }
]</code></pre>
          </div>
        </div>
      </div>

      <div class="chat-chips">
        <button class="chip" data-query="Explain time complexity">Explain time complexity</button>
        <button class="chip" data-query="Add unit test with Jest">Add Jest test</button>
        <button class="chip" data-query="Audit security vulnerabilities">Audit security</button>
      </div>

      <div class="chat-input-bar">
        <input type="text" id="chatInput" placeholder="Ask anything about your architecture..." />
        <button id="sendBtn" class="chat-send">Send</button>
      </div>
    </div>
  </div>
</section>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a split landing-page section with an interactive AI assistant chat workspace in HTML, CSS and vanilla JavaScript.

Requirements:
- Split layout: marketing value proposition on the left (eyebrow, title, benefits list with icons, CTA button).
- Interactive simulated chat card on the right (dark navy #0d1222, 22px radius, model version badge).
- Chat stream with distinct user (purple bubble, aligned right) and assistant messages (glass bubble, aligned left, formatted code blocks).
- Quick prompt chips above the input bar that insert realistic developer questions when clicked.
- Working message input that appends user message and simulates an automated AI reply after 600ms.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Set up a 2-column CSS grid that stacks responsively on mobile viewports.
2
Design the chat UI with header status, scrollable conversation viewport, chips bar, and input form.
3
Style user and assistant message bubbles with high contrast color coding.
4
Write JavaScript to append messages dynamically and auto-scroll to the latest message.
5
Add quick-suggestion chips that dispatch sample queries on click.

Customisation tips

Use overflow-y: auto with scroll-behavior: smooth so conversation scrolling feels natural.
Sanitize or escape user text if rendering dynamic HTML in production.