How to Build a ChatGPT Web App by Copy-Pasting Only (No-Code)

WebApp

Environment: Windows or macOS, Chrome, free hosting (CodePen/Glitch/Netlify/Vercel), and any chatbot widget service that issues an embed code (iframe or script).

Introduction

If APIs feel intimidating, you can still launch a ChatGPT-style app today by pasting an embed snippet into a clean HTML template. The widget provider handles model access and security; you handle layout and publishing. This guide provides the exact template and “copy-paste” workflow.

Steps

  1. Sign up for a widget provider and create a bot. Copy the embed snippet it gives you.
  2. Copy the HTML template (above) into index.html.
  3. Paste the snippet at the marked comment.
  4. Publish with CodePen/Glitch (instant preview) or Netlify/Vercel (drag-and-drop).
  5. Customize by copy-paste: tweak CSS variables (colors), edit header text, adjust aspect-ratio for mobile.

Code (Template)

See the Japanese section for the full HTML. Replace the placeholder with your provider’s embed code (iframe or script). No API handling on your side.

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ChatGPTアプリ（コピペ版）</title>
  <meta name="description" content="埋め込みコードを貼るだけで動くChatGPT風Webアプリのテンプレート">
  <style>
    :root {
      --bg: #f5f7fb;
      --card: #ffffff;
      --accent: #2563eb;
      --text: #0f172a;
      --muted: #64748b;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Arial, sans-serif;
      background: linear-gradient(180deg, var(--bg), #e9eef9);
      color: var(--text);
    }
    header {
      padding: 24px 16px;
      text-align: center;
    }
    .app {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 16px 48px;
    }
    .card {
      background: var(--card);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
      overflow: hidden;
      border: 1px solid rgba(2, 6, 23, 0.06);
    }
    .hero {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(2, 6, 23, 0.06);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 9999px;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
    }
    .title {
      font-size: 18px;
      font-weight: 700;
    }
    .muted {
      color: var(--muted);
      font-size: 13px;
    }
    .frame-wrap {
      aspect-ratio: 16 / 10;
      width: 100%;
      background: linear-gradient(180deg, #eef3ff, #ffffff);
    }
    iframe, .widget-slot {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .notice {
      padding: 14px 18px;
      background: #eef6ff;
      border-top: 1px solid rgba(2, 6, 23, 0.06);
      font-size: 13px;
      color: #0b3b83;
    }
    .actions {
      display: flex;
      gap: 10px;
      padding: 16px 20px 0;
      flex-wrap: wrap;
    }
    .btn {
      appearance: none;
      border: 1px solid rgba(2, 6, 23, 0.1);
      background: #ffffff;
      color: var(--text);
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.05s ease, box-shadow 0.2s ease;
    }
    .btn.primary {
      background: var(--accent);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
    }
    .btn:hover { transform: translateY(-1px); }
    footer {
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      padding: 24px 16px 40px;
    }
  </style>
</head>
<body>
  <header>
    <div class="app">
      <h1>ChatGPTアプリ（コピペ版）</h1>
      <p class="muted">埋め込みコードを貼るだけで動く最小テンプレート</p>
    </div>
  </header>

  <main class="app">
    <div class="card">
      <div class="hero">
        <div class="dot"></div>
        <div class="title">AIチャット</div>
        <div class="muted" style="margin-left:auto;">レスポンシブ対応</div>
      </div>

      <div class="actions">
        <button class="btn primary" onclick="document.documentElement.style.setProperty('--accent','#16a34a')">配色：グリーン</button>
        <button class="btn" onclick="document.documentElement.style.setProperty('--accent','#2563eb')">配色：ブルー</button>
        <button class="btn" onclick="document.documentElement.style.setProperty('--accent','#db2777')">配色：ピンク</button>
      </div>

      <div class="frame-wrap">
        <!-- ▼▼▼ ここにサービス発行の埋め込みコードをコピペ ▼▼▼ -->
        <!-- 例1：iframe 方式 -->
        <!-- <iframe src="https://あなたのウィジェットのURL" allow="clipboard-read; clipboard-write; microphone; camera"></iframe> -->

        <!-- 例2：script 方式（div を用意してスクリプトを貼るタイプ） -->
        <!-- <div id="chat-widget"></div>
        <script src="https://提供元ドメイン/widget.js" data-target="#chat-widget" data-bot-id="xxxx"></script> -->
        <!-- ▲▲▲ ここまで差し替え ▲▲▲ -->

        <!-- 何も貼っていない間だけ見えるダミー領域 -->
        <div class="widget-slot" aria-hidden="true" style="display:grid;place-items:center;color:#64748b;">
          <div>
            <div style="text-align:center;font-size:14px;">上のコメント位置に「埋め込みコード」を貼るとここに表示されます。</div>
          </div>
        </div>
      </div>

      <div class="notice">
        セキュリティのため、APIキーをHTML内に直接書かないでください。埋め込みサービスが提供する「公開用スニペット」をそのまま貼り付けます。
      </div>
    </div>
  </main>

  <footer>
    © 2025 Your Site
  </footer>
</body>
</html>

Testing & Use

Open the page: if the chat loads in the card area, you’re done. If not, check the paste location and permissions (allow attributes on iframes for mic/camera). Share the public URL with users; iterate by swapping snippets or colors—still copy-paste only.

Wrap-up

By delegating model access to a widget service and using a responsive HTML shell, you can ship a ChatGPT-style web app without touching APIs. Start simple, then iterate visuals and behavior by replacing snippets.

コメント