Context is additional information with prompts to help the AI generate better code. Builder Projects uses context to understand existing patterns, design systems, and requirements, and create code that fits the project's current architecture.
Add context by clicking the + icon for files, using @ to search the codebase, or selecting other context options in the prompt interface.
Builder Projects supports different context types for enhanced AI code generation. The table below details each option:
| Context type | Supported formats | Use case | How this works |
|---|---|---|---|
Attach |
| Attach local files for code patterns and documentation. | Opens file explorer to select files. |
Codebase search | Any file in the repository | Reference existing files in the connected repository. | Type |
Custom Instructions | Text input | Set persistent project context and coding preferences. | Opens text input for reusable instructions. |
Figma Import | Exported Figma designs | Convert Figma designs directly into code components. | Imports designs using the Builder Figma plugin. |
Web Import | Entire or parts of a web page | Copy and recreate layouts from any website. | Imports layouts copied using the Builder Chrome extension. |
MCP Servers | Built-in Integrations and Custom servers | Integrate with external systems, data sources, and workflows. | Accesses configured MCP server integrations. |
Element selection | Modify specific UI components without affecting others. | Targets selected canvas elements for focused edits. |
For complete details on file attachment methods, size limits, and technical specifications, refer to Best practices for prompting Projects.
Use cases:
- Reference existing components for pattern consistency. For example, enter the prompt: use the same card layout as
product-list.tsx. - Attach requirements documents or PRDs for complete feature implementation.
- Include API specifications or technical documentation.
- Share coding style guides or configuration files.
Builder Projects understands codebase structure and generates code that follows existing patterns and component architecture.
The @ symbol in the prompt opens a search interface to find and attach files from the connected repository as context for referencing existing patterns, configurations, utilities, or component examples.
How to use:
- Type
@in the prompt. - Select the file from the list.
- Write a detailed prompt referencing the attached file.
Example prompt: "follow the structure from the @components/Example.tsx file to create a navigation component with a company logo on the left, horizontal menu items for Home, About, Services, and Contact in the center, and a user profile dropdown with a logout option on the right, using the exact responsive breakpoints and hover effects."
Provides persistent context and preferences that apply to all prompts, helping the AI understand project-specific requirements without repeating instructions.
Custom instructions help Builder Projects understand coding style, project structure, and team preferences across all interactions with the Visual Editor.
For complete instructions on Figma workflows, export processes, plugin setup, and step-by-step implementation guides, see Convert a Figma design to code with Projects.
Key capabilities:
- Single frame implementation: convert individual designs into components for the Visual Editor.
- Multi-frame features: create functioning features like carousels from multiple frames.
- Component variant conversion: transform Figma variants into code components with typed props.
- Design token updates: apply new design system changes to existing code.
For installation instructions, detailed workflows, and troubleshooting, see Builder Chrome extension documentation.
Key capabilities:
- Import layouts from any website on the internet.
- Automatic responsive capture at multiple screen sizes.
- Works with both Builder and non-Builder pages.
For server setup, configuration, and available integrations, see MCP Servers.
Built-in Integrations:
- Linear: read and write project management data.
- Neon: database operations and queries.
- Atlassian: access Jira tickets and project management tools.
- Google Drive: connect to documents and shared files.
- Custom servers: connect MCP servers for specialized integrations.
MCP Servers helps Builder Projects fetch real data, create tickets, send notifications, and interact with existing development workflow beyond the Visual Editor.
Precision targeting ensures changes affect only the component intended for modification, maintaining the rest of the layout in the Visual Editor.
When an element is selected on the canvas, modifications precisely apply to the selected component while other UI elements remain unaffected.
Follow the best practices below:
- Be specific about what is wanted from attached context.
- Reference context explicitly in prompts.
- Combine multiple context types when helpful.
The table below compares the recommended prompt examples with the vague alternatives:
| ✅ Recommended | ❌ Not recommended |
|---|---|
"Use the card layout from dashboard-template.tsx to create a testimonial component with the author's name, quote, and company logo, after the pricing section, as per the attached screenshot." | "Build this using the attached files." |
"Match the color scheme from the attached Figma design to update the navigation bar background and button states." | "Make this look like the design." |
- Learn more about Builder Projects and getting started with AI-powered development.
- Read best practices for prompting Projects, including supported file formats and size limits.
- Explore complete Figma to Projects workflows with step-by-step instructions.
- Install the Builder Chrome extension for web layout importing.
- Read about connecting GitHub repository to Projects.