Skip to main content

Glimx Usage Examples

This guide provides practical examples of how to use Glimx CLI for various software development tasks, from simple code explanations to complex project scaffolding.

Basic Examples​

Explaining Code​

Ask Glimx to explain what a piece of code does:

user: Can you explain what this code does?
[Reads src/utils/formatDate.ts]
assistant: This code exports a formatDate function that takes a Date object and returns a formatted string in the format "YYYY-MM-DD". It extracts the year, month, and day from the date, pads the month and day with leading zeros if needed, and joins them with hyphens.

Finding Files​

Use glob patterns to find specific files:

user: Find all TypeScript files in the src directory
assistant: [Glob(pattern="src/**/*.ts")]
assistant: I found the following TypeScript files:
- src/index.ts
- src/utils/formatDate.ts
- src/components/Button.tsx
- src/components/Header.tsx

Searching Code​

Search for specific patterns in your codebase:

user: Find all functions that use setTimeout
assistant: [Grep(pattern="setTimeout", type="ts")]
assistant: I found the following uses of setTimeout:
- src/utils/debounce.ts:5:    const timeout = setTimeout(() => {
- src/services/api.ts:12:    setTimeout(() => {

Intermediate Examples​

Refactoring Code​

Ask Glimx to refactor code for better performance or readability:

user: Can you refactor this function to be more efficient?
[Reads src/utils/calculateTotal.ts]
assistant: [Edit(file_path="src/utils/calculateTotal.ts", old_string="function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price * items[i].quantity;
  }
  return total;
}", new_string="function calculateTotal(items) {
  return items.reduce((total, item) => total + (item.price * item.quantity), 0);
}")]
assistant: I've refactored the function to use reduce instead of a for loop, which is more functional and concise.

Creating New Files​

Ask Glimx to create new files with specific content:

user: Create a new component called UserCard
assistant: [Write(file_path="src/components/UserCard.tsx", content="import React from 'react';

interface UserCardProps {
  name: string;
  email: string;
  avatar: string;
}

export const UserCard: React.FC<UserCardProps> = ({ name, email, avatar }) => {
  return (
    <div className=\"user-card\">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
};

export default UserCard;")]
assistant: I've created a new UserCard component with props for name, email, and avatar.

Running Tests​

Ask Glimx to run tests and analyze the results:

user: Run the test suite and tell me if there are any failures
assistant: [Bash(command="npm test", description="Run test suite")]
assistant: The tests are running... All tests passed! ✅

Advanced Examples​

Project Scaffolding​

Use templates to create a new project:

user: Create a new React project with TypeScript and TailwindCSS
assistant: [Bash(command="glimx --template react-vite my-react-app", description="Create new React project from template")]
assistant: I've created a new React project with TypeScript and TailwindCSS in the my-react-app directory.

Complex Debugging​

Ask Glimx to help debug a complex issue:

user: I'm getting a "Cannot find module" error when importing a local package
assistant: [Read(file_path="package.json")]
assistant: [Read(file_path="tsconfig.json")]
assistant: [Grep(pattern="import\\s+.*from\\s+['\"].*['\"]", glob="src/**/*.ts")]
assistant: [Task(subagent_type="general-purpose", description="Debug import issue", prompt="Analyze these files to determine why the module import is failing")]
assistant: The issue appears to be with your tsconfig.json paths configuration. You need to add a path mapping for your local package.

API Integration​

Ask Glimx to help implement an API integration:

user: Implement a GitHub API client to fetch user repositories
assistant: [WebFetch(url="https://docs.github.com/en/rest/repos/repos#list-repositories-for-a-user", prompt="Extract the API endpoint and parameters for listing user repositories")]
assistant: [Write(file_path="src/api/github.ts", content="import { Octokit } from '@octokit/rest';

const octokit = new Octokit();

export async function getUserRepositories(username: string) {
  try {
    const { data } = await octokit.rest.repos.listForUser({
      username,
      per_page: 100,
    });
    return data;
  } catch (error) {
    console.error('Error fetching repositories:', error);
    throw error;
  }
}")]
assistant: I've implemented a GitHub API client that fetches user repositories. You'll need to install the @octokit/rest package.

Project Management Examples​

Task Planning​

Use the TodoWrite tool to plan complex tasks:

user: Help me implement user authentication in my React app
assistant: [TodoWrite(todos=[
  {"content": "Design authentication flow", "status": "pending"},
  {"content": "Set up authentication context", "status": "pending"},
  {"content": "Implement login form", "status": "pending"},
  {"content": "Implement signup form", "status": "pending"},
  {"content": "Add protected routes", "status": "pending"},
  {"content": "Implement logout functionality", "status": "pending"}
])]
assistant: I've created a task list for implementing user authentication. Let's start with designing the authentication flow.

Code Review​

Ask Glimx to review code for best practices:

user: Can you review this component for best practices?
[Reads src/components/ProductList.tsx]
assistant: [Task(subagent_type="code-reviewer", description="Review React component", prompt="Review this React component for performance, accessibility, and best practices")]
assistant: Here's my review of the ProductList component:

✅ Good:
- Uses TypeScript interfaces for props
- Implements proper error handling
- Follows React naming conventions

⚠️ Improvements needed:
- Consider using React.memo for performance optimization
- Add aria-labels for accessibility
- Extract complex logic into custom hooks

AI-Assisted Development Examples​

Sequential Thinking​

Use the sequential thinking capability to break down complex problems:

user: How can I implement a real-time chat feature?
assistant: [Task(subagent_type="task-executor", description="Plan chat feature", prompt="Break down implementing a real-time chat feature into sequential steps")]
assistant: Here's a step-by-step approach to implementing a real-time chat feature:

1. Design the data model for messages and users
2. Set up a WebSocket server for real-time communication
3. Implement message persistence (database)
4. Create the frontend chat interface
5. Add user authentication and presence indicators
6. Implement message history and loading
7. Add features like typing indicators and read receipts

Memory System​

Use the memory system to keep context across sessions:

user: Remember that I'm working on a React project with TypeScript
assistant: I've noted that you're working on a React project with TypeScript. I'll keep this in mind for future suggestions.

user: What's the best way to manage state in my project?
assistant: Since you're working on a React project with TypeScript, here are the best state management options:

1. For simple state: React's useState and useReducer hooks
2. For complex state: Zustand or Jotai (lightweight alternatives to Redux)
3. For large applications: Redux Toolkit with TypeScript support

Given that you mentioned TypeScript, I recommend using Redux Toolkit as it provides excellent TypeScript support out of the box.

Configuration Examples​

Customizing Models​

Configure Glimx to use specific models for different tasks:

user: Show me how to configure different models for coding and writing tasks
assistant: You can configure different models in your ~/.opencode/config.json file:

{
  "model": "groq/qwen-32b",
  "agent": {
    "plan": {
      "model": "groq/qwen-32b",
      "description": "Planning agent for breaking down complex tasks"
    },
    "build": {
      "model": "groq/llama-3.3-70b",
      "description": "Build agent for implementation tasks"
    },
    "write": {
      "model": "openrouter/deepseek-chat",
      "description": "Writing agent for documentation"
    }
  }
}

Setting Up Permissions​

Configure permissions for safer operation:

user: How do I set up permissions to prevent dangerous operations?
assistant: You can configure permissions in your ~/.opencode/config.json file:

{
  "permission": {
    "bash": {
      "rm -rf *": "deny",
      "git push *": "ask",
      "npm install *": "ask",
      "ls *": "allow",
      "cd *": "allow",
      "*": "ask"
    },
    "edit": "ask",
    "write": "ask"
  }
}

Integration Examples​

GitHub Integration​

Use Glimx with GitHub for code reviews and issue management:

user: Review this pull request for performance issues
assistant: [WebFetch(url="https://github.com/user/repo/pull/123", prompt="Extract the changed files and their content")]
assistant: [Task(subagent_type="code-reviewer", description="Review pull request", prompt="Review these changes for performance issues, security vulnerabilities, and best practices")]
assistant: I've reviewed the pull request and found the following issues:

1. Performance: The loop in src/utils/processData.ts could be optimized using map instead of forEach
2. Security: The API key in src/config.ts should be moved to environment variables
3. Best practices: Missing error handling in the async functions

CI/CD Integration​

Use Glimx in CI/CD pipelines for automated code quality checks:

# In your CI pipeline
glimx --model groq/qwen-32b <<EOF
Review this code for best practices and potential bugs:
$(cat src/index.ts)
EOF

Workspace Template Examples​

Creating a Node.js Project​

user: Create a new Node.js project with TypeScript
assistant: [Bash(command="glimx --template node-typescript my-node-project", description="Create new Node.js project")]
assistant: I've created a new Node.js project with TypeScript in the my-node-project directory. The project includes:
- TypeScript configuration
- ESLint and Prettier for code quality
- Jest for testing
- Basic project structure

Creating a Python API​

user: Create a new Python FastAPI project
assistant: [Bash(command="glimx --template python-fastapi my-api", description="Create new Python FastAPI project")]
assistant: I've created a new Python FastAPI project in the my-api directory. The project includes:
- FastAPI framework setup
- Poetry for dependency management
- Basic API structure with example endpoints
- Pytest for testing

Troubleshooting Examples​

Dependency Issues​

user: I'm getting dependency conflicts when installing packages
assistant: [Bash(command="npm ls", description="List dependency tree")]
assistant: [Read(file_path="package.json")]
assistant: It looks like you have conflicting versions of React. Try these steps:

1. Clear npm cache: npm cache clean --force
2. Remove node_modules: rm -rf node_modules
3. Remove package-lock.json: rm package-lock.json
4. Reinstall dependencies: npm install

If that doesn't work, you may need to update your package.json to use compatible versions.

Configuration Issues​

user: Glimx is not using my custom configuration
assistant: [Read(file_path="~/.opencode/config.json")]
assistant: [Bash(command="glimx --config ~/.opencode/config.json", description="Start Glimx with explicit config")]
assistant: I see a syntax error in your config.json file on line 15. There's a missing comma after the theme property. Let me fix that for you.
[Edit(file_path="~/.opencode/config.json", old_string="  \"theme\": \"glimx\"
  \"model\": \"groq/qwen-32b\"", new_string="  \"theme\": \"glimx\",
  \"model\": \"groq/qwen-32b\"")]

Best Practices Examples​

Code Organization​

user: How should I organize my React project?
assistant: [Task(subagent_type="design-agent", description="Plan React project structure", prompt="Recommend a best-practice folder structure for a React project with TypeScript")]
assistant: Here's a recommended folder structure for your React project:

my-react-app/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── atoms/           # Basic components (Button, Input, etc.)
│   │   ├── molecules/       # Composite components (Form, Card, etc.)
│   │   └── organisms/       # Complex components (Header, Footer, etc.)
│   ├── features/            # Feature-specific code
│   │   └── authentication/  # Auth-related components and logic
│   ├── hooks/               # Custom hooks
│   ├── services/            # API services and data fetching
│   ├── utils/               # Utility functions
│   ├── types/               # TypeScript types and interfaces
│   ├── styles/              # Global styles and themes
│   └── App.tsx              # Main application component
├── public/                  # Static assets
└── tests/                   # Test files

Performance Optimization​

user: How can I optimize my React app's performance?
assistant: [Read(file_path="src/App.tsx")]
assistant: [Grep(pattern="useEffect|useState", glob="src/**/*.ts")]
assistant: Here are some performance optimization techniques for your React app:

1. Use React.memo for components that render frequently
2. Implement useMemo for expensive calculations
3. Use useCallback for functions passed to child components
4. Code-split using React.lazy and Suspense
5. Optimize images and assets
6. Use the React Profiler to identify bottlenecks

Would you like me to implement any of these optimizations in your code?

Advanced AI Features​

Knowledge Graph Memory​

user: What did we discuss about authentication yesterday?
assistant: Based on our previous conversation, we discussed implementing user authentication in your React app. We planned the following tasks:

1. Design authentication flow
2. Set up authentication context
3. Implement login form
4. Implement signup form
5. Add protected routes
6. Implement logout functionality

We also discussed using JWT tokens for stateless authentication and implementing refresh token functionality for better security.

Sequential Problem Solving​

user: How do I implement a search feature with autocomplete?
assistant: [Task(subagent_type="task-executor", description="Plan search feature", prompt="Break down implementing a search feature with autocomplete into sequential steps")]
assistant: Here's a step-by-step approach to implementing a search feature with autocomplete:

1. Design the search input component
2. Implement debouncing to limit API calls
3. Set up the search API endpoint
4. Create the autocomplete dropdown UI
5. Implement keyboard navigation
6. Add loading states and error handling
7. Optimize performance with caching
8. Add accessibility features
9. Implement search history
10. Add filtering and sorting options

Let's start with designing the search input component.

Next Steps​

These examples demonstrate the power and flexibility of Glimx CLI for various software development tasks. For more detailed information about specific features, check out the other documentation files: