ClarityAI - Make Your Prompts Actually Work

Hey there! Ever typed something like "make a website" into Copilot and gotten back... well, not exactly what you had in mind? Yeah, we've all been there.

ClarityAI is your prompt translator. It takes whatever you throw at it and turns it into the kind of detailed, professional prompt that actually gets you the results you want. Think of it as having a senior developer sitting next to you, helping you ask better questions.

What Does It Actually Do?

AI-Powered Prompt Enhancement You type in simple requests, and ClarityAI transforms them into detailed specifications. It's using advanced AI engines to understand what you're really asking for and fill in all the blanks.

Automatic Grammar and Spelling Fixes Typos happen. ClarityAI catches them before they confuse your AI assistant. No more "fiunction" or "databse" causing weird responses.

Smart Context Awareness ClarityAI looks at your project and automatically includes relevant details. Working in a Next.js project? It knows. Using TypeScript? It includes that. It reads your package.json and current file to understand what you're building.

Ready-Made Prompt Templates We've built over 12 templates for common tasks. Need a REST API? There's a template. Building a React component? Got you covered. Just use them as starting points and customize from there.

Visual Before and After Comparison See exactly what changed. ClarityAI shows you a side-by-side comparison of your original prompt and the enhanced version, so you understand what improvements were made.

Seamless Copilot Integration Enhanced your prompt? Click one button and it goes straight to Copilot. No copy-pasting, no switching windows. Just smooth workflow.

Context-Aware Suggestions After enhancing your prompt, ClarityAI suggests relevant follow-ups based on what you asked. It's like having a conversation with someone who actually remembers what you just talked about.

How to Use It

The Basics

It's pretty simple. Open the VS Code Chat Panel (hit Ctrl+Shift+I on Windows or Cmd+Shift+I on Mac), then type @clarity followed by whatever you want to build or do:

@clarity make a website
@clarity fix my authentication bug
@clarity explain how React hooks work

ClarityAI will enhance your prompt and give you a couple of buttons - one to send it directly to Copilot, and another to copy it if you want to tweak it first.

Using Templates

If you're not sure where to start, we have templates. Type this to see them all:

@clarity templates

Then use one like this:

@clarity template:rest-api
@clarity t:react-component
@clarity template:unit-tests

Some templates let you add parameters to make them more specific:

@clarity template:rest-api resource=users method=POST
@clarity template:form-component formPurpose="user registration" fields="name,email,password"

What Templates Are Available:

API Development - REST endpoints, GraphQL resolvers, API documentation

UI Components - React components, forms with validation, navigation menus

Testing - Unit tests, integration tests, test utilities

Database - Schema design, migrations, queries

Architecture - Clean architecture modules, design patterns

Debugging - Error analysis, bug fixes, performance optimization

General - Code refactoring, documentation, code reviews

The Context Magic

Here's where it gets cool. ClarityAI automatically reads your project and includes relevant information without you having to type it all out.

It detects things like:

What file you're currently editing
Whether you're using TypeScript or JavaScript
Your framework (Next.js, React, Vue, Express, NestJS, you name it)
Important dependencies (Tailwind, Prisma, tRPC, etc.)
Your test framework (Jest, Vitest, etc.)
Your build tool (Vite, Webpack, etc.)

So when you type something simple like:

@clarity create a user dashboard

ClarityAI sees you're in a Next.js project with TypeScript and Tailwind, and it enhances your prompt with all that context. The AI then knows exactly what kind of dashboard to build and what tech to use.

Understanding the Diff View

After enhancement, you'll see some metrics showing what changed - how many words were added, what structure improvements were made, and what specific details were included. There's also a before-and-after comparison so you can see exactly what ClarityAI did.

This isn't just for curiosity - it helps you learn what makes a good prompt. Over time, you'll get better at writing prompts yourself.

Getting Started

Step 1: Install the Extension

You can install it from the VSIX file:

code --install-extension clarityai-1.0.6.vsix

Or just search for "ClarityAI" in the VS Code Marketplace (once published).

Step 2: Choose Your API Mode

ClarityAI gives you two options for API access:

Option 1: Use ClarityAI's Built-in API (Recommended)

This is the easiest option - no setup required. Just install the extension and start using it. ClarityAI uses its own API key, so you don't need to configure anything.

Open VS Code Settings (Ctrl+, or Cmd+,)
Search for "clarity"
Make sure clarity.apiMode is set to "clarityai" (this is the default)

That's it! You're ready to go.

Option 2: Bring Your Own API Key

Want to use your own API provider? ClarityAI works with any OpenAI-compatible API.

Get an API key from your chosen provider.
Open VS Code Settings (Ctrl+, or Cmd+,)
Search for "clarity" and configure:
- Set clarity.apiMode to "custom"
- Paste your API key in clarity.apiKey
- Set clarity.apiBaseUrl
- Set clarity.apiModel to your preferred model

API Base URL Examples:

https://api.openai.com/v1
https://api.groq.com/openai/v1
https://your-api-endpoint.com/v1

Model Examples:

your-preferred-model-id
another-model-id

Step 3: Start Using It

That's it. Open the chat panel (Ctrl+Shift+I), type @clarity and your prompt, and watch it work.

Settings You Can Tweak

