AI Coding with 4D and VS Code: A Practical Guide

If you recently watched our webinar on AI coding with 4D 21, you saw how we built a complete travel agency application (database structure, data, forms, and an AI-powered feature) built almost entirely through natural language prompts. In this post, we’ll walk you through the setup and show you how to bring that same workflow to your own projects.

What You Need

• 4D 21 (or later)
• Visual Studio Code with GitHub Copilot enabled (see setup below)
• The 4D Analyzer extension (see below)
• A set of instruction files tailored to 4D development (see below)

GitHub Copilot Setup

Before anything else: GitHub Copilot runs through your GitHub account, not through OpenAI, Anthropic, or any other AI provider directly. You do not need to purchase credits from Claude or any other service. Everything is managed through GitHub.

1. Create a GitHub account if you don’t have one: github.com

2. Activate GitHub Copilot on your account at github.com/features/copilot. A free tier with a generous monthly allowance is included, no credit card required to start.

3. Sign in from VS Code. Open VS Code, click the Accounts icon in the bottom-left corner, and sign in with your GitHub account. Once connected, the Copilot icon appears in the status bar and Chat becomes available.

4. Select your model. In the Copilot Chat panel, a model selector lets you choose which AI model powers your responses (GPT-4o, Claude, Gemini, and others depending on your plan). The default works fine to start, you can switch later.

To check usage and manage your plan: Go to github.com/settings/copilot. You can see how many requests you’ve used, switch to a paid plan, and manage billing if you need more capacity.

The 4D Analyzer Extension

The 4D Analyzer extension is what makes VS Code truly aware of the 4D language. Install it from the VS Code Marketplace and you get:

• Syntax coloring for 4D code: methods, classes, form classes, etc.
• Code completion and signature help
• Diagnostics (errors and warnings) in real time as you type

This matters a lot when working with AI. When GitHub Copilot generates 4D code, the Analyzer immediately validates it. You see errors highlighted right in the editor, which means you can catch mistakes before you even try to run the code, and feed them back to Copilot to get a fix.

To install:

1. Open VS Code
2. Go to the Extensions panel (Cmd+Shift+X on macOS, Ctrl+Shift+X on Windows)
3. Search for “4D Analyzer”
4. Click Install

That’s it. Open any 4D project folder and the extension activates automatically.

Instruction Files: Teaching Copilot How to Write 4D Code

Out of the box, GitHub Copilot knows many programming languages, but not your coding style, your best practices, or the finer points of 4D development. That’s where instruction files come in.

Instruction files are Markdown documents placed in a .github/instructions/ folder at the root of your project. Copilot reads them automatically and uses them as context for every response. Think of them as a style guide that the AI follows.

Where to Get Them

A ready-to-use set of 4D instruction files is available on GitHub:

👉 github.com/mathieu-ferry/4D-github-instructions

How to Set Them Up

1. In your 4D project root, create a .github/instructions/ folder
2. Copy the instruction files from the repository above into that folder
3. Open Copilot Chat and ask: “What are your 4D coding standards?” and it should reply based on the content of your instruction files

If it does, you’re good to go. The instructions cover topics like:

• Preferred use of classes over procedural methods
• Form class conventions
• JSON schema references for forms
• Naming conventions and code structure

Tip: These files are a starting point. The best results come when you tailor them to your own coding habits and project conventions. Add your own rules, remove what doesn’t apply, and iterate over time.

Putting It All Together: Two Examples

Example 1: Building a Database Structure with Prompts

When you work with the Structure editor, changes are reflected in the catalog.4DCatalog file. With the instruction files from the GitHub repository, Copilot can safely edit this same file for you (the schema context is included in those instructions). You stay prompt-driven, and after restart, the structure changes are immediately visible in 4D. Here’s a realistic sequence:

You: “Create a table in the catalog listing employees with their last name and first name.”

Copilot edits your structure. Restart 4D, and you get an Employee table with a UUID primary key and the requested fields.

You: “Create a new table listing company departments.”

Another table appears.

You: “Add a relation between employees and departments, with each employee belonging to one department.”

Copilot adds a foreign key and the proper relation definition. You build out an entire relational model this way, step by step, just by talking to the AI.

The key insight: you describe intent in plain language, and the AI handles the catalog details. The instruction files keep output aligned with your expected conventions (UUID keys, proper attribute types, correct relation syntax).

