{"componentChunkName":"component---src-templates-project-page-js","path":"/project/cloud-canvas-ai/","result":{"data":{"site":{"siteMetadata":{"title":"M.Hassan Ahmed","author":"Hassan11196"}},"markdownRemark":{"id":"db247d3a-901b-5b27-8c23-b948afa15fbf","excerpt":"CloudCanvasAI An AI-powered document creation and editing platform that combines Claude AI with a real-time document preview. You chat with Claude on the left…","html":"<h1>CloudCanvasAI</h1>\n<p>An AI-powered document creation and editing platform that combines Claude AI with a real-time document preview. You chat with Claude on the left, and the generated documents (<code class=\"language-text\">.docx</code>, <code class=\"language-text\">.pptx</code>, <code class=\"language-text\">.pdf</code>, <code class=\"language-text\">.xlsx</code>) render live on the right.</p>\n<h2>What I Built</h2>\n<ul>\n<li><strong>Split-panel UI:</strong> A React + Vite frontend that pairs a streaming chat panel with a live document preview, so users see the output take shape as Claude writes it.</li>\n<li><strong>FastAPI backend:</strong> REST + Server-Sent-Event streaming, sandbox lifecycle management, and authenticated file serving.</li>\n<li><strong>Per-user isolation:</strong> Every session runs inside its own E2B sandbox. Isolated filesystem, no cross-user leakage, ephemeral by default.</li>\n<li><strong>Agentic document tooling:</strong> The Claude Agent SDK drives dedicated skills for each file format (<code class=\"language-text\">docx</code>, <code class=\"language-text\">pdf</code>, <code class=\"language-text\">pptx</code>, <code class=\"language-text\">xlsx</code>).</li>\n<li><strong>Authentication:</strong> Firebase Auth on the client, Firebase Admin SDK on the server, with ID-token verification on every request.</li>\n</ul>\n<h2>Why It’s Useful</h2>\n<ul>\n<li><strong>Visual feedback loop:</strong> You don’t have to wait for a download to check if the output is right. You watch it build.</li>\n<li><strong>Safe multi-tenant execution:</strong> Code and file operations happen inside per-user sandboxes, not the app server.</li>\n<li><strong>Composable skills:</strong> Each document format is its own skill, so adding new output types is additive rather than invasive.</li>\n</ul>","frontmatter":{"title":"CloudCanvasAI","pics":[{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAACEklEQVQoz0WSzWoTURiGB9Sk+WmSSeZ/JtM2MJOaNukiUCtiNwq1e3eK2o0XUBR0L6gouqgx2XshWvASvIO66LKGkMy0po98p0w88HLOnOE8532/72it1ZhW2ML3fTzPUwqCQM22bSuZjQqGXsTUSxh6Cdd1CIImvu/huu7iXLPZRGu1WqytrRGGIfV6nUKhQLVapVQqkcvlyeduUPX7GPE+RrRHbXUX22vSbq/j+QGmaWFZcrGD7bhonU6HXq9Ht9vFNE2KxaKCLS8vU6lUKBYLBP1nxPvviPfeEO6+Iopucqu/Sa+7Tm8jWmhrM0YTy1ncel1nJWwirqMoIo5jHMfB0Ms0qnkatQJ6+Ror0Q7b95+zfe+ArbtP6ew8YuP2Y7p3nqBZlli2VK0ksm1ffRuGoSSuG4aJZTv4QUg+d50HDw/5/O0Xb0c/ef3pmMP333nx4QcvPx6jZYUX6bqunApEgRoNarWa2i+Xy0qapjH8eoSM2WzG/3FJMhtfAcWRRJNmSKfa7fYirkCkltkswKOjLwqRJAnn5xdc/J0znc44O/tzFVk6JWBxI67EpcCktlIGcZj9E+BoNCJJUk5PT0nSVEEnk4lyrLmujee6CiCH5NlIl6Xbsl5aWlpoEXk45PISxuPxInCSnjOeTNH63VXiOFIPVZxk8bPGZPUUyb5cNhgMmM4STk5+k6apAs7nc6V/ka1i8DmHKOgAAAAASUVORK5CYII=","aspectRatio":2.0238095238095237,"src":"/static/0de17268883730afe1d095730e07f7f8/40a76/cloudcanvas.png","srcSet":"/static/0de17268883730afe1d095730e07f7f8/c972b/cloudcanvas.png 340w,\n/static/0de17268883730afe1d095730e07f7f8/27625/cloudcanvas.png 680w,\n/static/0de17268883730afe1d095730e07f7f8/40a76/cloudcanvas.png 1360w,\n/static/0de17268883730afe1d095730e07f7f8/1e49b/cloudcanvas.png 2040w,\n/static/0de17268883730afe1d095730e07f7f8/2d037/cloudcanvas.png 2528w","sizes":"(max-width: 1360px) 100vw, 1360px"}}}],"date":"2025-11-15T00:00:00.000Z","description":"AI-powered document creation platform pairing Claude with a live .docx / .pptx / .pdf / .xlsx preview. Chat on the left, documents render live on the right, each user gets their own isolated E2B sandbox.","thumbnail":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAACEklEQVQoz0WSzWoTURiGB9Sk+WmSSeZ/JtM2MJOaNukiUCtiNwq1e3eK2o0XUBR0L6gouqgx2XshWvASvIO66LKGkMy0po98p0w88HLOnOE8532/72it1ZhW2ML3fTzPUwqCQM22bSuZjQqGXsTUSxh6Cdd1CIImvu/huu7iXLPZRGu1WqytrRGGIfV6nUKhQLVapVQqkcvlyeduUPX7GPE+RrRHbXUX22vSbq/j+QGmaWFZcrGD7bhonU6HXq9Ht9vFNE2KxaKCLS8vU6lUKBYLBP1nxPvviPfeEO6+Iopucqu/Sa+7Tm8jWmhrM0YTy1ncel1nJWwirqMoIo5jHMfB0Ms0qnkatQJ6+Ror0Q7b95+zfe+ArbtP6ew8YuP2Y7p3nqBZlli2VK0ksm1ffRuGoSSuG4aJZTv4QUg+d50HDw/5/O0Xb0c/ef3pmMP333nx4QcvPx6jZYUX6bqunApEgRoNarWa2i+Xy0qapjH8eoSM2WzG/3FJMhtfAcWRRJNmSKfa7fYirkCkltkswKOjLwqRJAnn5xdc/J0znc44O/tzFVk6JWBxI67EpcCktlIGcZj9E+BoNCJJUk5PT0nSVEEnk4lyrLmujee6CiCH5NlIl6Xbsl5aWlpoEXk45PISxuPxInCSnjOeTNH63VXiOFIPVZxk8bPGZPUUyb5cNhgMmM4STk5+k6apAs7nc6V/ka1i8DmHKOgAAAAASUVORK5CYII=","aspectRatio":2.0238095238095237,"src":"/static/0de17268883730afe1d095730e07f7f8/40a76/cloudcanvas.png","srcSet":"/static/0de17268883730afe1d095730e07f7f8/c972b/cloudcanvas.png 340w,\n/static/0de17268883730afe1d095730e07f7f8/27625/cloudcanvas.png 680w,\n/static/0de17268883730afe1d095730e07f7f8/40a76/cloudcanvas.png 1360w,\n/static/0de17268883730afe1d095730e07f7f8/1e49b/cloudcanvas.png 2040w,\n/static/0de17268883730afe1d095730e07f7f8/2d037/cloudcanvas.png 2528w","sizes":"(max-width: 1360px) 100vw, 1360px"}}}}}},"pageContext":{"slug":"/cloud-canvas-ai/","previous":"projectundefined","next":"projectundefined"}},"staticQueryHashes":["32046230"]}