clarity.apiMode (default: "clarityai") Choose how you want to access the API:

"clarityai" - Use ClarityAI's built-in API key (no setup needed)
"custom" - Use your own API key from any OpenAI-compatible provider

clarity.apiKey (default: empty) Your API key from any provider. Only required if you set apiMode to "custom".

clarity.apiBaseUrl (default: "https://api.clarityai.com/v1") The base URL for your API provider. Only used in custom mode.

clarity.apiModel (default: "optimized-model") The model name to use. Only used in custom mode.

clarity.autoInjectContext (default: true) When enabled, ClarityAI automatically reads your project and includes relevant context in your prompts. Turn this off if you want full control and prefer to specify everything manually.

clarity.showDiffView (default: true) Shows you the before-and-after comparison of your prompt. Turn this off if you just want the enhanced prompt without the details.

A quick note on privacy: ClarityAI only sends your prompts to the API for enhancement. Your actual code stays on your machine. We're not reading or storing your codebase.

Real Examples

What It Actually Does to Your Prompts

Simple Website Request

You type: "make a website"
ClarityAI enhances it to: "Create a modern, responsive website with HTML5 semantic structure, CSS Grid/Flexbox layout, mobile-first design, accessibility features (ARIA labels, semantic HTML), clean navigation menu, hero section, content areas, footer, and SEO optimization"

Bug Fix Request

You type: "fix bug"
ClarityAI enhances it to: "Act as a senior software engineer and help me debug this authentication bug. Please analyze error logs, check token validation logic, verify API endpoint configurations, examine middleware, and implement proper error handling with clear error messages"

Learning Request

You type: "explain hooks"
ClarityAI enhances it to: "As a React expert, provide a comprehensive explanation of React Hooks covering: useState for state management, useEffect for side effects, useContext for context API, custom hooks creation, rules of hooks, common pitfalls, and practical examples with best practices for functional components"

How Your Workflow Changes

Without ClarityAI: You spend time thinking about how to phrase your request properly, typing out all the details, and still getting responses that miss important parts.

With ClarityAI: Type whatever comes to mind, click a button, and get detailed results. The AI handles the translation from "what you meant" to "what the AI needs to hear."

Typical Flow:

You type: @clarity optimize performance
ClarityAI shows enhanced version with action buttons
You click "Send to Copilot"
Copilot gets a detailed performance optimization request
You get back a comprehensive solution instead of generic advice

ClarityAI also suggests follow-ups like "Add More Detail," "Make Beginner-Friendly," or "Add Constraints" if you want to refine further.

Why This Matters

Better Results from AI Detailed, well-structured prompts give you better code. Instead of getting basic implementations, you get production-ready code with error handling, types, and best practices baked in.

Saves You Time No more rewriting prompts three times to get what you want. No more adding "oh and make it TypeScript" or "also add error handling" in follow-up messages.

Learn Better Prompting By seeing what ClarityAI changes, you'll naturally get better at writing prompts yourself. It's like having a prompt-writing tutor.

Keeps You in Flow When you're coding, you're thinking in code-mode, not prompt-writing-mode. ClarityAI lets you stay in your flow - just type what you need in plain language and keep moving.

About Cost and API Usage

Here's the honest truth about how ClarityAI handles API costs:

ClarityAI Mode (Default) When you use the default "clarityai" mode, the extension uses our built-in API key. This means you can start using ClarityAI immediately without any setup or API costs. We handle the API calls for you.

Custom API Mode If you choose "custom" mode and bring your own API key, you have full control. Use whatever provider you prefer. The API costs depend on your provider's pricing.

Each time you use @clarity in custom mode, it makes one API call using your key.

About Copilot Regardless of which API mode you use, when ClarityAI enhances your prompt and you send it to Copilot, that Copilot usage counts against your Copilot subscription, just like normal. ClarityAI isn't a replacement for Copilot - it's a helper that makes your Copilot prompts better.

Think of it this way: ClarityAI is the translator, Copilot is the coder. We make sure Copilot understands exactly what you want.

Technical Details

How It's Built

The extension is written in TypeScript and uses VS Code's Extension API, specifically the Chat Participant API to integrate with VS Code's chat interface.

Main Components:

extension.ts - Registers the chat participant and handles user interactions
llmClient.ts - Manages API calls to the ClarityAI engine
autocorrect.ts - Core logic for prompt enhancement
config.ts - Handles settings and configuration
forward.ts - Manages the integration with Copilot

Models Used:

ClarityAI Mode: Optimized reasoning models with automatic fallback
Custom Mode: Any model from any OpenAI-compatible provider (you choose)
Temperature: 0.3 (low temperature for consistent, focused results)
Mode: Instruction-tuned for precise outputs

Requirements

VS Code version 1.90.0 or higher
GitHub Copilot extension (if you want to use the "Send to Copilot" feature)
API access: Either use ClarityAI's built-in mode (no setup) or bring your own API key from any OpenAI-compatible provider

Contributing

If you want to contribute, feel free to open issues or submit pull requests. The codebase is TypeScript, so if you're comfortable with that and VS Code extension development, you'll feel right at home.

License

MIT License - see the LICENSE file for details.

Links and Resources

Made by developers, for developers. Because we all deserve better prompts.

ClarityAI - Prompt Improver for Copilot

Attafii