Example 2: Creating a Form and Its Class

Forms are where things get really interesting. You can describe a layout in a single prompt:

You: “Create a 4D form that lists tasks. I want a list box on the left side with summary, assignee last name, department, due date, and status. On the right side, show a detail view with all that information plus the task description and department manager. Associate the form to a form class.”

Copilot generates:

• The form JSON (form.4DForm) with the list box, input fields, and layout
• The form class (.4dm) with event handling and data binding logic

The result is a working form you can open in 4D and start using. Will it be pixel-perfect on the first try? Probably not. But it gives you a solid foundation to refine through follow-up prompts or manual adjustments.

Refining the Design

The first generated form is a working foundation, not a finished product. There are several ways to drive Copilot toward a better result:

• Paste a screenshot for inspiration. Find a UI you like, paste it into Copilot Chat, and say: “Redesign the form using this as a visual reference.” Copilot will extract layout patterns, color tones, and spacing from the image.
• Give a precise design brief. Describe intent, mood, and constraints: “Redesign this form for a travel agent who needs to process emails quickly. Prioritize information density, high-contrast status indicators, and keyboard-friendly navigation.”
• Specify design tokens explicitly. If you have a design system, feed it directly: “Use 8px base spacing, neutral gray backgrounds (#F5F5F5), blue (#1A73E8) for primary actions, and semantic red/orange/green for task status.”
• Ask for consistency with existing forms. Rather than starting from scratch each time: “Make this form visually consistent with the existing Employee form: same header style, button hierarchy, and list row density.”
• Encode your style in the instruction files. The most durable approach. Define your color palette, spacing rules, and UI component conventions once in .github/instructions/, and every form Copilot generates will follow them automatically, without prompting.

Copilot Chat Modes: Ask, Plan, and Agent

Copilot Chat in VS Code has three modes, selectable from the agent picker at the bottom of the Chat panel:

• Ask: Q&A only. Answers questions about your codebase, coding concepts, or VS Code without touching any files. Useful for understanding how something works or exploring ideas.
• Plan: Produces a structured, step-by-step implementation plan using read-only codebase analysis, before writing a single line of code. It surfaces open questions about ambiguous requirements, so you can clarify intent upfront. Once you’re satisfied, a “Start Implementation” button hands the plan off directly to Agent mode for execution.
• Agent: The coding workhorse. Autonomously edits files across your project, runs terminal commands, invokes tools, and iterates to fix errors until the task is complete.

All the examples earlier in this post were run in Agent mode, which is the right default for any task that actually modifies your project.

When Plan Mode Pays Off

So far we’ve been working incrementally: one prompt, one change, review, repeat. For exploratory work or quick additions, that’s perfectly efficient. But for larger features that touch multiple components at once, Plan mode is worth the extra step.

Plan mode reads your codebase before producing anything. The output is a high-level summary broken into actionable steps, including any questions it has about your requirements. You iterate on the plan in plain conversation until it accurately reflects what you want, then hand it off to Agent.

This is especially valuable in 4D projects where a single feature can touch the catalog, one or more methods or classes, a form JSON, a form class, and resource files all at once. Catching a wrong assumption at the plan stage is far cheaper than untangling a multi-file execution that went in the wrong direction.

What This Looks Like in Practice

Instead of this incremental sequence:

• “Add an email table”
• “Create a form for emails”
• “Add a button to process emails”
• “Write the AI processing method”
• “Add sample data”

You can write a single, well-structured prompt describing the full feature, run it through Plan to validate the approach, then let Agent execute it in one coordinated pass. This is exactly what we did in the webinar when building the email-to-task AI feature: one large prompt, covering the table, form, button, processing logic, API key config, and sample data, all at once.

Tips for an Efficient AI Workflow

1. Match your approach to the task size. Step-by-step prompting works well when you’re exploring or when the scope is unclear, making it easy to review and course-correct. For well-defined features, a single larger prompt with Plan mode is more efficient. The VS Code docs recommend breaking down complex tasks, but also note that including expected outputs (what files, what behavior) helps the agent verify its own work.
2. Name what you expect, not how to do it. For larger prompts, listing the files, tables, or forms you expect to be created helps reduce guesswork. Avoid over-specifying implementation details: that’s the agent’s job. The goal is to set clear boundaries, not to write a spec.
3. Keep standing rules in instruction files, one-off context in the prompt. Conventions, naming rules, and architectural preferences belong in .github/instructions/, not repeated in every prompt. Per the VS Code docs, instruction files load on every interaction, so keep them focused on what the AI cannot infer from your code alone.
4. Feed errors back, with context for non-obvious ones. Pasting a runtime error directly into Copilot is often enough for isolated mistakes. For logic or architecture issues, also point it to the relevant file or explain the expected behavior; the error message alone won’t give enough signal.
5. Use screenshots for visual diagnosis. Attaching a screenshot is faster than describing a layout problem in words, and the VS Code docs list it as a recommended context technique. Note: image support may need to be enabled depending on your Copilot plan and organization settings.
6. Review AI output: the bar scales with the stakes. For prototypes, a quick read is fine. For production, treat it like any contributed code: check logic, edge cases, input validation, and anything touching external services or credentials.
7. Keep instruction files lean and current. More targeted instructions produce better output, but instruction files are loaded on every request. The VS Code docs advise focusing on things the AI can’t infer from code: non-default conventions, architectural decisions, environment specifics. A bloated catch-all file starts to dilute the signal.

Going Further: Custom Agents and Skills

Everything we’ve covered so far uses the built-in agents with shared instruction files. But VS Code now lets you go further by defining your own custom agents and skills, stored in your project under .github/agents/.

A custom agent is a Markdown file (.agent.md) that gives the AI a specific persona, restricts which tools it can use, and optionally pins it to a particular model. For example, you could create a dedicated 4D-reviewer agent that focuses exclusively on code quality, security exposure, and naming conventions for 4D projects, using read-only tools so it never modifies anything unless you explicitly ask. Or a 4D-scaffolder agent pre-loaded with your form and class templates, ready to spin up new screens on demand.

Skills (.skill.md files) are a step further: reusable, portable capabilities that can include scripts and access external resources. Where an instruction file carries passive rules, a skill carries active logic the agent can invoke. A practical 4D example: a skill that knows how to query the 4D documentation site and pull back relevant code samples directly into the chat.

The VS Code docs also describe handoffs: chained workflows where one agent passes context to the next at the click of a button. A planning agent generates a feature spec, then hands it off to an implementation agent, which hands off to a review agent. Each step is human-approved before it runs.

You can generate all of these with AI directly in the chat: type /create-agent or /create-skill and describe what you want. They can be stored at the workspace level (shared with the team via source control) or in your user profile (personal, available across all projects).

Beyond Code Generation: Other Useful AI Workflows

Building features is only one of the things an AI agent does well in a development workflow. Here are other situations where Copilot can carry significant load:

• Documentation. Ask the agent to write or update technical documentation from source code, generate docstrings for methods and classes, or translate existing documentation into another language. For 4D specifically, this can mean generating user-facing help content from form class logic, or producing a structured API reference from a set of methods.
• Security review. Ask the agent to analyze a method, a form class, or an entire feature for common vulnerabilities: unvalidated inputs, missing access control, SQL or injection exposure, hardcoded credentials. A dedicated read-only security agent (see above) is a natural fit here. This won’t replace a proper security audit, but it’s a fast first pass.
• Refactoring. AI agents handle mechanical refactoring tasks well: renaming symbols consistently, extracting repeated logic into shared methods or classes, converting procedural code to ORDA patterns, or modernizing legacy 4D code to current best practices.
• Code explanation and onboarding. Use Ask mode to understand unfamiliar code, trace what a method does, or get a plain-language summary of a complex piece of logic. This is especially useful when picking up an existing project or onboarding new team members.
• Test generation. Ask the agent to write unit tests for a given method or class, including edge cases and error conditions. Copilot can also run the tests after generating them and iterate if they fail.
• Commit messages and PR descriptions. VS Code includes built-in smart actions for generating commit messages from staged changes and pull request summaries. Small time savings that add up.

What’s Next?

The workflow described in this post is available to you today. Build your first table and form through prompts, use Plan mode to tackle a full feature, refactor legacy code, generate documentation, run a security review, create a custom agent for your team. The only thing left is to try it.

Here’s everything you need to get started:

1. Download 4D 21
2. Install VS Code with GitHub Copilot enabled
3. Add the 4D Analyzer extension
4. Copy the instruction files into your project

Open Agent mode, describe what you want to build, and see how far you get.

We’d love to hear about your experience. Share your results, workflows, and questions on the 4D Forum, the community is waiting!