Type @ to reference pages, components, and snippets in your prompt.
Type @ anywhere in the chat bar to reference something in your project. The agent uses what you reference as context — useful for remixing an existing design, reusing a component, or pointing the agent at a snippet.
Type @ in the chat bar
Pick a page, component, or snippet from the menu — keep typing to filter
The reference appears as a chip in your prompt. Add as many as you need
Type the rest of your prompt and press Enter
The agent pulls in each reference and grounds its response in those designs.Hover over a page, component, or snippet chip to preview what it references without leaving the chat.
The page you’re working on is always included as context automatically. Use @ to bring in other pages,
components, or snippets.
The agent finds design docs by their titles and reads them as needed for your task.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Subframe Docs","colors":{"primary":"#111111","light":"#dddddd","dark":"#111111"},"logo":{"light":"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png","dark":"https://res.cloudinary.com/subframe/image/upload/v1712778911/uploads/302/ul72rsawfl5muaja4dbp.png"},"favicon":"https://mintcdn.com/subframe-59800133/UtzN_VZHB2fC7oGB/favicon.png?fit=max\u0026auto=format\u0026n=UtzN_VZHB2fC7oGB\u0026q=85\u0026s=0d98a7ca9fe9d810d018908473d7c6a1","navbar":{"links":[{"href":"https://subframe.com","label":"subframe.com"}],"primary":{"type":"button","label":"Log in","href":"https://app.subframe.com"}},"footer":{"socials":{"linkedin":"https://www.linkedin.com/company/subframeapp","x":"https://x.com/SubframeApp","github":"https://github.com/SubframeApp/subframe","instagram":"https://www.instagram.com/subframeapp","slack":"https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ","website":"https://subframe.com","youtube":"https://www.youtube.com/@SubframeApp"}},"seo":{"indexing":"all"},"icons":{"library":"lucide"},"integrations":{"ga4":{"measurementId":"G-1GGBBPL5LT"},"intercom":{"appId":"m19ac5dq"},"segment":{"key":"5nOHRiT81iSqK2WHigNEoNZWMG2JcfOq"}},"contextual":{"options":["copy","chatgpt","claude","perplexity"],"display":"header"},"metadata":{"timestamp":true},"styling":{"latex":false},"navigation":{"global":{"anchors":[{"anchor":"Go to Subframe","icon":"house","href":"https://subframe.com?utm_source=mintlify\u0026utm_medium=docs\u0026utm_campaign=global_link"},{"anchor":"Slack Community","icon":"slack","href":"https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ"},{"anchor":"YouTube","icon":"youtube","href":"https://www.youtube.com/@SubframeApp"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"subframe-59800133","hasAudioNarration":false,"actualSubdomain":"subframe-59800133","customDomains":["docs.subframe.com"],"gitSource":{"type":"github","owner":"subframeapp","repo":"subframe","deployBranch":"main","contentDirectory":"packages/docs","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae8d5f0137482c03b45980c","collectionId":"6252001c-60d2-408c-a2fe-b9636909651b","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae8d5f0137482c03b45980c"},"feedback":{"thumbs":true,"edits":true,"issues":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae91f999ea91cadc17f5ae0","clientVersion":"0.0.4045","searchFilterCounts":[{"language":"default","tag":"Design","count":39},{"language":"default","tag":"Core Concepts","count":18},{"language":"default","tag":"Building from scratch","count":16},{"language":"default","tag":"Using the editor","count":12},{"language":"default","tag":"Agent","count":8},{"language":"default","tag":"Components","count":6},{"language":"default","tag":"Developer guides","count":6},{"language":"default","tag":"Browser","count":5},{"language":"default","tag":"Troubleshooting","count":5},{"language":"default","tag":"Admin and billing","count":4}]},"assistantConfig":{"enableAskAiButton":true,"enableStarterQuestions":false,"enableAskAiSearchBar":true,"deflection":{"enabled":true,"email":"support@subframe.com","showHelpButton":true}},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":".frame{background:#f5f5f5}"}],"page":{"pagePath":"design/ask-ai/adding-context","slug":"/design/ask-ai/adding-context","pageMetadata":{"title":"Adding context with @","description":"Type @ to reference pages, components, and snippets in your prompt.","href":"/design/ask-ai/adding-context"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Type @ to reference pages, components, and snippets in your prompt.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,em:`em`,li:`li`,ol:`ol`,p:`p`,strong:`strong`,..._provideComponents(),...props.components},{Note}=_components;if(!Note)_missingMdxReference(`Note`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`Type `,_jsx(`kbd`,{children:`@`}),` anywhere in the chat bar to reference something in your project. The agent uses what you reference as context — useful for remixing an existing design, reusing a component, or pointing the agent at a snippet.`]}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Type `,_jsx(`kbd`,{children:`@`}),` in the chat bar`]}),`\n`,_jsxs(_components.li,{children:[`Pick a `,_jsx(_components.strong,{children:`page`}),`, `,_jsx(_components.strong,{children:`component`}),`, or `,_jsx(_components.strong,{children:`snippet`}),` from the menu — keep typing to filter`]}),`\n`,_jsx(_components.li,{children:`The reference appears as a chip in your prompt. Add as many as you need`}),`\n`,_jsxs(_components.li,{children:[`Type the rest of your prompt and press `,_jsx(`kbd`,{children:`Enter`})]}),`\n`]}),`\n`,_jsx(_components.p,{children:`The agent pulls in each reference and grounds its response in those designs.`}),`\n`,_jsx(_components.p,{children:`Hover over a page, component, or snippet chip to preview what it references without leaving the chat.`}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`The page you’re working on is always included as context automatically. Use `,_jsx(`kbd`,{children:`@`}),` to bring in `,_jsx(_components.em,{children:`other`}),` pages,\ncomponents, or snippets.`]})}),`\n`,_jsxs(_components.p,{children:[`The agent finds `,_jsx(_components.a,{href:`/design/documents`,children:`design docs`}),` by their titles and reads them as needed for your task.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Adding context with @","description":"Type @ to reference pages, components, and snippets in your prompt.","href":"/design/ask-ai/adding-context"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":[],"subdomain":"subframe-59800133","siteName":"Subframe Docs","title":"Adding context with @ - Subframe Docs","relatedPagesConfig":{"enabled":true,"limit":3,"mode":"automatic"},"navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-07T19:50:31.763Z","gitLastModified":"2026-10-07T19:50:22.000Z","originalFileLocation":"design/ask-ai/adding-context.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Type @ to reference pages, components, and snippets in your prompt.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Subframe Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Adding context with @ - Subframe Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Type @ to reference pages, components, and snippets in your prompt.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Subframe Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.subframe.com/design/ask-ai/adding-context\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://subframe-59800133.mintlify.app/_mintlify/api/og/v2?division=Designing+with+AI\u0026amp;title=Adding+context+with+%40\u0026amp;description=Type+%40+to+reference+pages%2C+components%2C+and+snippets+in+your+prompt.\u0026amp;theme=69b2f1aca99b9fa855dd05fd\u0026amp;signature=d2bc74d409047d66a7f23ba2a7ee488985b49a089df3caba0eb56cbee5ff4e71\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Adding context with @ - Subframe Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Type @ to reference pages, components, and snippets in your prompt.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://subframe-59800133.mintlify.app/_mintlify/api/og/v2?division=Designing+with+AI\u0026amp;title=Adding+context+with+%40\u0026amp;description=Type+%40+to+reference+pages%2C+components%2C+and+snippets+in+your+prompt.\u0026amp;theme=69b2f1aca99b9fa855dd05fd\u0026amp;signature=d2bc74d409047d66a7f23ba2a7ee488985b49a089df3caba0eb56cbee5ff4e71\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Subframe Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#111111\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.subframe.com/design/ask-ai/adding-context\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/design/ask-ai/adding-context.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.subframe.com/#organization\",\"name\":\"Subframe Docs\",\"url\":\"https://docs.subframe.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.subframe.com#website\",\"name\":\"Subframe Docs\",\"url\":\"https://docs.subframe.com\",\"publisher\":{\"@id\":\"https://docs.subframe.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.subframe.com/design/ask-ai/adding-context#webpage\",\"url\":\"https://docs.subframe.com/design/ask-ai/adding-context\",\"name\":\"Adding context with @\",\"description\":\"Type @ to reference pages, components, and snippets in your prompt.\",\"dateModified\":\"2026-10-07T19:50:22.000Z\",\"isPartOf\":{\"@id\":\"https://docs.subframe.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.subframe.com/design/ask-ai/adding-context#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.subframe.com/design/ask-ai/adding-context#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Design\",\"item\":\"https://docs.subframe.com/design/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing with AI\",\"item\":\"https://docs.subframe.com/design/ask-ai/prompt-to-design\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Adding context with @\",\"item\":\"https://docs.subframe.com/design/ask-ai/adding-context\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.subframe.com/design/ask-ai/adding-context#article\",\"headline\":\"Adding context with @\",\"name\":\"Adding context with @\",\"description\":\"Type @ to reference pages, components, and snippets in your prompt.\",\"url\":\"https://docs.subframe.com/design/ask-ai/adding-context\",\"mainEntityOfPage\":{\"@id\":\"https://docs.subframe.com/design/ask-ai/adding-context#webpage\"},\"dateModified\":\"2026-10-07T19:50:22.000Z\",\"publisher\":{\"@id\":\"https://docs.subframe.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.subframe.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Subframe Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Subframe Docs","nav":{"global":{"anchors":[{"anchor":"Go to Subframe","icon":"house","href":"https://subframe.com?utm_source=mintlify\u0026utm_medium=docs\u0026utm_campaign=global_link"},{"anchor":"Slack Community","icon":"slack","href":"https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ"},{"anchor":"YouTube","icon":"youtube","href":"https://www.youtube.com/@SubframeApp"}]},"pages":[{"title":"Introduction","href":"/overview"},{"title":"Quickstart","href":"/quickstart"},{"title":"Desktop app","href":"/desktop-app"},{"title":"FAQ","href":"/faq"},{"group":"Design","pages":[{"title":"Overview","href":"/design/overview"},{"group":"Core Concepts","pages":[{"title":"Elements","href":"/design/elements"},{"group":"Components","pages":[{"title":"Overview","href":"/design/components/overview"},{"title":"Subcomponents","href":"/design/components/subcomponents"},{"title":"Props \u0026 slots","href":"/design/components/props-and-slots"},{"title":"Variants","href":"/design/components/variants"},{"title":"Hover, active, focus states","href":"/design/components/states"},{"title":"Import existing design system","href":"/design/components/importing"}]},{"title":"Pages","href":"/design/pages"},{"group":"Theme","pages":[{"title":"Customizing theme","href":"/design/theme/customizing-theme"},{"title":"Importing tokens","href":"/design/theme/importing-tokens"},{"title":"Exporting theme","href":"/design/theme/exporting-theme"},{"title":"Adding custom fonts","href":"/design/theme/adding-custom-fonts"}]},{"title":"Canvases","href":"/design/canvases"},{"title":"Snippets","href":"/design/snippets"},{"title":"Writing design docs","href":"/design/documents"},{"group":"Projects","pages":[{"title":"Overview","href":"/design/projects/overview"},{"title":"Project settings","href":"/design/projects/project-settings"},{"title":"Version history","href":"/design/projects/version-history"}]}]},{"group":"Using the editor","pages":[{"title":"Layers","href":"/design/design-mode/layers"},{"title":"Inspector","href":"/design/design-mode/inspector"},{"title":"Adding elements","href":"/design/design-mode/adding-elements"},{"title":"Working with stacks","href":"/design/design-mode/working-with-stacks"},{"title":"Page layouts","href":"/design/design-mode/page-layouts"},{"title":"Previewing designs","href":"/design/design-mode/preview"},{"title":"Responsive design","href":"/design/design-mode/responsive-design"},{"title":"Quick actions","href":"/design/design-mode/quick-actions"},{"title":"Keyboard shortcuts","href":"/design/design-mode/keyboard-shortcuts"},{"title":"Comments","href":"/design/design-mode/comments"},{"title":"Share designs","href":"/design/design-mode/share-designs"},{"title":"Custom CSS","href":"/design/design-mode/custom-css"}]},{"group":"Designing with AI","pages":[{"title":"Generating designs","href":"/design/ask-ai/prompt-to-design"},{"title":"Quick edits","href":"/design/ask-ai/making-quick-edits"},{"title":"Image to design","description":"Turn screenshots, Figma exports, and web pages into designs with Subframe’s AI agent.","href":"/design/ask-ai/image-to-design"},{"title":"Adding context with @","href":"/design/ask-ai/adding-context"}]},{"title":"Exporting code and images","description":"View and export code and images from your designs.","href":"/design/code-mode/overview"},{"group":"Prototype mode","pages":[{"title":"Creating prototypes","href":"/design/prototype-mode/overview"},{"title":"Annotations","href":"/design/prototype-mode/annotations"},{"title":"Interactions","href":"/design/prototype-mode/click-through-prototypes"}]}]},{"group":"Browser","pages":[{"title":"Overview","href":"/browser/overview"},{"title":"Previewing your local app","href":"/browser/previewing-your-local-app"},{"title":"Making live edits","href":"/browser/making-live-edits"},{"title":"Capturing as designs","href":"/browser/capturing-as-designs"},{"title":"Troubleshooting","href":"/browser/troubleshooting"}]},{"group":"Agent","pages":[{"title":"Using Agent chat","href":"/agent/overview"},{"title":"Connecting an agent","href":"/agent/connecting-an-agent"},{"title":"MCP server","href":"/agent/mcp-server"},{"title":"Connecting your codebase","href":"/agent/connecting-your-codebase"},{"title":"Giving your agent context","href":"/agent/giving-your-agent-context"},{"title":"Making code changes","href":"/agent/making-code-changes"},{"title":"Managing chats","href":"/agent/managing-chats"},{"title":"Troubleshooting","href":"/agent/troubleshooting"}]},{"group":"Building from scratch","pages":[{"sidebarTitle":"Overview","title":"Starting your design system in Subframe","href":"/develop/overview"},{"title":"Installation","href":"/develop/installation"},{"group":"How it works","pages":[{"title":"Design to code workflow","href":"/develop/concepts/design-to-code"},{"title":"Code generation","href":"/develop/concepts/code-generation"},{"title":"Syncing components","href":"/develop/concepts/syncing-components"}]},{"group":"Developer guides","pages":[{"title":"Dark mode","href":"/develop/guides/dark-mode"},{"title":"Accessibility","href":"/develop/guides/accessibility"},{"title":"Testing","href":"/develop/guides/testing"},{"title":"CLI in CI \u0026 agents","href":"/develop/guides/cli-automation"},{"title":"Publishing to NPM","href":"/develop/guides/publish-to-npm"},{"title":"Component directories","href":"/develop/upgrading/component-directories"}]},{"group":"Troubleshooting","pages":[{"title":"Next.js","href":"/develop/frameworks/nextjs"},{"title":"Vite","href":"/develop/frameworks/vite"},{"title":"Astro","href":"/develop/frameworks/astro"},{"title":"Monorepo","href":"/develop/frameworks/monorepo"},{"sidebarTitle":"Other (manual)","title":"Manual installation","href":"/develop/frameworks/manual"}]}]},{"group":"Admin and billing","pages":[{"title":"Managing team members","href":"/admin/managing-team"},{"title":"Managing pricing and plans","href":"/admin/pricing-and-plans"},{"title":"Managing auth tokens","href":"/admin/auth-tokens"},{"group":"Single sign-on (SSO)","pages":[{"title":"Setting up Okta SSO","href":"/admin/sso/okta"}]}]}]},"basePath":"","title":"Adding context with @ - Subframe Docs","buildId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","deploymentId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","dynamics":[],"chunks":[]}