Design to Shipped. Faster.
Son Güncellemeler
-
WWW.BUILDER.IOHow to Build Your Own MCP ServerI don’t know about you, but I find myself switching AI models (surprise Gemini release anybody?) and clients (Cursor, Windsurf, Cursor again—no, wait!) pretty often.What frustrates me more than anything is loss of context. I’m constantly explaining to the AI what it needs to know about my problem and trying to get it to act in “my style” of doing things.But what if that context were portable? What if you could ask a question in Claude Desktop, get an answer, and then recall the conversation later in Cursor when coding?In this article, we’ll do just that, building out the tooling together in just a few quick steps. Here’s how the final product will look:Here’s the complete code for this example project so you can clone it. I recommend following along; the goal is that by the end of this tutorial, you’ll be able to create your own lil’ dream server.Why bother with MCP?What you’re seeing above is, as you may have guessed from the 48px title and borderline-absurd keyword optimization of this post, a Model Context Protocol (MCP) server.If you already know all about MCP and want to get to building, feel free to skip this section and head on down to the “Quick Start.” Otherwise, set your stopwatch—here’s the 3-minute primer.1. Why does MCP exist?If you want autonomous AI agents, you’re gonna need tools that enable them to see and interact with the world around them. Unfortunately, connecting AI assistants directly to tools makes for fragile integrations; update the AI model or the API on either side of the tool, and you get broken code.So, how can we build more robust, reusable AI capabilities?One route is through Anthropic’s Model Context Protocol (MCP). It’s a standardized communication layer (based on JSON-RPC) that allows AI clients (like Cursor) to discover and use external capabilities provided by MCP servers.These capabilities include accessing persistent data (Resources), performing various actions in the outside world (Tools), and receiving specific instructions on how to use those resources and tools (Prompts).For a full exploration of MCP's goals, architecture, and potential, you can read my deep dive.That’s great, but…Clients like Cursor and Windsurf already have great AI agents without MCP. So, why do we need more tools?Put simply, client developers can’t build everything. They don’t want to spend all their development hours tweaking web search for every new model, and they’re definitely not out here trying to roll their own Jira integration.MCP lets service providers like GitHub and Notion maintain their own AI integrations, which means higher-quality interactions and less duplicated effort.So, when you opt into using an MCP server, the main benefits you get are future-proofing and portability. You get an enormous ecosystem of plug-and-play tools that you can bring to any chat window that implements the standard.Okay, but…Even if you’re not a developer who needs to wire up their own service API to MCP, there are a lot of benefits to having the knowhow.For me, I’ve noticed that the more I spend time building servers, the less I feel like my entire job is just copy/pasting huge swaths of text between input boxes. I’m automating context, and it makes AI models more personally useful to me.Plus, it feels like a way to put a stake in the ground with the ever-shifting landscape of AI. Tools I build today should keep working even as new models, clients, and services come around.But enough waxing poetic. Time to roll up our sleeves.Quick start: Vibe code?I’m not gonna lie: If you want to just hand the AI agent the MCP docs and tell it what functionalities you want… well, it’s probably gonna work. This is the kind of code AI is especially good at—it’s boilerplatey.Use the MCP Inspector as you go, and keep feeding errors back to the AI. And check out our best Cursor tips to get the most out of the AI agent.Otherwise, here’s the breakdown for those who want to learn how the architecture works, in order to build scalable AI tools. Quick start, for real: Clone, install, buildLet's get the code base ready with these three steps. We won't worry about API keys or client setup yet.Clone the Repository: Get the example code onto your local machine. Install Dependencies: We need the MCP SDK and a few other libraries. Build the Code: Compile the TypeScript source code into runnable JavaScript.You now have the compiled code in the build/ directory.If you want to grab an OpenRouter API key and head on down to “Running the server with real clients,” you’re more than welcome to. The server will work as is.The core loop: Running your first serverBefore we dive into the specific features of this CSS Tutor example, let's nail down the fundamental structure of any MCP server built with the TypeScript SDK and get a minimal version running.Open the main server file: src/index.ts. You'll see these key parts:Imports: The file brings in McpServer (the core server class) and StdioServerTransport (for communication) from the @modelcontextprotocol/sdk. Registration imports: We import registerPrompts, registerResources, and registerTools from other files in the src/ directory. These functions (which we'll explore later) are responsible for telling the server about the specific capabilities we want to give it. Server instantiation: We create the server instance, setting the server's name and version, and initializing empty placeholders for its capabilities. Calling registrations: The imported register* functions are called: These calls populate the server instance with the actual tools, resources, and prompts defined elsewhere. The main function: This async function sets up the communication transport and connects the server: Execution: Finally, main() is called with basic error handling.This structure is the heart of the server. It initializes, registers capabilities, and connects for communication.To make sure this core loop works without needing any external APIs or complex logic yet, let's temporarily modify src/index.ts:Comment out the capability registration calls: Add a simple "hello" tool right before the main function definition: Re-build the code:With just these changes in src/index.ts, we now have a runnable MCP server that offers only one basic tool. It doesn't do much yet besides offer Empire Strikes Back spoilers, but it confirms the core structure and communication setup is working.Debug with the MCP InspectorNow that we have a minimal, runnable server, how do we check if it's actually speaking MCP correctly? We use Anthropic’s MCP Inspector.This command-line utility acts as a basic MCP client. It launches your server process, connects to it via standard I/O (just like Claude Desktop or Cursor would), and shows you the JSON-RPC messages being exchanged.From your project's root directory, run:npx @modelcontextprotocol/inspector node ./build/index.jsnpx ...inspector: Downloads and runs the inspector package. node: The command to execute your server. ./build/index.js: The path to your compiled server entry point.The inspector will start, connect to your server, and begin exchanging messages. If you go to the localhost url, you can interact with it:Connection: You'll see initialize messages confirming the connection. List tools: Use the inspector's interface to ask the server what tools it offers. You should see only our hello_world tool listed. List resources/prompts: If you try to go to the resources or prompts tabs, they should be unclickable, since we commented out their registrations. Call the tool: Use the inspector to call the hello_world tool. You should see the server respond with our custom message.The MCP Inspector is your best friend during development. After each step where you add or modify a capability (tool, resource, or prompt), verify that the server registers it correctly and responds as expected. The Inspector lets you test server functionality without involving a full AI client.Use the buddy system: anywhere you go, the MCP Inspector goes. (^ Live footage of you and the MCP Inspector.)Building out the real capabilitiesNow that we have the basic server running and know how to debug it with the Inspector, let's 1) grab some snacks, and 2) incrementally add the actual CSS Tutor features.Feel free to tweak the capabilities as we go along—all coding skills are welcome!First, let's activate and understand the tool that fetches external information.In src/index.ts, remove the dummy hello_world tool definition we added earlier, and uncomment the line registerTools();. This line calls the function in src/tools/index.ts that registers all our tools.export const server = new McpServer({ name: "css-tutor", version: "0.0.1", capabilities: { prompts: {}, resources: {}, tools: {} } }); // registerPrompts(); // registerResources(); registerTools(); // delete dummy tool async function main() // rest of codeNow, open src/tools/index.ts and find the registerGetLatestUpdatesTool function. This is where the get_latest_updates tool is defined and registered with our server.Inside this file, you'll see a few key things happening:Configuration & safety check: It uses dotenv to load environment variables, specifically looking for OPENROUTER_API_KEY. If the key is missing, it logs a warning and skips registration, preventing the server from offering a tool that can't function. Tool registration: It uses server.tool() to register the get_latest_updates tool. This includes giving it a name, a description for the AI client, and defining its input schema (in this case, {} because it takes no arguments). Core logic (Handler): The core logic is in the asynchronous handler function passed to server.tool(). This handler is responsible for: Activation: Finally, the main registerTools function (at the bottom of the file) ensures that registerGetLatestUpdatesTool() gets called when the server starts up.Compile the changes.npm run buildTo test this tool with the Inspector, the server process needs the API key. Prefix the inspector command:# Example on Linux/macOS OPENROUTER_API_KEY="sk-or-..." npx @modelcontextprotocol/inspector node ./build/index.js(See the project's README.md for Windows examples).Run the MCP Inspector. Use tools/list. You should now see get_latest_updates registered. Try calling the tool via the Inspector—it should return recent CSS news! (As long as you have ~$0.04 in credits from OpenRouter available.) Now, let's activate the components that allow our server to remember information across interactions: the css_knowledge_memory resource and the tools to interact with it.Back in our main file (src/index.ts) uncomment the line registerResources();.Open up src/resources/index.ts and find the registerCssKnowledgeMemoryResource function.Registration: It uses server.resource() to define the css_knowledge_memory resource. This gives it a name, a unique URI (memory://...), read/write permissions, and an asynchronous handler function. Core logic (handler & helpers): The handler function is called when a client wants to read the resource's current state. It uses helper functions (readMemory, writeMemory also defined in this file) which handle the actual file system operations: reading, parsing, validating (with Zod), stringifying, and writing data to the data/memory.json file. This file acts as our persistent memory store. Activation: The main registerResources function (at the bottom of the file) ensures that registerCssKnowledgeMemoryResource() gets called when the server starts.Next, head on over to src/tools/index.ts and look at the registerReadFromMemoryTool and registerWriteToMemoryTool functions within src/tools/index.ts. These provide the actions clients can take related to the memory resource.Registration: Both tools are registered using server.tool(). read_from_memory has no specific input schema, while write_to_memory defines an input schema using Zod ({ concept: z.string(), known: z.boolean() }) to ensure clients send the correct data format for updates. Core logic (handlers): The read_from_memory tool's handler simply calls the imported readMemory() helper from src/resources/index.ts and returns the current state. The write_to_memory tool's handler receives validated arguments ({ concept, known }), then uses both readMemory() and writeMemory() helpers to load the current state, update it based on the input, and save the modified state back to data/memory.json. Activation: The main registerTools function ensures these tool registration functions are called.Compile the changes.npm run buildRun the MCP Inspector.In the Resources tab, you should now see css_knowledge_memory registered. In the tools tab, you should see get_latest_updates (from Step 1) plus the new read_from_memory and write_from_memory tools. Verify the statefulness: Use the Inspector to call read_from_memory, then write_to_memory with some test data (e.g., { "concept": "Grid", "known": true }), and finally call read_from_memory again. Confirm that the data returned by the second read reflects the change you wrote, and check the data/memory.json file directly to see the persisted update.Last step! Time to tell the AI model how to use the tools and resource we’ve provided.In src/index.ts, uncomment the last commented-out line, registerPrompts();.Open src/prompts/index.ts.Registration: The registerCssTutorPrompt function uses server.prompt() to define the css-tutor-guidance prompt, giving it a name and description for the client. It specifies no input schema ({}) because calling this prompt doesn't require any arguments from the client. (We could pass dynamic data here, which can get pretty spicy.) Core Logic (Handler & Content): The handler for this prompt is very simple. It just returns the content of the cssTutorPromptText constant (defined in the same file), which contains the detailed instructions for the AI on how to behave like a CSS tutor using the available tools and memory. Activation: The main registerPrompts function (at the bottom of the file) makes sure registerCssTutorPrompt() gets called when the server starts.Compile the changes.npm run buildRun the MCP Inspector.In the Prompts tab, you should now see css-tutor-guidance registered. Try calling the prompt from the Inspector. It should display the full guidance text defined in cssTutorPromptText.Pretty cool, right? Well, here’s the thing: Even though the server now offers the prompt via MCP, most clients can’t automatically use MCP prompts. Claude will need you to pick it manually, and Cursor can’t even access MCP prompts yet.So, for now, rely on features like Cursor rules to provide instructions on how to use certain MCP servers. Hopefully, we’ll see more MCP adoption soon.Running the server with real clientsWith our server fully built and debugged using the Inspector, it's time to connect it to actual AI clients.If you use the Claude desktop application:Go to Settings. Not the settings near your profile (for some reason?), but the actual app found in the top toolbar. Go to “Developer” → “Edit Config” Add an entry for the css-tutor server: Replace the absolute path (not relative!) and API key with your actual values. Restart Claude Desktop, and connect to the css-tutor server. (See video up top for where to press.)If you use the Cursor editor:Go to Cursor Settings > MCP > Add new global MCP server. Configure the server the exact same as in the Claude steps above. Create prompt rule: Cursor doesn't automatically use the server's MCP prompt, so to create a rule, go to Cursor Settings > Rules and add a new Project Rule with the pasted prompt from the server. Activate the rule: When chatting or generating code (e.g., Cmd+K) in Cursor within this project, you need to @mention the rule, and then Cursor’s agent can use the server as intended without further guidance.Et voilà!You should now be able to recreate the demo video scenario, chatting with one client and then moving to the other whenever you want.Next stepsFirst, pat yourself on the back. New skills are awesome.Second, think about the implications.This CSS Tutor example is simple by design, to help you learn the power of MCP as quickly as possible—but imagine what you could do with some real tools.Maybe you want:More sophisticated state: Replace the JSON file with a proper database (like SQLite or PostgreSQL) for multi-user support or larger datasets. Additional tools: Add tools to search specific documentation sites (like MDN), fetch CSS examples from Codepen, or even analyze a user's local CSS file. Dynamic prompts: Instead of a static prompt, make the guidance adapt based on the user's known concepts stored in the resource. Error handling and rerouting: Add more granular error handling, especially for external API calls, and reroute logic when one service is down. Different Transports: Explore other transport options besides StdioServerTransport if you need network-based communication—e.g., Server-Sent Events (SSE) for streaming.MCP provides a pretty powerful framework to make whatever you want. By building MCP servers, you can make tailored, stateful, and future-proof integrations that connect to any new assistant that speaks the protocol.Happy building! Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo0 Yorumlar 0 hisse senetleri 66 ViewsPlease log in to like, share and comment!
-
WWW.BUILDER.IOFigma to Android: Convert designs to mobile apps in secondsIt’s tough being an Android developer these days.Ask two developers to convert a Figma design into working Android code, and one might dive into Jetpack Compose's declarative Kotlin world, while the other might start bridging JavaScript with React Native. Both will spend hours in Android Studio (or Cursor) battling different screen densities, ensuring smooth transitions, and hoping everything looks right across the vast landscape of Android devices, including foldables.But what if we could automate away this tedium? Builder.io's Visual Copilot can transform Figma designs directly into production-ready code that uses Jetpack Compose, React Native, or Flutter. Get proper component structure and responsive layouts that adapt to different screen sizes, regardless of your chosen framework.In this blog post, we'll learn how Visual Copilot converts Figma designs to clean Android UIs in seconds.Visual Copilot is an AI-powered Figma plugin that generates high-quality Android code from Figma files. Supporting Jetpack Compose, React Native, and Flutter, it redirects engineering time away from tedious layout work and towards innovating and polishing the core features of your app.Visual Copilot exports your Figma visuals into polished Android code using your preferred framework. It adapts your design concepts into the specific code structures and conventions required by each tech stack.No matter which Android approach you choose, Visual Copilot interprets your Figma layout and manages the intricate conversion details. Achieving visual consistency between your original Figma files and the final UI components is now faster than ever.Your Android app needs to shine across a universe of devices—phones, tablets, foldables, and more. Visual Copilot tackles the challenge of varying screen densities and aspect ratios, making sure your UI reflows intelligently on any device. Forget manually chaining Compose modifiers or fine-tuning React Native's Flexbox properties for every possible screen configuration—Visual Copilot handles the complex layout adaptations for you.Visual Copilot can code in many major languages. It excels at generating native Android UIs with Kotlin and Jetpack Compose, but it’s just as adept at producing code for React Native. Its capabilities naturally extend to the web, supporting popular frameworks like React, Vue, and Angular, plus styling libraries such as Tailwind CSS.Therefore, whether your goal is a purely native Android experience crafted with Compose, a cross-platform app using React Native or Flutter, or even a complementary iOS app using SwiftUI, Visual Copilot provides a unified way to translate your Figma designs for each target.After Visual Copilot processes your design, you receive well-structured code specific to your Android target—be it composables or components. Planning to integrate with Android ViewModels or fetch data from APIs? Need an on-brand delete modal? No problem. The output code provides a robust starting point for further development and enhancement.Visual Copilot enables rapid iteration cycles. You can visualize your Figma adjustments in Android Studio Previews or on an emulator/device with remarkable speed. This makes it ideal for quick UI experimentation and refining concepts.The Visual Copilot plugin includes a robust command-line interface that will export Figma visuals directly into your Android Studio project or any other IDE. One unified command orchestrates the entire process: fetching the design, converting it to framework-specific code, and integrating it automatically into your source tree.For developers preferring the command line, particularly those leveraging AI-enhanced IDEs like Cursor or Windsurf, the design-to-code transition feels effortless. Embedding Figma layouts into your Android application becomes a fluid, automated step in your workflow. You can concentrate on core application logic while the CLI manages the initial UI code generation, dramatically shortening the cycle from visual concept to interactive Android experience. Visual Copilot uses a three-part workflow to transform Figma layouts into clean code. Initially, our custom AI engine deciphers your Figma file, understanding the design structure (even without auto-layout constraints). Then the Mitosis compilation engine converts this understanding into framework-specific code. Finally, an advanced language model polishes the generated code, ensuring it adheres to your project's established conventions and coding best practices. Building sophisticated UIs involves more than just surface-level layout; it requires integrating various facets of your app. Visual Copilot comprehends your entire project:Design system harmony: Effective Android interfaces leverage established visual systems, encompassing everything from core Material components to bespoke themes, font choices, and the design tokens that ensure brand consistency across the application.Code architecture: High-quality development adheres to proven architectural principles governing how code is structured, how it is organized, and how naming practices are enforced.Business logic: Your UI needs to seamlessly connect with your app's core—working with state management libraries, handling data flows, and integrating with your APIs and business rules.This multi-dimensional perspective highlights that successful Android UIs are not merely collections of isolated elements; they are integrated systems reflecting team conventions and fitting seamlessly into the application's operational logic.Getting started with Visual Copilot is straightforward:Open the Visual Copilot plugin in Figma Select the design elements you want to convert Click "Export Design" Copy the generated command to your terminal Follow the prompts to customize your Android code, and watch as it's automatically added to your projectIn this video, we export a Figma design for a feature-rich chat UI. Visual Copilot translates the design in seconds into a fully responsive iOS experience. There's no need to write Compose code by hand—the plugin delivers a seamless user experience right out of the box.Visual Copilot turbocharges the path from Figma visuals to deployable Android UIs while supporting all the major framework choices: Jetpack Compose, React Native, and Flutter. Acting as an intelligent translator between design specifications and developer environments, it renders designs into high-fidelity UIs that are optimized, interactive, and follow best practices.This contemporary design-to-code methodology complements the declarative nature of modern Android development. It frees designers to innovate on user experience, confident that the visual intent will be accurately captured. Simultaneously, it empowers developers to construct native Android applications with significantly greater velocity, reducing time spent on manual UI translation.Check out our docs to learn more about Visual Copilot's capabilities for mobile UI development and how to use it in your workflow. Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo0 Yorumlar 0 hisse senetleri 73 Views
-
WWW.BUILDER.IOVisual Editor 3.0: Prompt, Design, and Develop on One CanvasWhat if Figma was built today, AI-first? What if the precision of a design tool and the power of a full-stack development platform were engineered from the ground up with generative AI at their core?Today, we're thrilled to announce Visual Editor 3.0—bridging the gap between designers and developers with a platform that transforms how digital products are created, from concept to production-ready code.Prompt and build interactive apps with Figma-like precisionWe've completely redesigned our UI to feel like Figma, but with capabilities that go beyond design. You can generate fully interactive applications using natural language prompts while maintaining the pixel-perfect precision and control designers expect.Describe what you want to build, and Visual Editor AI creates functional components and layouts that you can then fine-tune with familiar design controls. Unlike many AI tools, Visual Editor is designed for enterprise teams, automatically bringing in context from your existing codebase and design system, so no matter who creates the experience, it's consistently on-brand, easy to maintain, and instantly ready for production.Everyone on your team—from designers and developers to product managers and marketers—contributes directly to the building process without technical barriers.Make Figma designs functional without developer handoffRemember those painful design-to-development handoffs that used to take days? We've made them a thing of the past. Visual Editor integrates so seamlessly with Figma that you can copy and paste designs directly into your project without developer involvement. In seconds, you can:Bring Figma designs directly into our platformTransform those static mockups into interactive applicationsKeep everything in perfect sync as designs evolveThis means designers can keep working in Figma while their creations automatically become functional code that developers can immediately use.Import any website UI for inspiration and iterationWhy start from scratch when you've found a website with elements you love? Our new web import feature makes it incredibly easy to:Grab UI from anywhere and drop it directly into your Builder editorPick out specific components from any webpageUse these references to jumpstart your own designsYou can capture elements from anywhere on the web—even from password-protected pages or local development environments. Something generic crawlers can't handle.Generate designs and UI that actually match your brandUnlike generic AI tools, Visual Editor's on-brand generation understands your visual identity:It creates designs using your exact color palette and typography Generates UI that follows your established patterns and components Maintains brand consistency across everything it createsAnd have you seen the premium templates from 21st.dev? You can access them directly and instantly adapt them to match your brand. These professionally designed templates give you excellent starting points that Visual Editor can customize to fit your specific visual language.Seamless codebase integration with your existing tech stackFor developers, Visual Editor 3.0 introduces seamless codebase integration through our new CLI that:Analyzes your codebase to understand your tech stack (React, Vue, Angular, etc.) Maps design elements to your existing components Generates code that follows your exact coding patterns Places files in the appropriate locations within your project structureEverything you create goes right into your code, reusing your components and maintaining your established patterns.Two practical workflows in a single platformVisual Editor 3.0 offers two complementary approaches to bringing your designs to life:Develop workflow You leverage AI to design in our Figma-like editor or import from Figma/the webYou use Visual Editor AI to generate and refine interactive UIsYour team collaborates in real time with proper access controlsYou integrate with your codebase via our CLIPublish workflow When you leverage our CMS capabilities, you can:Use AI to generate on-brand content variations for personalization or A/B testing Make changes that go live instantly through our API Update sections of your site or app without full deployments or pull requests Enable marketing and content teams to update without developer involvementThink of Visual Editor as a flexible CMS layer on top of Lovable or Bolt that allows rapid iteration while maintaining deep integration with your codebase.The future of AI-powered visual developmentVisual Editor 3.0 combines the best visual editing experience, AI-powered design generation, and seamless code integration in one cohesive platform. It's built for how modern teams actually work—collaboratively, iteratively, and across disciplines.Get started with Visual Copilot 3.0 today → Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo0 Yorumlar 0 hisse senetleri 43 Views
-
WWW.BUILDER.IOThe Perfect Cursor AI setup for React and Next.jsThe AI revolution in software development is a double-edged sword. Lean too heavily on LLMs without a thorough understanding of your tech stack, and you veer into vibe-coding. But stubbornly resist all AI tooling, and you'll be left in the dust while your colleagues 10x your output.The fact is, if you aren't using an AI-powered code editor like Cursor today, then you're not moving as fast as you could, or working as smart as possible.This guide will take you from zero to hero using Cursor. Follow these steps and you'll turbocharge your efficiency and skills as you write code. We'll specifically focus on the ideal Cursor AI setup for working with React, Next.js, and Tailwind CSS, but many of these steps apply to any tech stack.Tweaking the Cursor AI settingsFollow this checklist and you'll get a near-perfect Cursor AI setup without reading any further: Settings + Rules Press the gear wheel in the top right corner to open the Cursor settings. Then enable the following: Open the Features Tab and confirm these settings: Cursor Tab Enable Cursor Tab Why? Core feature. Gives you turbocharged tab completion powers. Enable Suggestions in Comments Why? Lets Cursor Tab write comments and documentation. Enable Auto Import Why? Automatically adds required import statements. Big time saver. Chat Set default new chat mode to Agent Why? Ideal for complex tasks and code generation. Enable Auto-refresh chats Why? Keeps the chat view updated automatically as context changes. Enable Auto-scroll to bottom Why? Ensures you always see the latest AI messages in the chat window. Enable Auto-apply to files outside context in edit mode Why? Allows AI edits to affect relevant files not explicitly added via @. super useful for refactoring. Enable auto-run mode Why? Allows the AI to execute certain actions (like tool calls) without explicit confirmation. Massive efficiency gains. Inside auto-run, enable Delete file protection, MCP tools protection, Dot files protection and Outside workspace protection Why? Adds sane guardrails to prevent accidental destructive actions during auto-run operations. Enable Large context Why? Allows the AI to consider more code and information, improving understanding for complex tasks. Enable Iterate on lints Why? Enables the AI to automatically attempt fixes for linter errors in generated/edited code. Enable Web Search Tool Why? Grants the AI the ability to search the web for current information or documentation. Codebase Indexing Enable Index new folders by default Why? Ensures new code added to the project is automatically included in the AI's context. Set Git graph files relationships to default Why? Uses Git history to help the AI understand file relationships and provide more relevant context. Docs Click + Add new doc and add this link to the official React docs Why? Makes the official React documentation readily available context for the AI. Click + Add new doc and add this link to the official Next.js docs Why? Makes the official Next.js documentation readily available context for the AI. Click + Add new doc and add this link to the official Tailwind CSS docs Why? Makes the official Tailwind CSS documentation readily available context for the AI. Editor Enable Show chat/edit tooltip Why? Provides visual hints when AI chat or edit actions are available. Enable Auto select for Ctrl/Cmd + K input Why? Automatically selects the prompt text in the Cmd+K bar for easier modification. Enable Use themed diff backgrounds Why? Improves readability of AI-generated changes. Terminal Enable Terminal hint Why? Provides AI-powered suggestions directly in the terminal. Enable Show terminal hover hint Why? Displays hints when hovering over relevant terminal content. Open the Models Tab Why? If you’re not on a Cursor Pro account and you have your own access to AI models (Gemini, Claude 3.5 Sonnet, etc), add your API keys here. Note: Bringing your own models to Cursor can get expensive fast. If you are going to be a Cursor power-user, it’s often much cheaper to pay for Cursor Pro. Open the Rules Tab Click + Add new rule Why? Begins the process of creating a custom set of guidelines for the AI. Copy and paste this comprehensive rule for React, Next.js, and Tailwind CSS Why? Provides the AI with specific, detailed instructions for generating code consistent with React, Next.js, and Tailwind best practices. Notepads Close Cursor Settings. Now, press the + button in the "Notepads" section in Cursor's sidebar to add a new notepad (or use the command palette). Create a notepad and paste in these React component development standards Why? Stores React standards for easy AI reference. Create a second notepad and paste in these Next.js development standards Why? Stores Next.js standards (like App Router patterns) for easy AI reference. Create a third notepad and paste in these Tailwind CSS usage guidelines Why? Stores Tailwind CSS guidelines for easy AI reference. Add ESLint Make sure you have ESLint installed and enabled Why? ESLint identifies code quality issues; enabling Iterate on lints allows Cursor to automatically fix these, improving code quality. Use Visual Editor CLI Use Cursor + Builder.io's Visual Editor CLI to add professional UI designs Why? Go from Figma design to polished UIs without leaving Cursor. Provides the missing link between design and development. Dialing in Cursor AI's settings and featuresIf you followed the above steps, then you've got yourself a pretty solid Cursor setup already. Now let's do a deep dive.First, we'll explore how to use the code editor’s core settings and features to supercharge your workflow, then we'll complete the final steps for our perfect Cursor AI setup.If you want to jump ahead and finish your developer environment for React and Next.js, then skip down to the section on “Setting up Cursor’s test-based code generation loops”.Cursor offers tab completion, which functions like a supercharged autocomplete for your code. It generates intelligent code suggestions and is capable of performing multi-line edits and even taking your recent changes or linter squiggles into account.You can enable it in Cursor's settings under Features > Tab Completion, where you can also customize options, such as disabling it for comments. To use it, simply press Tab to accept a suggestion and move to the next edit, Esc to dismiss it, or Ctrl/⌘ → to accept it one word at a time.Cursor Chat is an AI assistant right in your sidebar, ready to discuss your code base in plain, natural language. You can ask it questions about your project, request multi-file code generation, get help understanding the entire codebase, or even get assistance with terminal commands.There isn't much setup required; you can access it using the shortcut ⌘+L (Mac) or Ctrl+L (Windows/Linux). Once open, type your prompt in natural language, select 'Agent' mode for complex coding tasks or 'Ask' for queries, and let the Cursor AI assist you with its powerful code generation functionality. The chat can provide helpful code suggestions and perform smart rewrites of selected code blocks based on the provided context.For example, when working with React, Next.js, and Tailwind CSS:Agent Mode example: You could tell the Agent in natural language: "Create a new reusable React component called PrimaryButton. It should accept children and standard button props. Style it using Tailwind classes to have a blue background, white text, padding, rounded corners, and a subtle hover effect. Generate code for this component."Ask Mode example: You might ask using natural language: "Explain how data fetching works within the Server Component in app/posts/[id]/page.tsx to retrieve data for a specific blog post. Also, what's the best way to apply conditional Tailwind classes to the post's title based on its published status? Examine the relevant code."Cursor Rules lets you give persistent instructions to the AI, such as setting coding standards or project-specific guidelines, so you don't have to repeat yourself. Think of them as sticky notes for the AI that apply automatically based on context or when you manually invoke them, enhancing codebase understanding.You can create project-specific rules by adding .mdc files in a .cursor/rules folder within your project or setting global rules in Cursor's settings. To use a rule, you can configure it to apply automatically (e.g., always or when certain files are involved) or invoke it explicitly using @ruleName when you generate code.We already linked to an example rule for React, Next.js, and Tailwind CSS. If you are looking for more, check out cursor.directory, where community members submit their best Cursor rules. It’s a great resource.The @docs feature in Cursor allows you to enhance the AI's capability by providing external documentation for the libraries or frameworks you use. Cursor downloads and indexes these documents so that the AI can reference them directly when answering your questions or writing code.Setting it up is straightforward: navigate to Settings > Features > Docs and add the URLs for the documentation you wish to include. Then, when you're chatting with the AI, just mention @docs in your prompt to instruct it to consult that specific documentation for better, more context-aware answers regarding relevant code.Here are some examples relevant to the React, Next.js, and Tailwind documentation that we added earlier:React hook query: "Using @docs, explain the differences between useMemo and useCallback in React and provide an example use case for each within our component library."Next.js API route: "Consult the @docs for Next.js and show me how to create a dynamic API route that accepts a slug parameter and fetches corresponding data."Tailwind layout: "How can I create a responsive three-column grid layout using Tailwind? Please reference the @docs for the best practices."Cursor's @web feature allows the AI to search the internet directly from the chat, bringing real-time information into your development workflow. This is incredibly handy when you need the absolute latest information, like finding a new library version or checking recent API changes that might not be indexed in documentation yet.To enable it, go to Settings > Features > Chat and ensure the Web Search Tool is toggled on. To use it, type @web followed by your query in the chat, prompting the AI to perform a web search to answer your question.Here are some examples relevant to a React/Next.js/Tailwind stack:Latest Version Check: "Use @web to find the latest stable version of the framer-motion library and check its compatibility with React 18." New Feature Research: "Are there any new experimental features in the latest Next.js canary release related to server components? Search using @web." Tailwind Plugin Discovery: "I need a Tailwind plugin for creating complex gradients. Search with @web to find popular options and their usage."Cursor offers Notepads (currently in Beta), which are shareable, global documents within the editor where you can store project context, guidelines, or code snippets. They go beyond simple rules by allowing you to attach files and combine different pieces of information, creating reusable resources for your team or personal workflow.You can create a new notepad by clicking the + button in the Notepads section of the sidebar and giving it a name. To use its contents in chat or other AI interactions, simply reference it using the @ symbol followed by the notepad's name (e.g., @my-react-patterns).We’ve already linked to three notepads for React components, Next.js’s App Router pattern, and Tailwind CSS.Sometimes the code generated by Cursor introduces small errors. Cursor's automatic linting resolution helps keep your code clean by having the AI try to fix any lint errors it might introduce after making changes or generating new code. It works by automatically checking the output of your installed linter (like ESLint) right after the AI agent modifies your code.To set it up, ensure you have a linter like ESLint configured for your project, then enable the Iterate on Lints option in the Chat settings (Settings > Features > Chat). When you use Agent mode, Cursor AI will automatically attempt to resolve any new lint warnings or errors that appear after its initial code generation or modification of the new code. It can clean up your existing code across multiple lines and files as well.Here are some examples relevant to a React/Next.js/Tailwind stack:React hook rules: If the Agent generates code that violates the rules of hooks (e.g., calling useState inside a condition), ESLint will flag it, and Cursor will attempt to refactor the component to use the hook correctly at the top level. Unused imports/variables: The Agent may add an import for a utility function, but then not use it in the final code. The linter flags the unused import, and Cursor automatically removes the unnecessary line. TypeScript type errors: If the Agent generates TypeScript code that causes a type mismatch detected by the TypeScript ESLint plugin, Cursor will attempt to adjust the types or the code logic to resolve the error.You can leverage Cursor's iterative capabilities to follow a Test-Driven Development (TDD) workflow, where you write tests before the actual code implementation. Start by instructing the AI agent to generate test cases for the specific function or component you intend to build, ensuring that you outline the expected inputs and outputs clearly.Once the tests are written (and failing, as expected in TDD), prompt the agent to write the implementation code specifically designed to pass those tests and to iterate until all the tests pass. If the initial code doesn't pass all the tests, the agent’s smart rewrites will refine the code until all tests transition from red (failing) to green (passing).Here are some examples relevant to a React + Next.js + Tailwind stack (hot tip: you could also save a general TDD pattern as a notepad):Utility Function TDD: "Write Jest tests for a utility function formatCurrency(value: number) that takes a number and returns a formatted currency string (e.g., $1,234.56). Cover cases for positive numbers, zero, and negative numbers." Then, after reviewing the tests: "Now, write the formatCurrency function to make these tests pass. Iterate until all tests are green."React Component Interaction Test: "Using React Testing Library, write tests for a component. It should display an initial count of 0, increment when an 'Increment' button is clicked, and decrement when a 'Decrement' button is clicked." Followed by: "Generate the component implementation, including basic Tailwind styling for the buttons, to satisfy these tests. Iterate until all tests are green."API Route Logic Test: "Write tests for a Next.js API route /api/validateEmail that accepts a POST request with an email field. The tests should check if it returns a 200 status for valid emails and a 400 status for invalid emails according to a basic regex pattern." Then: "Implement the /api/validateEmail API route handler to pass the tests you just wrote. Iterate until all tests are green."The Model Context Protocol (MCP) acts like a plugin system for Cursor, allowing you to connect external tools and data sources directly to the AI agent. This deep integration enhances Cursor AI's capabilities, enabling it to interact with databases, APIs, or other services without the need to supply information manually.You configure MCP servers by creating a mcp.json file either globally in ~/.cursor/ or per-project in .cursor/, specifying how Cursor should connect to your tools (such as a command to run or an SSE endpoint). Once set up, the Agent can automatically detect and use relevant MCP tools, or you can prompt it directly to take advantage of these integrations for specific tasks.Here are some examples relevant to a React/Next.js/Tailwind stack:Database Schema Integration: Configure an MCP server that connects to your project's database. You could then ask the Agent: "Using the database MCP tool, fetch the schema for the users table and generate a Next.js API route (/api/users/[id]) to retrieve a user by ID, including appropriate TypeScript types based on the schema." Headless CMS Connection: Set up an MCP tool for your headless CMS (like Contentful or Sanity). You could then prompt: "Use the CMS MCP tool to fetch the content model for blogPost and generate the getStaticProps function in pages/blog/[slug].js to fetch and pass the necessary post data."Visit cursor.directory for a large list of community-created Cursor + MCP integrations.Use Builder.io’s Visual Editor to create professional UIsBuilder.io’s Visual Editor plugin now features a robust CLI workflow. This allows you to export Figma designs directly into your project through your preferred code editor. A single command automates the entire process —downloading your design, converting it into code, and integrating it into your codebase.If you prefer terminal work, and particularly if you want to master AI-powered code editors like Cursor, transforming Figma designs into code can easily integrate into this development workflow.By diligently configuring Cursor AI's settings and leveraging its powerful features like Agent mode, Rules, @docs, @web, and Notepads, you've established a highly optimized AI-powered code editor tailored for React and Next.js development. This setup is designed to significantly boost your software development speed, streamline complex tasks, enhance coding efficiency, and help maintain high-quality standards for new code.Remember that mastering AI assistance is an ongoing process. Refine your prompts continually, commit your code changes often, try new AI models, use the right context, and adapt these techniques to your specific projects. Embrace the power of AI as a collaborative partner, and you'll unlock new levels of productivity and coding proficiency.Further Reading on AI code editors Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo0 Yorumlar 0 hisse senetleri 57 Views
-
WWW.BUILDER.IOFine-tune an LLM: Why, when, and howChaining endless prompts to an AI model only goes so far.Eventually, the Large Language Model (LLM) drifts off‑script, and your token budget gets torched. If each tweak feels like stacking one more block on a wobbly tower, you're not alone—and you're not stuck.Fine‑tuning lets you teach any LLM your rules, tone, and tool‑calling smarts directly, so you and your users can spend less time wrangling words.In this guide, we'll see why prompt‑engineering hits its limits, when to level up to fine‑tuning, and a step‑by‑step path to doing it without burning daylight or dollars.But before we dig into all that, let's first slot fine-tuning into the broader AI model lifecycle.Model lifecycle: From pre-training to productionAs a whole, you can think of the AI model lifecycle like crafting the perfect coffee order.Pre-training is like the barista learning all the possible combinations of ingredients. Fine-tuning is when you teach that barista your specific preferences—like asking for a half-sweet oat milk latte with a dash of cinnamon—so it always nails your order without a long explanation. Prompting is the quick, daily reminder—like saying 'the usual' to your barista. Deployment is when your perfectly tuned order is available on the menu, ready to go whenever you walk in.But enough with coffee metaphors. Let's dig into actual details. Pre‑training (the giant brain dump)Large language models (LLMs) start life trained on massive, diverse text corpora—everything from Wikipedia articles to social media threads. This foundation gives them world knowledge and language patterns, but it's very "one‑size‑fits‑all."When you ask for ultra‑specific behavior (say, always output valid JSON or follow our company's naming conventions), pre‑training alone often falls short.Fine‑tuning (your secret sauce)Fine‑tuning, also known as post-training, is the phase where you take that generic model and teach it your rules, voice, and quirks. You supply examples—prompt/response pairs that reflect exactly how you want the AI to behave.Suddenly, your model isn't just a wandering generalist; it's a specialist trained on your playbook, ready to handle your API's function‑calling pattern or spit out markdown‑formatted release notes on demand.This is also how a company like OpenAI gets generic GPT to become the model you converse with in ChatGPT. It has mannerisms, instruction following, tool calling, and more that’s put into it at the fine-tuning stage.Prompting (day‑to‑day interaction)Even after fine‑tuning, prompting remains crucial. But the game changes: instead of wrestling with giant "system" instructions to dictate core behavior, you focus on two leaner types of prompts:The user/task prompt: This is the specific input or question from your user or application logic at runtime (e.g., "Summarize this meeting transcript"). The context snippet (optional): You might still inject small, dynamic pieces of context alongside the user prompt—perhaps a user ID, a relevant document chunk retrieved via retrieval-augmented generation (RAG), or a specific output constraint for this particular request.Your runtime prompts become more focused and efficient because the heavy lifting—the core tone, the default format, and the common edge‑case handling—is already baked into the model weights from fine-tuning.Deployment (Shipping to users)Finally, you package your fine‑tuned model behind an API endpoint or inference server—just like any other microservice.From here, you monitor cost, scale to meet traffic, and iterate on your dataset over time. Because the model now reliably produces the format you need (JSON objects, code snippets, polite customer responses), your frontend code can stay simple, and your error logs stay clean.Benefits of fine-tuningAlthough fine-tuning simplifies prompting and deployment, it represents a bigger commitment than just tweaking prompts or using techniques like RAG. It's crucial to fine-tune only when the advantages truly outweigh the effort.So, what specific benefits make taking the fine-tuning plunge worth it?You can save your token budgetImagine swapping a 5,000‑token system prompt for a model that already "gets" your style. Instead of rehashing instructions every call, your fine‑tuned model returns spot‑on results with half the context.That means faster responses, lower costs, and fewer "Oops, I lost the schema again" moments. You can guarantee tone and output formatWant your AI to always reply in recipe blog anecdote style? Or spit out valid JSON without exceptions?When you fine‑tune, you teach the model those rules once and for all. No more endless prompt tweaks—your model simply "knows" the drill.You can bake in edge-case fixesWhile LLMs can often generalize well to unexpected inputs—better than rigid if/else logic—they also can behave very strangely when presented with user inputs you just never thought to document. Rather than patching each new edge case by expanding your already lengthy prompt, include a handful of these real‑world problematic examples in your fine‑tuning training set. By learning the patterns in these examples, the fine-tuned model doesn't just memorize fixes; it generalizes.It gets better at handling similar, related quirks gracefully—so your app stays robust, and you spend less time firefighting weird model outputs.You can teach your model to ~~fish~~ call your toolsFunction‑calling can transform a chatbot into an action‑taking agent. Fine‑tuning lets you bake your API signatures directly into the model's behavior.Instead of you injecting a function schema with every request, your model will know when and how to hit each endpoint, turning chat into real interactions. (By the way, this is also how the Model Context Protocol (MCP) works with LLMs for tool-calling. Major providers fine-tune their foundation models with the ability to follow MCP standards, and then we as developers benefit from not having to teach as much boilerplate to models when we want them to use our tools.)You can truly embrace the microservice mindsetThe AI world is shifting from monolithic "one‑model‑to‑rule‑them‑all" to fleets of specialized models.Fine‑tuning empowers you to spin up tiny, purpose‑built microservices: one model for each subject area. Each model can run on smaller infrastructure, scale independently, and get the job done faster—and cheaper—than any giant, catch‑all model.This is also true of training models from scratch, which we've done at Builder to handle design-to-code transformations 1000x more efficiently than leading LLMs. But that’s a bit more overhead than fine-tuning, and beyond the scope of this article.When to fine‑tuneFine‑tuning is powerful, but it's much faster to iterate with models at the prompt level. So, it shouldn't be the first tool you reach for. Before you spin up GPUs or sign up for an expensive API plan, watch out for these signals that it's actually time to level up.Red flags you've hit a ceilingSystem prompts spiraling in length: If your "always-do-this" instructions have ballooned into a novella, your prompts are compensating for missing model behaviors. Token budget on fire: When you're shelling out hundreds or thousands of extra tokens just to coax the right output, costs and latency start to bite. Diminishing returns on tweaks: Tiny changes to your prompt no longer yield meaningful improvements, and you're stuck in an endless "prompt permagrind." Unpredictable edge‑case handling: You keep discovering new user inputs that the model trips over, leading to a growing backlog of prompt hacks.Quick prompt‑level hacks to try firstEven if the above are true, try some of these prompt engineering hacks first:Few‑shot examples: Show 2–3 high‑quality input/output pairs inline. Prompt chaining: Break complex tasks into smaller, sequential prompts. ("Write my chapter" → "Write the first scene," "write the second scene," etc.) Function‑calling hooks: Use built‑in tools or APIs so the model can offload logic instead of fabricating it.If these still leave you juggling prompts, get your helmet on, because it's time to pilot a fine‑tune.A quick note on RAG vs. fine‑tuningRetrieval-augmented generation (RAG), which uses embeddings to "augment" user prompts in real-time with relevant information from a vector database, often gets conflated with fine-tuning.Use RAG when you need up‑to‑the‑minute facts or your data changes frequently (e.g., product docs, news feeds). Fine‑tune when you need consistent tone, strict output formats, or baked‑in behavior that you can't reliably prompt every time.Fine-tuning 101: How it works in theoryBefore jumping into adapters and CLI flags, it helps to unpack what "fine‑tuning" really means.1. Pre-trained weights: The model's starting brainThink of a pre-trained LLM like a massive network of interconnected nodes, kind of like a super-complex flowchart. The connections between these nodes have associated numerical values called weights or parameters. Today's models have billions of weights.During pre-training (that "giant brain dump" phase), the model learns initial values for all these weights by processing vast amounts of text. These weights essentially encode all the general knowledge, grammar rules, and common sense the model learned. They represent the patterns the model identified in the pre-training data. So, you start with a model that's knowledgeable but generic. Our Basic Brad Model's weights make it good at general tasks, but they aren't specifically configured for your unique requirements, like adopting a specific brand voice or generating code for your internal libraries.2. Gradient descent on your examplesFine‑tuning is running additional training steps on that base model, using your own curated prompt‑response pairs.These pairs act as specific lessons for the model. Often, they're formatted as JSON objects, like this:// Fine-tuning for recipe blog style { "prompt": "Explain the CSS box model.", "response": "Ah, the CSS box model! It reminds me of my grandmother's treasured cedar chest. You see, just like her chest had the contents, padding around the contents, the sturdy wooden border, and the space it occupied in the attic (the margin), every HTML element has its content, padding, border, and margin. It's simply divine!" } // Fine-tuning to talk like a pirate { "prompt": "User inquiry: Status of ticket #SUPPORT-123?", "response": "Arrr, matey! Cap'n says ticket #SUPPORT-123 be battlin' the kraken in the depths o' the backlog. We be givin' it a broadside o' attention soon! Hang tight, ye scurvy dog!" }Each example shows the model the "correct" output for a given input, based on your needs. If the model's prediction (based on its current weights) differs from your desired output, a process called backpropagation calculates how much to nudge the model's parameters in a direction that reduces that error for that specific example.Repeating this over many such examples gradually adjusts the weights to better reflect your specific patterns.3. Full fine-tuning vs. adaptersThere are two big ways to teach an LLM new tricks:Full fine-tuning: This is the "oh my god we have bedbugs" method. Every single weight in the model gets updated—billions of dials turn—so you can deeply customize the model. The catch? You'll need serious hardware (think racks of GPUs), lots of time, a mountain of storage, and sometimes even special licensing. Unless you're running an AI lab or building the Next Big Model, this is probably overkill. Parameter-efficient tuning (adapters): Instead of changing the whole model, you freeze its main weights and train a tiny set of new parameters—special adapter layers—that slot in and nudge the model where you want. Techniques like LoRA or prefix-tuning mean your adapter might be only a few megabytes, not tens of gigabytes.Bottom line: For most web and app devs, adapters give you 90% of the usefulness of full fine-tuning at a fraction of the cost, time, and stress. You get a custom model that fits your use case without needing to issue stock options to your GPU provider.4. Serving your new skills: Deployment in the real worldOnce training is done, it's time to put your new "specialist" model to work. There are basically two ways to serve up your smarts:Wrap-and-go: Most modern frameworks let you "snap" your adapter on top of the base model at runtime—think of it like plugging in a brain upgrade cartridge. Your app sends prompts to the base model, the adapter layers quietly do their magic, and voilà: tailored output on demand. Merge to a single checkpoint: If you want a single file (maybe to simplify hosting or handoff), you can merge the adapter's tweaks directly into the base model's weights. Now anyone with the file can deploy your fine-tuned genius, no assembly required.The end resultYour fine-tuned model now "understands" your niche. It follows your examples and rules—almost like it's read your team's style guide or pored over your API docs. All those gradient tweaks and adapter notes are now baked in, so your model serves custom responses at scale with minimal fuss or fiddling.The upshot? You get a specialist model that feels like it's part of your team—not some clueless chatbot needing endless reminders every time you hit send.Fine-tuning best practicesAll the above might sound a bit like magic, but to be honest, that's because we don't fully understand LLMs yet. The best we can do is teach them like we learn: by example after example until they generalize the knowledge.Luckily, we can study and implement "model pedagogy" well. Here's how best to teach your model some new skills.The three pillarsFine-tuning boils down to three foundational pillars—and a mindset that puts data quality front and center. Nail these, and you'll set yourself up for a smooth, repeatable fine‑tuning process.A battle‑tested system prompt. Craft a concise "instruction" that anchors the model's behavior. This is your north star—think of it as the mini spec the model refers to on every run. A curated dataset. Hand‑pick examples that showcase the exact input/output patterns you want. Quality over quantity: dozens of crisp, on‑point samples beat hundreds of meh ones. Clear evaluation metrics. Define how you'll judge success before you start. Token usage? Output validity (JSON, Markdown)? Human ratings? Having objective checkpoints keeps your fine‑tune from veering off track. Adopt a data‑centric mindsetTreat your training set like production code: review it, test it, version it.Audit for bias or noise: Scrub out examples that contradict your style or introduce unwanted behavior. Balance edge cases: If 10% of your users trigger a weird bug, include those examples—but don't let them dominate your dataset. Iterate, don't hoard: It's tempting to mash together every example you have. Instead, start small (20–50 best examples), spot failure modes, then add just the data needed to fix them.Tune your hyperparametersEven if you're using adapters and not retraining the whole model, you'll still need to set a few "knobs and dials" that control how your fine-tuning job learns.Don't let the jargon scare you—here's what matters:Learning rate is how big each step is when the model updates its weights. If it's too high, the model might "forget" everything it learned from pre-training or bounce around wildly. Too low, and it might barely budge from the starting point and miss your custom behaviors. Most tools have decent defaults, but if your model seems to overfit (memorize your small dataset), try lowering it. Batch size is how many prompt-response pairs your model learns from at once. Bigger batches make training more stable but use more memory. Sequence length is the maximum length of your input/output—that's usually limited by the model's context window. Trim or chunk long examples as needed so you don't run out of memory or context. Number of epochs is how many times the model sees your entire dataset. Usually, 3–5 passes is enough. Too many, and the model just memorizes your examples instead of learning the general pattern.You usually don't need to obsess over these details for your first run—just use the given platform's suggested defaults, then tweak if you see problems. Most modern frameworks and cloud platforms can even tune these settings automatically if you want.Sanity‑check your modelBefore you call it "done," put your fine-tuned model through a few real-world checkups. Don't worry—it's less "PhD thesis defense" and more "smoke test," but these steps will save you headaches down the line:Script a mini test suite: Run your 10–20 most common or important prompts through the model and make sure you're getting the answers (and format, and tone) you actually want. This is like unit testing but for your AI. Keep an eye on the training curve: Your training curve is a chart showing "loss," or how far off your model's answers are from your ideal ones, at each step of training. If your loss just drops smoothly, that's great. If it suddenly spikes, flatlines, or ping-pongs all over the place, something's probably off—maybe a weird example in your data or a hyperparameter gone rogue. Let humans try it: Ask teammates—or, even better, real users—to poke around and see if the model does anything unexpected or delightful. Humans spot edge cases robots miss. Humans are cool, too.Treat this like a pre-flight checklist. A few minutes here can save you hours of debugging once your "custom genius" hits production.Ready to try fine-tuning?Here's a few solid options to spin up your first fine-tune—whether you want no-code simplicity or full SDK superpowers.For beginners:OpenAI's beginner-friendly managed platform lets you upload JSONL datasets and kick off fine-tuning jobs with a single CLI command or through their web UI. Despite being limited to OpenAI models and pricing, they're a great option to start experimenting with if you've never fine-tuned before. Hugging Face offers a true no‑code web interface: just upload your CSV/JSONL, pick a base model, and hit "Train." Although you're restricted to fine-tuning open-source models, Hugging Face is just about the best way to get started doing just that. Cohere's docs and dashboard are clear and developer-friendly, so you'll get results fast whether you're working through a GUI or full-on scripting. Use Cohere for getting fine-tuning workflows fully automated at your company. It's super streamlined, but not yet as flexible as Hugging Face.For enterprise:Google Vertex AI: Fine-tune Google's models (e.g., Gemini) in the GCP console or via SDK. Full and adapter-based tuning, with tight integration to BigQuery and Cloud Storage. Great if you're already on GCP; bring your own dataset. AWS Bedrock: Fine-tune leading foundation models using the AWS console or API. Upload your data to S3, configure, and launch—a fully managed, secure option for those who live in AWS.AWS and GCP learning curves are a right angle, so try to get paid to be on these platforms. They’re great for having all the features and saving on dollars at the small cost of your sanity.Fine-tuning lets you turn a generic LLM into your own, highly-opinionated teammate.Start small, keep your data sharp, test your work, and build on what you learn.The hard part isn't the code—it's knowing what you want your model to do, and showing it the right examples.Tooling is more accessible than ever, so go ahead, teach your model a trick or two and see what it can do for you (and your users).Happy fine-tuning! Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo0 Yorumlar 0 hisse senetleri 58 Views
-
0 Yorumlar 0 hisse senetleri 56 Views
-
Daha Hikayeler